CodeNewbie Community 🌱

Cover image for 10 Cool CodePen Demos (December 2023)
Álvaro Montoro
Álvaro 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 (273)

Collapse
 
ellajh07 profile image
ella jhon

In the ever-evolving world of online gaming, finding a platform that offers both excitement and ease of use can be a game-changer. a2 game app has quickly become one of the top choices for players seeking a diverse range of casino experiences. Whether you're a fan of classic casino games, sports betting, or social games like Ludo, A2 Game offers it all with a user-friendly interface that ensures seamless gameplay.

Collapse
 
ellajh07 profile image
ella jhon

Mil Win Game Online is a real-money gaming platform that allows players to participate in a variety of games and win actual cash rewards. Unlike traditional video games that are purely for fun, Mil Win offers a dual-purpose experience — combining fun, strategy, and financial gain.

Collapse
 
annaw3 profile image
john devis

Expert Wix web design services offered by Wix Pro, based in Brisbane, Australia, are known for their exceptional quality and efficiency. They specialize in creating fully responsive websites that adapt seamlessly to any device, ensuring optimal user experience. Their services include advanced SEO tools, customizable business solutions, and powerful marketing integrations like Google Analytics and Facebook Pixel. With a quick turnaround time of just four weeks and 24/7 customer support, Wix Pro delivers top-notch web design and robust business tools to enhance your online presence​ (Olya Black )​.

Collapse
 
gittulal profile image
Gittulal

Some people love puns, others groan at them, but no one can ignore them. They sneak into everyday conversations, headlines, and even marketing slogans. Whether you find them pun-derful or pun-bearable, they always leave an impression! See our website for more laughter.

Collapse
 
ellajh07 profile image
ella jhon

Mil Win Game Online presents an exciting new frontier for digital gamers in Pakistan. Whether you’re seeking extra income, trying to enhance your gaming skills, or simply looking for a fun, rewarding hobby — this platform has a lot to offer. However, like any money-related venture, success requires strategy, patience, and discipline.

Collapse
 
robyngknapp profile image
robyngknapp

Many leaders and writers have shared profound quotes on Birsa Munda, celebrating his contribution to India’s freedom struggle and the empowerment of tribal communities. A notable quote is:
"Birsa Munda was not just a leader but a symbol of rebellion against injustice and colonial oppression."
These words highlight his pivotal role in inspiring a movement that continues to resonate in the fight for equality and rights.

Collapse
 
robyngknapp profile image
robyngknapp

The LiHO Menu is packed with an exciting variety of drinks that cater to every taste. Whether you’re in the mood for a creamy milk tea, a zesty fruit tea, or a unique cheese tea, LiHO Tea Singapore has something to offer. The customizable options ensure that every drink is tailored to your preferences.

Collapse
 
honistaapk12 profile image
honistaapk12

Obtén un correo electrónico temporal en segundos. Úsalo para registrarte en sitios web sin exponer tu dirección personal y evita el spam. Esta herramienta gratuita y segura te permite generar correos desechables de forma rápida y sencilla.

Collapse
 
annaw3 profile image
john devis

Are you ready to take your Beach Buggy Racing experience to the next level? With the Beach Buggy Racing Mod APK Free Shopping available at Racing SAPKs, you can now enjoy limitless fun with unrestricted access to in-game purchases. This modded version of Beach Buggy Racing offers players the ultimate advantage by removing all financial constraints, allowing for an exhilarating and fully customized racing adventure. Whether you’re looking to upgrade your vehicles, unlock exclusive items, or simply enhance your gameplay, this mod APK makes it all possible without spending a dime. Dive into the action-packed world of Beach Buggy Racing with all the perks you could ever want at your fingertips!

Collapse
 
gittulal profile image
Gittulal

Name your loved ones with a catchy, trending and unique names with the help of Namzigo.

Collapse
 
robyngknapp profile image
robyngknapp

The Iganony story feature enables users to watch Instagram stories anonymously. Normally, Instagram alerts users when someone views their story, but this tool ensures that your identity remains hidden. Whether you’re interested in checking a brand’s updates, following an influencer’s content, or simply browsing stories, the Iganony story tool offers a private and secure way to do so.

Collapse
 
robyngknapp profile image
robyngknapp

Seven Brew Menu frequently offers exciting deals that make their high-quality drinks even more accessible. Customers can take advantage of special promotions on popular items or seasonal beverages, allowing them to enjoy their favorites at even better prices. These deals are just another reason why Seven Brew Menu is a favorite destination for coffee and drink enthusiasts alike.