How It Works

CSS Orrery

Inspired by watching this Kevin Powell video about trigonometry in CSS, I made this pure-CSS orrery. (There's Sass here, does that still count as pure CSS? There's certainly no JavaScript). Also, I've now refined all of the trig out of it

Scaling things

In order to fit this on the screen in a way that makes any kind of sense, some scaling choices have had to be made:

metric scaling
planetary radius 5x104km 1vw[1]
mean orbiter-parent distance 108km 1vw
orbital period 365 Earth days 3.65 seconds

There are some further shenanigans for the moons[2]: on top of the scalings above, we also apply a weighting to each metric:

metric weighting
radius 2
planet-moon distance 0.5[3]
orbital period 50
  1. 1vw is 1% of screen-width
  2. there are, depending on who you ask and how you define the term, as many as 690 moons in the solar system, most of them way too tiny to appear on this without completely hosing the scaling for everything else. I have included a selection of 17 largish ones here
  3. an arbitrary fudge-factor of 0.5 is also applied here, to prevent the moons just crawling along the planet's edge

In addition, the Sun's radius is scaled by 3x106km to 1vw, putting it completely out-of-whack with everything else

Show Labels