10 Cool CodePen Demos (December 2023)
Tags: css, webdev, showdev, html
Published: 2024-01-03 22:00:20

---
title: 10 Cool CodePen Demos (December 2023)
published: true
description: A collection of 10 cool demos shared on CodePen during December 2023
tags: CSS,webdev,showdev,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://alvaromontoro.medium.com/10-cool-codepen-demos-december-2023-96e145c9a8f5
---

## snow globe christmas tree
[Amit Sheen](https://codepen.io/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.

{% codepen https://codepen.io/amit_sheen/pen/XWGbWGv %}

---


## Pixelated Background
This is a neat trick by [Wakana Y.K.](https://codepen.io/wakana-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.

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

---

## Fireworks
We have showcased several of [Yuan Chuan](https://codepen.io/yuanchuan)’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.

{% codepen https://codepen.io/yuanchuan/pen/QWoWByr %}

---

## Happy Holidays! 2023
Another Christmas tree and another demo by [Wakana Y.K.](https://codepen.io/wakana-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.

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

---

## WCCChallenge : Obscure
What attracts me to this demo by [Tom Hinton](https://codepen.io/TomHinton) 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.

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

---

## Dots & Ring Loader — CSS
This is a hypnotic loader created in HTML and CSS by [Josetxu](https://codepen.io/josetxu). An interesting combination of animations create this effect, with dots moving while changing size (and z-index).

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

---

## Stacked Avatars with hover effect
This is a really interesting effect with single images. [Temani Afif](https://codepen.io/t_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.)

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

---

## Wow Winter Blanket
Another demo with ThreeJS and shaders. This time by [Anna Zenn Scavenger](https://codepen.io/ScavengerFrontend). It was part of a CodePen weekly challenge about opposites. Move the mouse over the blanket to see it move smoothly.

{% codepen https://codepen.io/ScavengerFrontend/pen/mdodBJN %}

---

## 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](https://codepen.io/hexagoncircle). And even the numbers are animated! No JS whatsoever.

{% codepen https://codepen.io/hexagoncircle/pen/dyrooOq %}

---

## 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](https://codepen.io/maxi83c). And it has animations!

{% codepen https://codepen.io/maxi83c/pen/qBgLdby %}

---

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