10 Cool CodePen Demos (April 2024)
Tags: css, webdev, showdev, html
Published: 2024-05-10 04:38:23

---
title: 10 Cool CodePen Demos (April 2024)
published: true
description: A collection of 10 cool demos shared on CodePen during April 2024
tags: CSS,webdev,showdev,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://medium.com/@alvaromontoro/10-cool-codepen-demos-april-2024-f52c6e2deb73
---


## 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**.


{% codepen https://codepen.io/tinanewtonart/pen/RwOeqRW %}

---

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


{% codepen https://codepen.io/konstantindenerz/pen/vYMPZKz %}

---

##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).


{% codepen https://codepen.io/armanb/pen/qBwvoYK %}

---

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


{% codepen https://codepen.io/cobra_winfrey/pen/oNOMRav %}

---

##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.”


{% codepen https://codepen.io/una/pen/QWPrgrw %}

---

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


{% codepen https://codepen.io/cycosta/pen/Pogepzw %}

---

##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 🤩


{% codepen https://codepen.io/NiklasKnaack/pen/RwOvxKa %}

---

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


{% codepen https://codepen.io/jkantner/pen/KKYZrRv %}

---

##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**.


{% codepen https://codepen.io/JMChristensen/pen/GRLLVpa %}

---

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

{% codepen https://codepen.io/cantelope/pen/WNWWjWP %}

---