10 Cool CodePen Demos (April 23)

#codepen #css #javascript #webdev

Procedural Japanese Style Tree

A generative art project by Rafa. 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.

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, to create patterns and random (and beautiful) combinations.

where I live

Another demo by Sophia (fractal kitty). 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.

Stained glass

This is the first of two demos by Wakana Y.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.

Colorful painting

Wakana Y.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.

3D Cards

I like this demo by Mubanga. 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.)

Copypaste Apple Keyboard

Jon Kantner 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.

Night && Day Toggle

Jhey 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.

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.

Unsubscribe 🐰

Last but not least, an unsubscribe form by Vineeth.TR. 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.