An educational demo that visualizes each planet's rotational period and orbital tilt. I tried to make the planets as photorealistic as possible with CSS only - no JavaScript or additional libraries were used. I used a single sass mixin that interpolates css custom variables of each planet.

I wrote a blog post that dissects the CSS responsible for styling the planets: https://codepen.io/robdimarzo/post/rebuilding-the-solar-system-with-css

### Dev takeaways

• Animating a background-position by 200% will allow it to loop infinitely and seamlessly
• Before using CSS custom variables for the planet attributes, I attempted to use SCSS variables - however, I ran into some major roadblocks while interpolating them into the "planetization" mixin. Interpolation was not an issue with CSS custom variables.
• 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. Seriously, it barely moves in this demo.
• A day on Mercury is 2/3 of a year on Mercury

### Math stuff

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

### 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.
• Pluto's image has some issues, but I wanted to include it because <3 Pluto.
• Reference: https://nssdc.gsfc.nasa.gov/planetary/factsheet/

1. It's so cool!! I love it!! You made a great work!!))

2. Very well done! Deserves a FAT like.

3. Screenshot: Hm, these are just ordinary planets Pen live: WOW! That amazing!

Awesome work ;)

4. I thought they would be rotating. but still fab work. keep it up!

5. @ayushpbh They are rotating. It might be a problem with your browser

6. WOW! Excellent work!

7. Thanks for Pluto ;)

Also, how many times have you increased the speed in these? (Just a trivial question)

8. @tsakalidisk1 Excellent question! The rotation speed takes 10% of each planet's day length and measures that value in seconds instead of hours. I believe that comes out to a 36,000x increase in speed!

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

9. This is beautiful, and I learned some cool tricks from your code. Thanks!

10. Woah.

11. Nice work!

12. lovely!!

13. Very cool. All it needs now is a bit of feDisplacementMap to distort the horizons!

14. Just incredible!

15. @brian-berneker That's a great idea! I had a feeling I could use an SVG filter to spherize the horizons, but I guess feDisplacementMap didn't "dawn" on me ðŸ™ƒ

16. SUPER!!!! So easy and so cool! Great!