nunodotferreira/solar.css

Pure CSS Solar System Animation

Solar.css

Pure CSS Solar System Animation

Exploration

• Solar system: The planets, objects and orbits around the Sun are illustrated by pure CSS at scale for their relative sizes.
• Distances to the Sun are mathematically scaled and positioned for ideal view.
• Animation durations are timely scaled relative to the Earth year by true sidereal periods. One Earth year in the animation is 10 seconds.
• The Asteroid belt is generated with pure CSS.
• Solar System in 3D Mode.
• Some fun micro-animations.

If you enjoy it, please consider donating via Paypal or Buy me a coffee.

Data

Object	Radius (km)	Sidereal Period (yr)	Distance to the Sun (km)
Sun	696000	-	-
Mercury	2440	0.240846	57909000
Venus	6052	0.615	108160000
Earth	6371	1	149600000
Mars	3390	1.881	227990000
Jupiter	69911	11.86	778360000
Saturn	58232	29.46	1433500000
Uranus	25362	84.01	2872400000
Neptune	24622	164.8	4498400000
Moon (Earth)	1737	0.0748	-

Data sources

• NASA Solar System Exploration
• Solar System - Wikipedia