Study · CSS · Geometry

Geometry with CSS

Directions, orbits and pointing lines. Three ways to describe position using CSS functions.

A position can be described as an angle and a distance, or as horizontal and vertical coordinates. These three experiments explore how CSS moves between those descriptions, letting the browser handle the geometry.

Follow a direction

The rays start with a direction. Each mark follows an offset-path defined by ray(); distance moves it along that path, the anchor chooses which part of the mark sits on it, and orientation decides whether the mark turns with the path. Replay moves the marks out from the centre.

Ray motion
offset-path: ray(30deg closest-side); offset-distance: 76%; offset-anchor: 50% 50%; offset-rotate: auto;

Turn an angle into a position

The orbit turns an angle and a radius into coordinates. cos() gives the horizontal position and sin() gives the vertical position. Each dot adds an equal angle to the phase, so the arrangement stays evenly spaced as it turns or changes size.

Angle → position
x = cos(angle) × radius y = sin(angle) × radius

Recover direction and distance

The pointing line reverses that calculation. From horizontal and vertical coordinates, atan2(y, x) finds the direction and hypot(x, y) finds the distance. Drag the target or use the sliders to explore all four quadrants. Positive y points down in browser coordinates, so positive angles turn clockwise.

Position → angle and distance
rotate: atan2(-18, 28); width: hypot(28, -18) × 1%;

Drag across the diagram, or adjust the two sliders.

CSS defines the paths and calculates the positions. A small script passes control values and pointer coordinates into custom properties and triggers replay. Nothing runs continuously; reduced motion keeps the ray's final arrangement without the travel.