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 (263)

Collapse
 
ellajh07 profile image
ella jhon

Security and fairness are top priorities for Bet939. The game uses secure algorithms to ensure fair play, so everyone has a real chance to win. There’s no need to worry about cheating or unfair advantages—everything is transparent and well-regulated, building trust among players.

Collapse
 
robyngknapp profile image
robyngknapp

UPVC Windows Glasgow are a perfect choice for those seeking energy efficiency and contemporary design. These windows are available in a variety of styles to suit any home, providing excellent insulation and soundproofing without compromising on appearance. perfectglazing.uk/

Collapse
 
robyngknapp profile image
robyngknapp

The David Lloyd Manchester North membership provides access to an extensive array of fitness services, including a fully equipped gym, swimming pools, and various fitness classes. The David Lloyd Manchester North membership is ideal for those looking for a high-end fitness experience in the heart of Manchester. Membership prices at this location reflect the premium services and facilities provided. Whether you're interested in group fitness classes or personal training sessions, the David Lloyd Manchester North membership offers something for everyone, with flexible pricing to suit different needs.

Collapse
 
robyngknapp profile image
robyngknapp

Scribd Downloader is a practical tool designed for users who need quick and easy access to Scribd content. Whether you're a student, professional, or casual reader, this platform allows you to download documents and e-books directly from Scribd without any hassle. By using Scribd Downloader, you can enjoy offline access to valuable resources, saving time and bypassing restrictions often associated with online platforms.

Collapse
 
robyngknapp profile image
robyngknapp

For an added layer of defense, PPF car coating from CarsBodyWraps enhances the performance of your PPF wrap. The coating helps improve the durability of the film, making it more resistant to scratches and staining while providing a glossy, sleek finish. Our PPF coatings are designed to boost the longevity of your car's protection, ensuring it looks brand new for longer. With CarsBodyWraps, your vehicle gets the ultimate in paint protection and aesthetics.

Collapse
 
robyngknapp profile image
robyngknapp

With the chatgpt apk (premium unlocked), you can experience the full power of AI without any restrictions. This version unlocks all premium features, allowing users to enjoy priority responses, extended chats, and personalized settings. It’s an excellent choice for professionals, students, and creatives who want top-tier AI assistance.

Collapse
 
robyngknapp profile image
robyngknapp

La última versión de Snaptube APK incluye mejoras de velocidad y compatibilidad con nuevas plataformas. Ideal para quienes buscan descargas sin restricciones, este APK es seguro y accesible desde fuentes confiables como apksnaptube.com.mx.

Collapse
 
ellajh07 profile image
ella jhon

In today’s fast-paced digital world, staying informed and adaptable is not just an advantage—it’s a necessity. At Wispwillow, we understand how challenging it can be to navigate the constantly shifting terrain of technology, apps, and digital marketing. That’s why we’re here—to simplify the complex and bring clarity to the chaos.

Collapse
 
robyngknapp profile image
robyngknapp

tubidymp3.io simplifies the process of finding and downloading music, making it accessible to users of all ages. With its straightforward search options and fast download speeds, the platform ensures that your music needs are met without any complications. It’s the perfect companion for anyone who values convenience and quality in their music experience.

Collapse
 
ellajh07 profile image
ella jhon

PKR App is an unofficial mobile gaming platform that hosts and distributes Android and iOS apps, with a strong focus on real-money games, casino simulations, and digital gambling. The platform provides direct downloads of games that often do not comply with app store regulations and are not vetted by official Android or Apple platforms.