Chris Coyier’s Favorite CodePen Demos II

By  on  
CodePen

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.

Chris Coyier

About Chris Coyier

Designer at CodePen. Writer at CSS-Tricks. Podcaster at ShopTalk

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

Discussion

  1. Thanks Chris for this post! It’s great to see what people are doing – this is very inspirational.

  2. 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.

    http://prntscr.com/8zleay

  3. Thanks for the resources. The first one is really amazing.

  4. Bauke

    I always love these kind of demos, thanks! :)

  5. I can say I learned WordPress from you Chris and it is so nice that you consistently keep teaching. Thanks :)

  6. Sweet. Thanks for everything you do, Chris. I run across such much useful content by you. Awesome to you for giving back.

    • What Jason said!

      Same here! Thanks for helping us all with your awesome contributions!

  7. Some of these are mind blowing! Hard to believe you can do all of that just using js and html/css. I’m definitely inspired by that animated infographic, very cool!

  8. Thanks, Chris for the post! It’s great to see what people are doing – this is very inspirational.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!