Solar CSSystem

An educational demo that visualizes each planet's rotational period and orbital tilt using only CSS.

I set out to recreate our solar system's planets as photorealistically as possible with CSS only - without JavaScript or additional libraries. I used a single SCSS mixin that interpolates custom variables to style and animate each planet with their unique properties, in addition to a few shared classes.

The Math

The planet rotations in this demo are all moving at 36,000x their normal speed. The rotation speed takes 10% of each planet's day length and measures that value in seconds instead of hours.

In the SCSS mixin, this happens as:

animation: planetRotate calc(var(--$planet-day)*.1s) linear infinite;

The formula is:

planetDayLengthHours x .1 = planetRotationSpeed(seconds)

For example:

• Earth: 23.9 x .1 = 2.39 seconds
• Jupiter: 9.9 x .1 = .99 seconds
• Venus: 5832.5 x .1 = 583.25 seconds

To get 36,000, I calculate the amount of seconds in a planet's day and divide it by the rotation speed above:

(secPerMin x minPerHour x planetDayLengthHours) / planetRotationSpeed = 36,000

• Earth: (60 x 60 x 23.9) = 86,040 / 2.39 = 36,000
• Jupiter: (60 x 60 x 9.9) = 35,640 / .99 = 36,000
• Venus: (60 x 60 x 5832.5) = 20,997,00 / 583.25 = 36,000

Dev Takeaways

• Animating a background-position from 0% to 200% will allow it to loop infinitely and seamlessly.
• Mixin interpolation is more capable with CSS custom variables than SCSS variables. I originally used SCSS variables, but I ran into some major roadblocks while interpolating them into the "planetization" mixin.
• The atmospheric visual effects are a combination of inset and regular box-shadows that provide the dark-side shadow, day-side illumination, and slight atmospheric corona.

Fun Planet Info

• Wow Jupiter spins ridiculously fast considering how large it is.
• Venus spins very slowly AND in the opposite direction of other planets. Seriously, it barely moves in this demo.
• A day on Mercury is 2/3 of a year on Mercury.

Astronomical Notes

• The day and year values in this demo are measured in Earth hours and Earth days.
• All examples take place during each planet's winter solstice.
• The Sun is spins at different speeds from its equator to its poles, so this depiction is approximate.
• Reference: NASA - Planetary Fact Sheet