10 Cool CodePen Demos (April 23)
A collection of 10 cool and exciting front-end demos shared on CodePen during April 2023
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.