Chris Coyier’s Favorite CodePen Demos II
Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so much damn fine work on CodePen. Ten just isn't enough. Thankfully, I get to pick new amazing work to show everyday, which is what the CodePen homepage is. So I'll just pick some exceptional Pens that have been posted pretty recently.
Karim Maaloul's "Chill the Lion" blew up in popularity the other day, but check out some of his earlier Pens too, like "Mighty fish":
See the Pen Mighty fish by Karim Maaloul (@Yakudoo) on CodePen.
Responsive Animated Infographic
I was recently mesmerized by Sarah Drasner's "Responsive Animated Infographic". She took some data about different potential solutions to global warming and created an interactive infographic from it. The result isn't just impressive and fun, it actually delivers the information in a super effective way. You travel through the options in the order of likelihood while seeing how effective and costly they are. Not to mention… responsive. Wow.
See the Pen Responsive Animated Infographic. by Sarah Drasner (@sdras) on CodePen.
CodePen can be an a great place for teaching and learning. I applaud Mozilla for using it that way with the "Power Surge" game they made. The idea is that the game is fun and playable, but has some performance issues (on purpose). You use performance tools available in the DevTools to analyze and fix them.
See the Pen Power Surge by Mozilla Hacks (@mozhacks) on CodePen.
Chris Gannon does some incredible work with SVG animation. It's always tasteful and modern feeling. It makes you wish interaction design on the web was always this much fun, like this "Line Loader" demo:
See the Pen SVG Line Loader (success) by Chris Gannon (@chrisgannon) on CodePen.
Floaty fluttery rainbow stars
See the Pen Floaty fluttery rainbow stars by Rachel Smith (@rachsmith) on CodePen.
Jake Albaugh's CodePen account actually became self-aware not long ago and programmed itself. So yeah that was a first.
See the Pen pen#PwLXXP by Jake Albaugh (@jakealbaugh) on CodePen.
Tiffany Rayside is incredibly prolific on CodePen. One super interesting thing she has been doing lately is starting with some base code and "remixing" it to create totally different visual demos. In the case of her Foo Particles Collection, the particle code is identical but only values and design choices change. One example:
See the Pen Foo Particles Four by Tiffany Rayside (@tmrDevelops) on CodePen.
Wild, Wired Blocks
Jack Rugile's demos often feel like they should be part of Hollywood movie intros. Incredibly artistic, performant, beautiful, surprising, and classy.
See the Pen Rainbow Grid by Jack Rugile (@jackrugile) on CodePen.
Angular Interactive Box-Model Diagram
Demos that are built specifically to teach a concept are always close to my heart. This beautiful interactive demo to teach the box model in CSS by Caroline Artz is amazing:
See the Pen angular interactive box-model diagram by Caroline Artz (@carolineartz) on CodePen.
Gerard Ferrandez's work is captivating. It's beautiful, while embracing the absurd and making you think. Apparently transparent is a good example of that, but all his demos are worth a look. Here's one of my favorites that gets into the "glitch" look that I can't get enough of:
See the Pen mojo working by Gerard Ferrandez (@ge1doot) on CodePen.
About Chris Coyier
Designer at CodePen. Writer at CSS-Tricks. Podcaster at ShopTalk
Thanks Chris for this post! It’s great to see what people are doing – this is very inspirational.
Wow, great collection! Honestly, never used codepen to my own pen, but stumble across so many works while trying to look for solutions and inspirations. May be I should try using them now.
Oh, by the way, maybe you should fix this. The quotations seem to render strangely in your paragraphs.
Thanks for the resources. The first one is really amazing.
I always love these kind of demos, thanks! :)
I can say I learned WordPress from you Chris and it is so nice that you consistently keep teaching. Thanks :)
Sweet. Thanks for everything you do, Chris. I run across such much useful content by you. Awesome to you for giving back.