10 Cool CodePen Demos (February 2024)

#css #webdev #showdev #html

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.

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, 大漠 uses a rocket to showcase how these properties can be used with SVG.

CodePen Home Leaping Triangles Loader - CSS

As part of a recent CodePen challenge, 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).

Silky Smooth Checkbox Toggles with SVG.js

This demo by Josh Dillon 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.

Using CSS scroll animations to detect visibility changes

This was something different. 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.

Video to ASCII Art

Another demo by Konstantin Denerz. 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.

Heart Shape Image Reveal

Temani 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?

Eye Pattern

I don't know how to define this WebGL demo by Ksenia Kondrashova. 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." 😅

CSS Art

Ben Evans 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.

Bubble Preloader

Another usual person on this list is Jon Kantner, 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.