Abstract orbital map

A star chart where every planet is a system of its own, with its own rings and moons. Each ring turns at its own speed with a plain CSS animation on rotate.

How it's built

  • Each planet is a satellite with its own .gravity-spot, so it gets its own twelve lanes for a core, a dashed ring and moons. See satellites.
  • Rings are drawn by their border. An empty ring is just a circle, so the chart's guides are rings with nothing on them; the ticks and meridians are vectors.
  • A ring with rotate turns everything on it. The .turn class animates it, and --time and --dir on each ring set the speed and the direction.
  • The label rides on orbit-16 of the planet's system, past its edge. That ring turns back as fast as the planet's ring, so the two cancel out and the word stays upright beside the planet.

Inspired by a design found on Pinterest.

Related