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.

Mighty Fish

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.

Power Surge

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.

Line Loader

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

Rachel Smith has been killing it blogging about doing awesome things with JavaScript lately, making complicated subjects like physics and bézier curves easier to understand and fun. Her energy is infectious when you check out her fun Pens like this "Floaty fluttery rainbow stars":

See the Pen Floaty fluttery rainbow stars by Rachel Smith (@rachsmith) on CodePen.

Jake Albaugh

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.

Rainbow Circle

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.

Mojo Working

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

css-tricks.comchriscoyierPosts