CodePen of the Week: Pure CSS Solar System Animation

HeatherCSS, Inspiration0 Comments

Codepen of the Week: Week 1

Today kicks off a new weekly series we’ll be having here on WebDevAddict – The CodePen of the Week!

In case you’re not familiar with the glory that is CodePen, it’s an online application that allows you to create and run front-end code from within your browser. It’s the perfect tool for practicing your web development skills. As they describe themselves on their website:

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.

Yes, it’s completely as awesome as it sounds.

In case you’re more of the visual type (like myself) and want to know more, here’s a quick video further explaining the power of CodePen:


By the way – Can you tell I’m a raving fan of CodePen yet?

So what exactly is this CodePen of the Week series?

Every week I’ll be choosing my one of my favorite CodePens to showcase on the site. The pen may feature anything from a spectacular CSS animation to a completely useless and fun JavaScript application. As long as it’s hosted on CodePen, it qualifies.

So without further adeiu, I present to you our first CodePen of the Week: An accurately time-scaled solar system created in pure CSS.

See the Pen Solar System animation – Pure CSS by Heather Wilson (@webdevaddict) on CodePen.

I absolutely cannot get over my love for this animation. Astronomy has always been a bit of a favorite topic of mine would be an understatement, (can you believe I started my college career to become an AstroPhysicist?), and I could almost literally stare at this thing for hours. Absolutely spectacular.

Check out the entire CSS Solar System CodePen here. If you want to play around a bit, try altering the  $year-in-second value at the top of the code to either speed up or slow down the planets’ orbits. This value stores the length of one simulated Earth-year in seconds. Is that amazing or what?

Props to Malik Dellidj for creating this masterpiece of a CSS animation. You can check out his other wonderful work by visiting him on Twitter, GitHub, or CodePen.

Happy coding, webdevs.

Leave a Comment