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!

VelocityJS

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

Breathe

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

Magnetic

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

Bacteria

(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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Incredible Demos

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

  • By
    MooTools 1.2 Image Protector: dwProtector

    Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

Discussion

  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!