Skip to content

Orbit the sun with HTML and CSS. The model is kind of accurate—not really; however, it was fun to make. I learned how SVG offset paths work in the process of making this. Don't bother waiting around to watch Neptune complete a single orbit; that will take approximately 27 minutes.

Notifications You must be signed in to change notification settings

eriaht/our-planets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Solar System Model with HTML and CSS Using SVG Paths

Orbit the Sun with HTML and CSS. The model is kind of accurate—not really; however, it was fun to make. I learned how SVG offset paths work in the process of making this. Don't bother waiting around to watch Neptune complete a single orbit; that will take approximately 27 minutes.

How I got the revolution times in seconds for css animation

10 seconds for every 365.26 days

Planet Revolution period CSS Revolution period
Mercury 87.97 days (87.97 / 365.26) * 10s
Venus 224.7 days (224.7 / 365.26) * 10s
Earth 365.26 days (365.26 / 365.26) * 10s
Mars 1.88 years 1.88 * 10s
Jupiter 11.86 years 11.86 * 10s
Saturn 29.46 years 29.46 * 10s
Uranus 84.01 years 84.01 * 10s
Neptune 164.79 years 164.79 * 10s

Source for revolution period data https://www.exploratorium.edu/explore/solar-system/age

About

Orbit the sun with HTML and CSS. The model is kind of accurate—not really; however, it was fun to make. I learned how SVG offset paths work in the process of making this. Don't bother waiting around to watch Neptune complete a single orbit; that will take approximately 27 minutes.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published