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?
So without further adeiu, I present to you our first CodePen of the Week: An accurately time-scaled solar system created in pure CSS.
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?
Happy coding, webdevs.