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.

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

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!

See the Pen Solar System animation - Pure CSS by Malik Dellidj (@kowlor) on CodePen.

Solar System with Pure CSS by Yash Bhardwaj

Hover the planet names for some fun facts!

See the Pen Solar System with Pure CSS by Yash Bhardwaj (@yashbhardwaj) on CodePen.

Hugo DarbyBrown created a similar one in Sass that also features an input slider to change scales. Or another by Sam Chahine that counts the time elapsed!

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.

See the Pen Three js - Interactive solar system by Nikita Skargovskii (@nikita_ska) on CodePen.

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.

See the Pen Solar System Maker by Bryan Jones (@bartuc) on CodePen.

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?

See the Pen Random Solar System Generator - with seed! by Griffin Moyer (@gmoyer) on CodePen.

Solar System by Harry Parton

Let's end with this hyper stylized version by Harry.

See the Pen Solar System - 2D by Harry Parton (@hparton) on CodePen.