CSS Sin Function Basic

<!DOCTYPE html>
<title>My Example</title>

.wave-dot {
    width: 30px;
    height: 30px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    
    /* 
      Calculate the Y position using sin().
      We multiply by -1 so that positive angles go UP instead of DOWN.
    */
    --y: calc(sin(var(--angle)) * var(--amplitude) * -1);
    
    transform: translateY(var(--y));
  }

/* Assign a different angle to each dot along the wave */
  .dot-1 { --angle: 0deg; }
  .dot-2 { --angle: 45deg; background-color: #0dcaf0; }
  .dot-3 { --angle: 90deg; background-color: #20c997; }
  .dot-4 { --angle: 135deg; background-color: #198754; }
  .dot-5 { --angle: 180deg; background-color: #ffc107; color: black; }
  .dot-6 { --angle: 225deg; background-color: #fd7e14; }
  .dot-7 { --angle: 270deg; background-color: #dc3545; }
  .dot-8 { --angle: 315deg; background-color: #d63384; }
  .dot-9 { --angle: 360deg; background-color: #6f42c1; }
</style>