10 Cool CodePen Demos (May 2025)

Guitar Chords in CSS

Mads Stoumann published a web component that creates colorful guitar chords (also includes banjo, mandolin, ukulele...) In the demo details, there's a link to an insightful article on the process and how it was created.

Generative Glow SVG Line Art

Remember the old snake game or Windows old pipe screensaver? This generative art piece by Lea Rosema reminds of that. It combines SVG filters for glowing and animations of stroke-dashoffset to make the lines grow. As with the previous demo, the details page includes a link to a tutorial on how it was done (by Cassie Evans).

Style Broken Images

Images don't accept ::before or ::after pseudo-elements, but did you know broken images do? Temani Afif did, and share this cool HTML/CSS trick for when an image doesn't load correctly. Really neat and practical!

css:math - regular polygons using shape()

The shape() function arrived on Chrome and people are sharing demos. Amit used it to create a smooth animation of a polygon changing its number of sides. The result is stunning. I can't wait to see what people are able to create with this function.

Note: Chrome is needed to see the demo.

the intention of :hover

Jhey Tompkins brings another practical HTML/CSS tip: by adding a small delay to the transitions, we can avoid annoying and unwanted hover interactions. Such a small and easy thing, has a nice big impact in usability. Play with the values in the config dialog and check the difference.

Swipe transition on scroll

This is a beautiful demo using scroll-driven animations. Ana Tudor combines them with custom properties and clip-path to create smooth clockwise section transitions that reveal content and backgrounds (and "cats"!)

Note: this demo is Chrome only at the moment.

line morph

With the rise of shape() we may see CSS animations that were impossible before. Tools like Greensock are incredibly useful to modify paths and create transitions and smooth animations, and Carl (SnorklTv) is an expert at that. In this demo, he curves, twists, and straightens a line in just a few lines of code.

Hamburger (literally)

Having fun with HTML and CSS is a great way of learning, and this demo by Jesse Couch is a lot of fun. Parting from the idea "what if a hamburger menu was an actual hamburger?", he created a cool component. Hover over the menu, click on it, explore the code, and have fun learning with this one.

Psychedelic Lollipop

As part of a sweet CodePen Challenge, Ricardo coded this psychedelic lollipop that spins nonstop (it could easily double for a loader removing the stick). Colorful, graceful, and sober. The colors and animation are hypnotizing.

Nav Icons

This interactive component by Chris Bolson is an example of how to use the attr() function to display additional information in a simple way. Keyboard friendly, smoothly animated, custom focus display... this is a great demo overall.