A circle is the set of points in a plane at a fixed distance from a central point. In frontend work, that geometry becomes a practical way to position elements around a center, draw curved paths, and reason about movement. section 9.1.1 section 1.4.7
Represent a point on a circle with an angle, radius, and center:
- Use cosine for the horizontal component and sine for the vertical component. section 9.1.1
- Calculate coordinates with x = centerX + r * cos(angle) and y = centerY + r * sin(angle). section 9.6
- Use degrees in common CSS properties, but pass radians to JavaScript Math trigonometric functions. section 9.1.3
Placing an element around a circular layout
For a circle centered at (200, 150) with radius 80, choose an angle and calculate x = 200 + 80 * cos(angle) and y = 150 + 80 * sin(angle). Repeating the calculation with different angles places elements along the same curved path. section 9.6
x = centerX + r * cos(angle) y = centerY + r * sin(angle)
Use the coordinate listing to verify how the center, radius, sine, and cosine combine into a circle position. section 9.1.1
