DEV Community

Cover image for 10 Cool CodePen Demos (April 2024)
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at Medium

10 Cool CodePen Demos (April 2024)

Untitled

This piece of generative art doesn’t use any library in particular; it’s just JavaScript generating random sequences that change color and grow (reminding me a little bit of potato stems growing 😳). An amazing and mesmerizing demo by tina.


Cosmic Dreams

Inspired by Anxo Vizcaíno’s video, Konstantin Denerz created a beautiful animation using HTML, CSS, and a little SVG (for filters and textures). Relax, switch on the music, and enjoy the details.


Single Div CSS Parrot

Arman Borkhani creates impressive CSS Art demos. This parrot is a beautiful example of what can be achieved with a single HTML element and some CSS (80 lines).


Doom Scroll

Talking about Adam Kuhn is talking about quality content. He was a Front End Conf 2024 speaker, showcasing this Doom game created in HTML and CSS using scroll-driven animation.


Reorder Song List

Una Kravets built this demo with a practical case for View Transitions in CSS. Move the songs around or click the delete button to see how they animate gracefully instead of the change “just happening.”


Letterboxd Inspired Loading

This is the first loader in the list (there are a few more; I think there was a CodePen Challenge?). Cynthia Costa brings this loader inspired by the Letterboxd logo, which uses mix-blend-mode to combine the colors.


CSS Only 3D Tagcloud V2

I have conflicted feelings about Niklas Knaack’s demo. I really like the use of 3D, the originality of the idea, and how it was coded only with HTML and CSS (no JS, impressive!); I find it a bit difficult to control. The pros beat the cons by far. Also, click outside the tag cloud for some fun 🤩


Emoji Toggle

A toggle switch with feelings is one of Jon Kantner’s fun components. In this animated toggle, you can change between the unhappy and happy emojis. The animation (and the final bounce) is cool.


Mesmerizing Loader Animation

The title says it all. This loader animation is mesmerizing. From the colors to the rotations, it has something hypnotic. It is easily customizable by changing the CSS variables at the top of the code. Neat demo by Jon Christensen.


Loading animation

One last demo and one last loading animation (there were only three, don’t complain!). Scott R McGann created this sparkling double helix loader that moves from left to right while the percentage increases. A cool component to close the list.


Top comments (0)