DEV Community

Cover image for 10 Cool CodePen Demos (December 2023)
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.Medium

10 Cool CodePen Demos (December 2023)

snow globe christmas tree

Amit Sheen live streamed the whole process on YouTube (you can still watch it on his channel) for everyone to see how to create this 3D-looking Christmas tree with HTML and CSS.


Pixelated Background

This is a neat trick by Wakana Y.K.: placing a low resolution version of the image on top, and expanding it to occupy the same size as the original makes the browser pixelate it. Then, a mask on hover (updating the position with JS) does the rest. Ingenious and effective.


Fireworks

We have showcased several of Yuan Chuan’s CSS Doodles in this newsletter. This animated one is one of my favorites. The colors, the shapes, and the movement are perfectly in sync. Making this demo magical.


Happy Holidays! 2023

Another Christmas tree and another demo by Wakana Y.K. This time the 3D is generated using ThreeJS and the tree is interactive in a different way: drag the mouse around the screen to spin the tree.


WCCChallenge : Obscure

What attracts me to this demo by Tom Hinton is how random and weird (in a good way) it looks (something relatively common in Tom’s artistic pieces. A combination of shaders and meshes in ThreeJS.


Dots & Ring Loader — CSS

This is a hypnotic loader created in HTML and CSS by Josetxu. An interesting combination of animations create this effect, with dots moving while changing size (and z-index).


Stacked Avatars with hover effect

This is a really interesting effect with single images. Temani Afif, crops the pictures as you hover over the siblings. Can you figure out how it works based on the interaction? (Hint: it involves masks and CSS variables.)


Wow Winter Blanket

Another demo with ThreeJS and shaders. This time by Anna Zenn Scavenger. It was part of a CodePen weekly challenge about opposites. Move the mouse over the blanket to see it move smoothly.


CSS scroll-driven animation timer

Another cool example of how to use CSS scroll-driven animations to show an animated timer/progress indicator. This demo is by Ryan Mulligan. And even the numbers are animated! No JS whatsoever.


Pure CSS — Courage the Cowardly Dog

Courage the Cowardly Dog was a TV show from Cartoon Network… and believe it or not, it has been over 20 years since the show. Nostalgia + CSS Art? It had to make the list. Plus it is a nice implementation by maxi83c. And it has animations!


Check the previous month demos on: https://dev.to/alvaromontoro/10-cool-codepen-demos-november-2023-jj

Top comments (13)

Collapse
 
alexgrigore profile image
Alex Grigore

The stacked profile pictures and dot & ring loading animation are super cool to me.
3D can be a little hit and miss as it massively impacts the performance of the page on a computer without any dedicated graphics.

Collapse
 
lisacee profile image
Lisa Cee

I really love the pixelated background. It's so simple and effective.

Collapse
 
alex_xu profile image
MrXujiang

very amazing!

Collapse
 
hakimio profile image
Tomas Rimkus

"CSS scroll-driven animation" demo is also Chrome only. It uses "animation-timeline: scroll()" which is Chrome only feature.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

You are correct. Firefox has it behind a flag, but it won't be live for a while there (or on Safari)

Collapse
 
ta_phpwebdev profile image
Dollar Dev

Stacked Avatars with hover effect does not work in Firefox :(

Collapse
 
alvaromontoro profile image
Alvaro Montoro

It uses @property that is not available on Firefox yet... but soon 😉

Collapse
 
hakimio profile image
Tomas Rimkus

What about "animation-timeline: scroll()" which is also Chrome only?

Collapse
 
sonu123 profile image
Sonu

Awesome 👍

Collapse
 
m__mdy__m profile image
mahdi

Cool codes

Collapse
 
abdulmuminyqn profile image
Abdulmumin yaqeen

Amazing!!

Collapse
 
flowzai profile image
Flowzai

Wow Winter Blanket interesting to me

Collapse
 
tusharus profile image
Tushar

Check me