Solar.css
April 15, 2020 ยท View on GitHub
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 | - |