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!
(by Oleg Solomka)
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.
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.
(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.
(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)
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.