10 Cool CodePen Demos (June 2023)

#webdev #html #css #javascript

Like Pulling Teeth...

This must be one of the most bizarre selectors I have ever seen. It is weird–and a bit creepy, too; I wouldn't recommend it for the faint of heart. But it has something that makes it catchy-great job by Dale de Silva.

ClimaCode

Rafa was in a previous edition of this list with a generative art piece. This time it is a realistic-looking machine that will generate a landscape based on our selected inputs-a beautiful combination of SVG and HTML.

Shader Practice #19

This demo by Vivian Chen is captivating, and I can't pinpoint what it is. Maybe it's the colors, the movement, the patterns, or its simplicity… or maybe it's the combination of everything! But it has something hypnotic to it.

Toothed Toggle - CSS

Josetxu coded a few toggle buttons for a CodePen challenge. I found a cute one with a skeleton, but I liked this one better. Maybe because it has an A-Team "I love it when a toggle comes together" type of vibe?

Jupiter in 3D with CSS trigonometry

The title says it all: this is a version of Jupiter built in 3D without having any magic number: it is all calculated numbers using CSS trigonometry functions. Something that Ana Tudor is a master of. Warning: Beware before you open this demo; it can be very resource-consuming.

Optimus Prime with CSS Transform

This Transformer is animated (click on it to change between shapes) using HTML, CSS, and a checkbox (or two if we count the one to control the speed). Creating 3D demos in pure HTML+CSS is Jhey Tompkins's specialty. A lot can be learned by looking at the code.

Solar Date Picker

Marco Briatore came up with a fantastic date selector. It is based on the earth's position concerning the sun on different days. While this component may not be ideal for production, it is original, interactive, and fun.

Some of these trees have been growing for years

This generative art by Tom Hinton was created with ThreeJS. It is trippy and hypnotic. I like the combination of colors and black and white areas. Warning: movement and color changing may cause reactions in some people.

Colors array using only CSS

Temani Afif often explores the limits of what can be done with standard CSS. In this case, he created an array of colors that can be applied using linear gradients. The secret ingredient: infinity.

AI Radio Button

As part of the "Bad AI" component collection, Chris Gannon brings a radio button to activate AI that will make the AI happy… or so it looks like? Probably not something to use in production, but a fun demo nonetheless.