fig. 02 pen MbyXXL

Orbit Geometry

Three points ride a circle; each carries a satellite turning seven times faster, dotting its path onto a second canvas.

original “HTML5 canvas geometry animation” codepen.io/izmaelmag/pen/MbyXXL ↗

● running

§1 About

Two stacked canvases. The top one is cleared every frame and holds the construction: a centre point, three first-level points on R1, a satellite on R2 around each, spokes to the centre and a polygon through the satellites.

The bottom one is never cleared. Each satellite stamps a 1 px dot on it and a 5% navy wash slowly eats the old ones, so the trace is a comet rather than a finished curve.

§2 Maths

satellite radius: R2 = R1 / 2π · COUNT (R1 = 150, COUNT = 3)
rotation: θ −= π / 360 · SPEED (SPEED = 0.5)
first level: Pᵢ = C + R1 · (cos θᵢ, sin θᵢ), θᵢ = θ + i · 2π / COUNT
satellites: Sᵢ = Pᵢ + R2 · (cos φᵢ, sin φᵢ), φᵢ = θᵢ + θᵢ · COUNT · 2
trail wash: fill rgba(26, 29, 37, 0.05) every frame

§3 Adaptation

One transform replaces CENTER = innerWidth / 2 and scales R1, R2, point sizes and strokes together, so the figure keeps its proportions from a phone to a wide screen.
The layered canvases stay layered: construction on top, trails underneath on the original #202639.
Reduced motion: the full closed trace is drawn — after one turn of the ring each satellite has made 1 + 2·COUNT turns and is back where it started.