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":
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.
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.
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:
Jake Albaugh's CodePen account actually became self-aware not long ago and programmed itself. So yeah that was a first.
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:
Jack Rugile's demos often feel like they should be part of Hollywood movie intros. Incredibly artistic, performant, beautiful, surprising, and classy.
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:
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: