10 Cool CodePen Demos (June 2023)
Tags: webdev, html, css, javascript
Published: 2023-07-05 22:18:27

---
title: 10 Cool CodePen Demos (June 2023)
published: true
description: A collection of 10 cool and exciting front-end demos shared on CodePen during June 2023
tags: webdev,html,css,javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://alvaromontoro.medium.com/10-cool-codepen-demos-june-2023-9d2d26974364
---

## 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](https://codepen.io/daledesilva).

{% codepen https://codepen.io/daledesilva/pen/MWzmWJQ %}

---

## ClimaCode

[Rafa](https://codepen.io/RAFA3L) 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.

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

---

## Shader Practice #19

This demo by [Vivian Chen](https://codepen.io/vivianycc) 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.

{% codepen https://codepen.io/vivianycc/pen/GRwJqJR %}

---

## Toothed Toggle - CSS

[Josetxu](https://codepen.io/josetxu) coded a few toggle buttons for a CodePen challenge. I found [a cute one with a skeleton](https://codepen.io/josetxu/pen/QWJGeyR), but I liked this one better. Maybe because it has an A-Team "I love it when a toggle comes together" type of vibe?

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

---

## 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](https://codepen.io/thebabydino) is a master of. Warning: Beware before you open this demo; it can be very resource-consuming.

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

---

## 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](https://codepen.io/jh3y)'s specialty. A lot can be learned by looking at the code.

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

---

## Solar Date Picker

[Marco Briatore](https://codepen.io/briatoremarco) 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.

{% codepen https://codepen.io/briatoremarco/pen/WNYpBgw %}

---

## Some of these trees have been growing for years

This generative art by [Tom Hinton](https://codepen.io/TomHinton) 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.

{% codepen https://codepen.io/TomHinton/pen/jOQBJKz %}

---

## Colors array using only CSS

[Temani Afif](https://codepen.io/t_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`.

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

---

## AI Radio Button

As part of the "Bad AI" component collection, [Chris Gannon](https://codepen.io/chrisgannon) 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.

{% codepen https://codepen.io/chrisgannon/pen/ZEqdVZx %}