OrbitPlayground

Move the pieces. Test the geometry.

Compose with Orbit's primitives: rings, satellites, arcs and progress. Each universe fills its box and orbit-12 touches the edge; the controls change the HTML and CSS live.

Satellite distribution

8SATELLITES

bigbang → gravity-spot → orbit → satellite

Satellites 8

Range 360°

Start angle 0°

Universe width 320 px

Show structure

Go up to 80 to pass the old 60-item CSS limit. Change the width: the rings follow the universe.

Show the HTML

Stacked arcs

65%TOTAL

Arc A · green 40%

The orange arc is 25%. Change the green one and watch the next segment move, even at zero.

Show the HTML

Progress and shapes

63%PROGRESS

Value 63%

Ending

Try 0 and 100, and change the ending. The track keeps its 270° range.

Show the HTML