Chris Coyier’s Favorite CodePen Demos

By  on  

Chris Coyer's incredible CodePen is much more than your typical code'n'share site. CodePen features the end result more than the code, provides loads of collaboration tools, and seems to be pushing new features every week. But what does Chris think of the user work being done on CodePen? I've asked Chris to share his favorite pens -- enjoy!

CodePen Logo

David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you just can't get enough, I heart a bunch of Pens every day and reserve my triple hearted Pens for my absolute favorites.

Whale

I love the simplicity of this one. When you think about how it's made, it's just some shapes stacked on top of each other that follow the mouse around. But timing and the shading and responsiveness and everything makes it so satisfying to play with.

See the Pen Whale | SVG & JS by Diego Leme (@diegoleme) on CodePen

Avgrund

Hakim's demos are always so perfect it's hard to pick one. I think I like this one because of how practical it is. I'm not sure I've ever seen a modal window accomplish the visual trompe l'oeil of depth so well.

See the Pen Avgrund by Hakim El Hattab (@hakimel) on CodePen

Tearable Cloth

I believe this is our most popular Pen ever on CodePen with going on 1.5 million views. And for good reason. It's rather amazing how "real" interacting with it feels - with the gravity and the swaying and how the fabric folds up on itself and tears and falls to the floor and everything.

See the Pen Tear-able Cloth by suffick (@stuffit) on CodePen

Ribbon

Justin Windle also creates spine-tingling interactions. It is easy to feel good about the future of the web platform when you see stuff like this performing so smoothly.

See the Pen Ribbon by Justin Windle (@soulwire) on CodePen

Light Loader

I'm a sucker for particle demos, but especially when they have a practical twist to them like this progress bar indicator by Jack Rugile. I'd wait all day for a page to load with that baby.

See the Pen Light Loader by Jack Rugile (@jackrugile) on CodePen

Mechanical Grass

This Tim Holman Pen just immediately transports me to some other worldly place. Like a steampunk Alice in Wonderland or something.

See the Pen Mechanical Grass by Tim Holman (@tholman) on CodePen

Personal Page

I felt really good about CodePen when I saw this Pen by Tim Pietrusky:

I spend my online time chatting with the 4ae9b8 team. We found each other through CodePen. Hugo Giraudel, Mads Cordes (>:D), Sara Soueidan, Ana Tudor, Fabrice Weinberg & Joshua Hibbert. A really awesome group of people to spend the timewith. I ❤ you guys!

See the Pen "Tell us something about you" by Tim Pietrusky (@TimPietrusky) on CodePen

Twitter Button Concept

3D CSS effects can be simple, classy, and effective like Bennett Feely proves here.

See the Pen Twitter Button Concept by Erik Deiner by Bennett Feely (@bennettfeely) on CodePen

Triangle Optical Illusion

Ana Tudor is great at instructional programming, where she reveals how it is done through the visual demo itself. This tricky old optical illusion is one of my favorite fun examples of that.

See the Pen Now how does this happen? :) by Ana Tudor (@thebabydino) on CodePen

A huge thank you to Chris for sharing his favorite pens! It's really great to get his take on the work being featured on his platform. I hope you enjoyed his favorites and hit CodePen to find a few of your own! I also hope you are inspired to add your own awesomeness to CodePen so he picks your pen next time!

Chris Coyier

About Chris Coyier

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

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • By
    Disable Autocomplete, Autocapitalize, and Autocorrect

    Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow...

Discussion

  1. Right before I go practice on my own pens I browse and drool at all the great stuff people are building.

  2. Hi,
    I loved this article.
    I was just wondering if one can use one of these on a personal website with credit?
    That whale has really caught my fancy! :D

    • I recommend you get in touch with the author, but there’s nothing stopping you.

  3. #iquitwebdesign
    These are super awesome!

  4. I love CodePen!

  5. This is where I wished I had time in a working week to self-develop! These examples are great, awesome to see what others are capable off with the humble tools of HTML, CSS and JavaScript!

  6. That 3D Twitter button is incredible. Never seen something like that in pure CSS before. Very clever, love it.

  7. Tearable Cloth is absolutely amazing

  8. OMG THE WHALE!!!

  9. awesome CodePen!!!!

  10. Pierre

    Those presented are very awesome BUT, I honestly like simpler code that are applicable in real websites.
    Look at this awesomely clean and beautiful one http://cdpn.io/aBGAy

  11. Really awesome . i am gonna use this in my site .

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