Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/picturepan2/solar.css
Pure CSS Solar System Animation
https://github.com/picturepan2/solar.css
Last synced: about 2 months ago
JSON representation
Pure CSS Solar System Animation
- Host: GitHub
- URL: https://github.com/picturepan2/solar.css
- Owner: picturepan2
- Created: 2020-03-29T06:19:46.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T23:26:53.000Z (almost 2 years ago)
- Last Synced: 2024-04-16T21:05:53.070Z (5 months ago)
- Language: CSS
- Homepage: https://picturepan2.github.io/solar.css/
- Size: 792 KB
- Stars: 150
- Watchers: 5
- Forks: 17
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-css-only - Solar.css - Pure CSS Solar System Animation (Uncategorized / Uncategorized)
README
# 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](https://www.paypal.me/picturepan2) or [Buy me a coffee](https://www.buymeacoffee.com/yanzhu).
### 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](https://solarsystem.nasa.gov/)
- [Solar System - Wikipedia](https://en.wikipedia.org/wiki/Solar_System)