CSS Cos Function Basic

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

.center-dot {
    width: 20px;
    height: 20px;
    background-color: #343a40;
    border-radius: 50%;
  }

.orbit-dot {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    
    /* 
      Calculate the X and Y positions using cos() and sin().
      X = radius * cos(angle)
      Y = radius * sin(angle)
    */
    --x: calc(var(--radius) * cos(var(--angle)));
    --y: calc(var(--radius) * sin(var(--angle)));
    
    /* Apply the calculated coordinates */
    transform: translate(var(--x), var(--y));
  }

/* Assign a different angle to each dot */
  .dot-1 { --angle: 0deg; }
  .dot-2 { --angle: 120deg; background-color: #198754; }
  .dot-3 { --angle: 240deg; background-color: #dc3545; }
</style>