10 Cool CodePen Demos (March 2024)
Tags: css, webdev, showdev, html
Published: 2024-05-10 04:33:35

---
title: 10 Cool CodePen Demos (March 2024)
published: true
description: A collection of 10 cool demos shared on CodePen during March 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-march-2024-592ef4c419e7
---

This post arrives with a month delay. I selected the demos… and forgot to write the post, and then life happened. On the bright side, you’ll get two sets of 10 Cool CodePen Demos in a row! 😅

## Toast
A toast component with a toaster illustration. It makes sense, right? This demo by **Rafa** is impressive also because the interactive toaster is CSS Art, not SVG or an image. Amazing work with the lights and shadows to generate the toaster… and it’s a fully functional component, too.

{% codepen https://codepen.io/RAFA3L/pen/QWPKOmv %}


## Code Reveal
As usual, **Jhey Tompkins**'s demos are impressive and full of small details that take them to the next level. This is a wholesome component, from the eye animation to the revealing transition or the different stages of the copy/clipboard icon.

{% codepen https://codepen.io/jh3y/pen/XWQXPjd %}

## Penrose Granite Triangle Illusion CSS
This optical illusion is cool for its 3D CSS, but one thing that really caught my attention was the marble texture. Normally, developers use a background image for texture, but **Josetxu** created a beautiful texture in CSS… using only two conic gradients! 🤯

{% codepen https://codepen.io/josetxu/pen/RwOrooX %}

## Code Sketch #2 P5.js
This is an interactive “etch-a-sketch” with a few lines of JavaScript (with P5). **Rachel Smith** published it in a series in March. It may look simple, but part of its beauty is how simple the code looks.

{% codepen https://codepen.io/rachsmith/pen/BaEjGXV %}

## Code Sketch #3 P5.js
This is a second Code Sketch from **Rachel Smith**. I liked it. There’s another non-interactive one with animated color triangles, which is also really cool.

{% codepen https://codepen.io/rachsmith/pen/YzMwMPx %}

## Worms Toggle
**Josetxu** repeats in the list, too! He also created a series of toggle switches with catchy designs like this one. This is one of them. I like the colors and how smooth the shapes and colors look.

{% codepen https://codepen.io/josetxu/pen/KKYzgEp %}

## The Dark Side of Notifications
The bell icon (commonly associated with notifications) turns into Darth Vader with a light saber in this whimsical component by **Konstantin Denerz**. Original and fun.

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

## Birds — Three.JS
Based on Mr. Doob's previous work on ThreeJS, **Wakana Y.K.** presents a demo with hundreds of origami-looking birds flying around the screen in this playful (and peaceful) pen. Just sit and enjoy.

{% codepen https://codepen.io/wakana-k/pen/dyLGQEv %}

## Infinite Portals
Is it a beach inside of a birdhouse or a forest inside of a sand castle? You decide in this beautiful webGL demo made with Three.js and GSAP by **Karim Maaloul**.

{% codepen https://codepen.io/Yakudoo/pen/PogJvGv %}

## Tumbling Stick
**Amit Sheen** is a person to follow if you want to practice CSS 3D. From donuts to disks to these tumbling sticks infinitely falling against other sticks… The animation is clean and detailed, and that little bounce when the stick crashes is *chef kiss*. Another mesmerizing demo.

{% codepen https://codepen.io/amit_sheen/pen/NWmaWxa %}