Cosmically Excellent Solar System Pens

July 14, 2017

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!

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.