10 Cool CodePen Demos (April 23)
Tags: codepen, css, javascript, webdev
Published: 2023-05-04 03:55:42

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

## Procedural Japanese Style Tree

A generative art project by [Rafa](https://codepen.io/RAFA3L). A refreshing generative art project coded in vanilla JavaScript using canvas (no libraries). This was part of a CodePen Challenge to create demos related to nature and flora—a great job.

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

---

## oregon fawn lilies

Another generative art project related to flora... also for the CodePen challenge. This one uses versions of different lilies photographs by the author, [Sophia Wood](https://codepen.io/fractalkitty), to create patterns and random (and beautiful) combinations.

{% codepen https://codepen.io/fractalkitty/pen/wvYWRzE %}

---

## where I live

Another demo by [Sophia (fractal kitty)](https://codepen.io/fractalkitty). This time, she uses the p5.js library to modify a still photograph and create a moving pattern... and, at the same time, mixes the code with poetry (reads the comments in the JavaScript!) An interesting combination that we don’t see often.

{% codepen https://codepen.io/fractalkitty/pen/dyqxOPm %}

---

## Stained glass

This is the first of two demos by [Wakana Y.K.](https://codepen.io/wakana-k) on this list. I like the reflections of the light (and the regions where the different reflections meet) and the shadows. Caution: Motion warning! You can drag to stop some movement but not all.

{% codepen https://codepen.io/wakana-k/pen/YzJqBpM %}

---

## Colorful painting

[Wakana Y.K.](https://codepen.io/wakana-k)'s second demo is an impressive (and fun) painting “game.” First, color the bunny 3d model figurine by clicking on it. Then, you can move the camera, change colors, or restart the whole thing.

{% codepen https://codepen.io/wakana-k/pen/yLRaEGb %}

---

## 3D Cards

I like this demo by [Mubanga](https://codepen.io/mubangadv). The code may need a little polishing, but it looks impeccable, and the effect is smooth and cool (I may borrow the idea for a personal project.)

{% codepen https://codepen.io/mubangadv/pen/YzJNbOa %}

---

## Copypaste Apple Keyboard

[Jon Kantner](https://codepen.io/jkantner) is a regular in this series of posts. He has interesting monthly demos, especially for components and CSS drawings, like this: a realistic-looking tongue-in-cheek keyboard. The shadows and colors are on point, and it also works with the regular keyboard.

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

---

## Night && Day Toggle

[Jhey](https://codepen.io/jh3y) is a whimsical developer. This time, he brings an animated night/day-dark/light switch with the surprise appearance of his signature bear (wait a couple of seconds after changing the value.) As always, the result is really clean and beautiful looking.

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

---

## Animated Counter Slider

Sometimes demos don’t have to be all fireworks and excessive drawings or animations. This is an example of a slider component that is simple, elegant, and has the perfect amount of micro-interactions to make it great and separate it from the rest—fantastic job by [Tucker Massad](https://codepen.io/tuckermassad).

{% codepen https://codepen.io/tuckermassad/pen/XWxKWry %}

---

## Unsubscribe 🐰

Last but not least, an unsubscribe form by [Vineeth.TR](https://codepen.io/vineethtrv). It is animated and fun, and the bunny is coded in HTML+CSS... which, I must admit, is an interesting choice. Unconventional but crispy and playful.

{% codepen https://codepen.io/vineethtrv/pen/GRYjGXb %}