10 Cool CodePen Demos (May 2024)
Tags: css, webdev, showdev, html
Published: 2024-06-11 09:00:18

---
title: 10 Cool CodePen Demos (May 2024)
published: true
description: A collection of 10 cool demos shared on CodePen during May 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-may-2024-99b17deb8002
---

## No text duplication slice and offset
The title of this demo by [Ana Tudor](https://codepen.io/thebabydino) says it all: this text effect was achieved with a single HTML element (and an ::after pseudo-element) with an SVG filter and without requiring any text duplication –which is usually needed for this type of effect.

{% codepen https://codepen.io/thebabydino/pen/RwmPZVR %}

---

## ScrollTrigger DJ
Combining GSAP (and the scrollTrigger plugin) with the Web Audio API, [Adam Kuhn](https://codepen.io/cobra_winfrey) creates a fun demo with a vinyl that can be scratched by scrolling over the disc.

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

---

## CSS Happy Hour: Cat Collage
An animated photo gallery created using HTML and CSS only, with a simple code structure. This demo by [Kasey Bonifacio](https://codepen.io/kaseybon) uses cat photos to complete the demo, which is an added plus :)


{% codepen https://codepen.io/kaseybon/pen/vYMqQje %}

---

## Social Profile Light with Theme Toggle
[Chris Bolson](https://codepen.io/cbolson) developed an interactive profile card using Tailwind. It works with mouse and keyboard and has a light/dark switch to adapt to different themes. The animation may be a bit rough around the edges, but it is nicely done, and the effect looks interesting.


{% codepen https://codepen.io/cbolson/pen/OJGYrQP %}

---

## Animated Slider | Swiper JS & Particles JS
Images grow and text spins as the user interacts with the component in this responsvie demo by [Ecem Gokdogan](https://codepen.io/ecemgo). It uses ParticlesJS to generate a moving background, and SwiperJS to boost interactivity and have smooth animations in the slider.


{% codepen https://codepen.io/ecemgo/pen/jOoNePb %}

---

## PATTERNS
A quiz with 30 questions that uses emojis, shapes, and colors to find the element that matches (or doesn’t match) the pattern. This game developed by [Pedro Ondiviela](https://codepen.io/Pedro-Ondiviela) is fun, although some times it may be difficult to understand the required pattern.


{% codepen https://codepen.io/Pedro-Ondiviela/pen/jORgbbK %}

---

## The how behind pure CSS halftone
Again [Ana Tudor](https://codepen.io/thebabydino) with a cool animated demo that showcases how she created a halftone pattern using three CSS properties. Step by step, the screen updates the code, preview, and explanation, making it easy to view and understand.


{% codepen https://codepen.io/thebabydino/pen/JjqPWNW %}

---

## CSS Slinky?
[Script Raccoon](https://codepen.io/scriptraccoon) with a mesmerizing demo showing an animated slinky(?) created with CSS and HTML. The slinky will spin, rotate, and form different shapes on the screen. It is hard to look away.


{% codepen https://codepen.io/scriptraccoon/pen/bGJyMPg %}

---

## On/Off Plugs
In essence, this component is a light/dark mode toggle switch. And a fun one at it, with plugs connecting and disconnecting to switch the theme, with a smooth animation. Great job by [Jon Kantner](https://codepen.io/jkantner).


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

---

## CSS Gears (2)
A 3D CSS demo by [Amit Sheen](https://codepen.io/amit_sheen) (of course). The animation uses HTML and CSS only (no JavaScript or SVG) to move these gears (formed by 10 stacked elements) in an hypnotic way.

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

---

If you liked these demos, check last month’s article with another ten cool CodePen demos: https://dev.to/alvaromontoro/10-cool-codepen-demos-april-2024-4a70