Jack Rugile’s Favorite CodePen Demos
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!
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.
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.
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.
Always enjoy the “Favorite CodePen Demos” posts. Just shows what you can do with a little imagination and NO Flash. ;)