There is something about our Solar System that inspires serious design and development creativity!
CSS 3D Solar System by Julian Garnier
This is CodePen’s most popular solar system Pen! Not only is it beautiful to look at, it’s very educational and data-based. The whole solar system can be viewed either as flat rings or in a 3D space. You can select individual planets to learn about their size, distance from the Sun, and their speed in rotating the Sun. As you toggle between those things, the view adjusts to show that data best relative to the other planets.
Solar System Animation by Malik Dellidj
This is also a data-based exploration of our solar system! All the data is based relative to one Earth year. By default it’s set to 30 seconds representing one Earth year, but thanks to a Sass variable, we can change that speed. We even get Earth’s moon here, and an asteroid belt!
Solar System with Pure CSS by Yash Bhardwaj
Hover the planet names for some fun facts!
Interactive solar system by Nikita Skargovskii
Hey who said it had to be our solar system?! Nikita’s demo here is more of a generic solar system, done in interactive 3D thanks to Three.js. You can click and drag around to change views, scroll to zoom, and click on the planets to bring up a a text UI.
Solar System Maker by Bryan Jones
Speaking of not-our-solar-system, Bryan created this demo which randomly adds plannets to a canvas-based solar system by clicking.
Random Solar System Generator by Griffin Moyer
I definitely recommend visiting this Pen in Editor View and hitting that Run button many (many) times. Is it too late to become a deep space exploration astronaut?
Solar System by Harry Parton
Let’s end with this hyper stylized version by Harry.