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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

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!