I know this is not the first one on CodePen, but I’m a space and physics lover, and I wanted to create mine 🙂
Here is a true time scaled solar-system, which means that every objects have a time relative to an Earth year.
You can change the number in second of the
variable to increase the speed of revolutions. Here 1 year = 30 seconds.
Note the css tricks for the Saturn rings (box-shadow) and reverse animation to compensate the orbit.