Jack Rugile’s Favorite CodePen Demos

By  on  

One of my favorite CodePen wizards is Jack Rugile. When I see pens like this, this, or this, I want to retire to my color books -- I am not as worthy of this guy. But what does he admire? Let's find out!

CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!


(by Oleg Solomka)

This pen showcases the power of Velocity.js, a JavaScript animation engine. The animation concepts and timing are executed so well, all while maintaining a playful feel. Oleg never skimps on the details and polish in his pens.

Temple (3D, pure CSS, animated)

(by Ana Tudor)

Ana is a highly advanced creature existing on a separate plane than the rest of us. This particular pen has always been my favorite of hers. It's a recreation of this GIF using only CSS. Absolutely beautiful.

Rough Seas re-creation for compo

(by Jason Brown)

This is another one of my favorite recreations of an animated GIF with code. This one is based on this GIF. Jason nails the details of the original with this pen.

I particularly enjoy these recreations because it lets me see behind the curtain to how the original artist may have gone about creating their work.


(by Mombasa)

This pen might be the most relaxing demo I've ever seen. The gentle animation and soothing color scheme complement each other well. Try clicking and dragging to adjust the 3D view of the shapes to see it from a different perspective.

Bezier Sim

(by Tim Holman)

Tim reveals the mathematical magic behind bezier curves here. I appreciate demos that can illustrate more complicated concepts, and this one does it perfectly. It's a heck of a lot fun to play with too.


(by Hakim El Hattab)

Hakim's interactive demos and games have always inspired me. This one gives me the illusion of crafting my own solar system, complete with planets and asteroids. Being able to configure and tweak a system and watch it play out is so much fun.

Plasmatic Isosurface

(by Justin Windle)

This demo is just so visually appealing, I had to include it. The colors, blending, blobbing of shapes, and scan lines all come together to create a visual party in your browser.


(by Grégoire Divaret)

Grégoire crushed it with the organic motion and aesthetic of this pen. It looks alive, it creeps me out, it's disgusting, and I absolutely love it.

Gameboy (full CSS)

(by heero)

I've seen a lot of construction from nothing style animations lately, but this one blows all the others away. There is a great deal of nostalgia for me with the subject matter, and the fluid building of each part looks amazing.

Kinda Realistic Text

(by Lucas Bebber)

Every once in a while I am genuinely surprised by what can be done with front end web tech, and this is one of those times. This is the only demo on my list that doesn't have any animation, and that's saying something. I assumed this was a background image when I first saw it. The realism Lucas achieved with this pen is insane, enjoy!

Jack Rugile

About Jack Rugile

Jack is a web developer living in Denver, CO. He is fond of the web, but absolutely loves creating games, coding demos, and hanging out with his French bulldog. His likes include: metal, drum and bass, sandwiches, cookies, and avoiding human interaction. Check out Jack's demos and games.

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Basic AJAX Requests Using MooTools 1.2

    AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time. Step 1: The XHTML Here we define two links...

  • By
    Spatial Navigation

    Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply...


  1. What is a good starting point for creating these types of animations? Are the people creating them huge math buffs who can easily create these or is there some trial and error/guesswork involved?

    I’ve done some really basic GLSL shaders using threeJS but nothing at the level these people are creating. I’d be interesting to see the process that people have making them.

  2. Hey Luke, in my case I am terrible with math, absolutely terrible lol. There is *alot* of trial and error on my part, and a lot of guesswork as well. Sometimes I’ll get an idea make a mistake that ends up looking cooler and going an entirely different route. Overtime these mistakes or pieces of demos just end up being things filed in your memory for future demos or bits of code that you can combine with other ideas you have. Like my pen featured here for example is the combination of at least 4 different tricks I had done prior.

    Also awesome list by Jack, haha its crazy seeing a top list and not seeing one of his pens since his are pretty kickass.

  3. Always enjoy the “Favorite CodePen Demos” posts. Just shows what you can do with a little imagination and NO Flash. ;)

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