10 Cool CodePen Demos (February 2024)
Tags: css, webdev, showdev, html
Published: 2024-03-03 04:43:14

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

## Electric Spinner

The effects of this loader are a combination of electric sparks and a gooey/liquid behavior that is hypnotizing (at least, I cannot stop looking at it). Amazing job by [Konstantin Denerz](https://codepen.io/konstantindenerz).

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

---

## Web Animation 101 (#764): Path Animation

The possibilities with offset-path and offset-distance are really interesting… especially if we combine them with things like scroll-driven animations (more on this soon). In this demo, [大漠](https://codepen.io/airen) uses a rocket to showcase how these properties can be used with SVG.

{% codepen https://codepen.io/airen/pen/NWJQPeE %}

---

## CodePen Home Leaping Triangles Loader - CSS

As part of a recent CodePen challenge, [Josetxu](https://codepen.io/josetxu) developed several cool-looking loaders. This one was my favorite of the lot (and it was a tough decision). The animation is really smooth, and the 3D effect is incredibly simple (it uses the drop-shadow filter).

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

---

## Silky Smooth Checkbox Toggles with SVG.js

This demo by [Josh Dillon](https://codepen.io/jdillon) was one of my favorites of February. The "silky smooth" in the title is no joke. These SVG animations (three different, try them!) are really smooth and the general look-and-feel of the components is really fresh.

{% codepen https://codepen.io/jdillon/pen/PoLBVmV %}

---

## Using CSS scroll animations to detect visibility changes

This was something different. [Giana](https://codepen.io/giana) created a page that adjusts its content to the size of the view frame using scroll animations. It's an entirely different approach from the other scroll animations I've seen online. To see it in action, open the link on CodePen and resize the window.

{% codepen https://codepen.io/giana/pen/gOEQWpR %}

---

## Video to ASCII Art

Another demo by [Konstantin Denerz](https://codepen.io/konstantindenerz). It's not the first time I've seen ASCII videos, but it has this wow factor every time. Pick from different movies in the configuration, or try your own. It's always fun to see the effect.

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

---

## Heart Shape Image Reveal

[Temani Afif](https://codepen.io/t_afif) is a common name in this list series. He creates fantastic shapes with only the image tag, and this was no exception. The added cool thing is that the animation is different on mouse over and mouse out. Can you figure out how he did it?

{% codepen https://codepen.io/t_afif/pen/abMPBdg %}

---

## Eye Pattern

I don't know how to define this WebGL demo by [Ksenia Kondrashova](https://codepen.io/ksenia-k). The light following the mouse's movement, the eyes also following the mouse, the redness in the eyes… "Amazing" would be a good adjective… but also "Creepy." 😅

{% codepen https://codepen.io/ksenia-k/pen/poYZpyQ %}

---

## CSS Art

[Ben Evans](https://codepen.io/ivorjetski) creates realistic CSS art that will blow anyone's mind, but he decided to go a different way for this demo. What you are seeing is not an image or a textile pattern. It is not a background or a gradient. It is text… that explains the piece and how it was done.

{% codepen https://codepen.io/ivorjetski/pen/MWxPVBo %}

---

## Bubble Preloader

Another usual person on this list is [Jon Kantner](https://codepen.io/jkantner), who specializes in creating whimsical components and animations (don't miss his work on CodePen!). This month, I picked a simple bubble loader, yet it has many details (notice the lights and the different elements when the bubble bursts). It brought memories of the video game Ecco the Dolphin.

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

---