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

Collapse
 
annaw3 profile image
john devis

Bereavement may be one of the most difficult and deep journeys of life. Be it a spouse, a family member, a close friend, or a circumstance or event, grieving may bring up a variety of complex emotions and be a difficult journey to go through. grief counselling near me Asking for assistance when experiencing the many phases and feelings of bereavement may greatly you in your recovery.

Collapse
 
annaw3 profile image
john devis

Physical Bending: Leaning in? More like up bent! This intro could be for a workout video or instructional guide on a specific bending exercise that involves an upward motion. Up Bent Industrial Context: In the world of engineering, "bent up bars" are a specific type of reinforcement used in concrete slabs and beams. An intro about "Up Bent" could be a technical term focused on this application.

Collapse
 
seohirecc profile image
SEOhirecc

Arzt Pflegeheim: MyDocPlus bietet einen spezialisierten ärztlichen Service für Pflegeheime an Arzt Pflegeheim , um eine optimale Gesundheitsversorgung für Bewohner sicherzustellen. Unsere erfahrenen Ärzte bieten regelmäßige Besuche vor Ort an, um medizinische Betreuung und Beratung zu gewährleisten. Mit einem ganzheitlichen Ansatz und maßgeschneiderten Behandlungsplänen unterstützen wir die Gesundheit und das Wohlbefinden der Pflegeheimbewohner. Besuchen Sie unsere Website, um mehr zu erfahren.

Collapse
 
annaw3 profile image
john devis

Are you preparing to take the Cambridge General English exam? Feeling confident in your English skills is crucial, but so is familiarity with the test format itself. That's where Cambridge General Mock Tests come in!

These practice tests, designed to mirror the real exam experience, provide an invaluable tool for exam candidates. They'll help you:

Simulate the Test Environment: Get comfortable with the timing, question types, and overall structure of the Cambridge General exam Cambridge General Mock Tests Sharpen Your Skills: Test your reading, writing, listening, and speaking abilities in a realistic setting.

Collapse
 
annaw3 profile image
john devis

Rest assured with Mega Control Security Services - where security is not just promised but guaranteed, ensuring a shielded environment for your peace of mind. user generated Experience the pinnacle of security with Mega Control—your assurance of high-quality services that prioritize excellence and deliver unmatched protection.

Collapse
 
annaw3 profile image
john devis

Welcome to our surf school! Meet Edy, our head instructor. He is super passionate about surfing and has been doing it for more than 10 years. Edy's love for surfing started when he was young. surf lessons He loved how it made him feel healthy and happy. He also enjoyed helping people learn to surf and making new friends at the beach. Whether you're new to surfing or really good at it, our surf school is open to everyone. Come join us for some awesome surf lessons with Edy. It's all about having fun in the waves and making new friends!

Collapse
 
annaw3 profile image
john devis

Explore the top trends shaping the global tech landscape. Global technology trends Discover how technology is revolutionizing industries, driving innovation, and impacting societies on a global scale.

Collapse
 
annaw3 profile image
john devis

You have several options to choose from depending on your budget and preferences. A home theater can be as high-end as you’d expect from Hollywood’s A-list film directors or as affordable as a spare bedroom while being incredibly impressive. Home Theatre Kit Your home theater becomes an investment in happiness when you consider all the connectivity options available (such as how you can easily stream content or turn every room into a music room). If you’re planning a home theater setup, here is what you must consider.

Collapse
 
annaw3 profile image
john devis

From band tees to birthday surprises, the humble T-shirt has become a canvas for self-expression and creativity. And the magic behind those personalized designs? T-shirt printing! This versatile process allows you to transform a plain T-shirt into a walking billboard for your favorite cause, a funny slogan, or a cherished memory. Whether you're a business owner crafting promotional shirts or an individual looking for a unique gift, this guide will explore the world of T-shirt printing. We'll delve into the different printing techniques, from classic screen printing to cutting-edge digital methods, helping you choose the perfect option for your needs.

Collapse
 
annaw3 profile image
john devis

Searching for a skilled chiropractor in the bustling metropolis of New York City? Back pain, neck aches, or limited mobility can significantly impact your daily life. Best Chiropractor in New York City Finding the right chiropractor can play a crucial role in addressing these issues and promoting overall well-being.

Collapse
 
annaw3 profile image
john devis

Italy, a cradle of artistic brilliance, offers a treasure trove of masterpieces that transcend mere decoration. The Finest Italian Art on The Finest Interiors Adorning your walls with fine Italian art elevates your interior design to an extraordinary level, reflecting not just your taste but also your appreciation for cultural heritage and timeless beauty.

Collapse
 
annaw3 profile image
john devis

Earning money involves various avenues, both online and offline. Here's a breakdown of some common approaches:

Traditional methods:

Employment: This is the most common way to earn money. Look for job opportunities that align with your skills and interests.
Self-employment: Start your own business and become your own boss. This requires dedication, planning, and potentially initial investment.

Collapse
 
annaw3 profile image
john devis

The term "audio installation" can encompass a wide range of things, from simple sound systems in homes and businesses to complex, immersive art installations. To give you a better understanding, I'll break it down into a few different categories:

Collapse
 
annaw3 profile image
john devis

The rhythmic whir of a spinning reel, the satisfying arc of a cast, and the thrill of a fish tugging at the line – spinning fishing is an art form enjoyed by millions. But like any art form, the right tools are essential for success. Best Spinning Rods And when it comes to spinning fishing, the spinning rod takes center stage.

Collapse
 
annaw3 profile image
john devis

Maintaining your Toyota RAV4 requires regular oil changes, a crucial element in ensuring smooth operation and longevity. But before you grab that oil jug, it's vital to understand your RAV4's specific oil capacity. ravguide.com This seemingly simple question holds significant weight, as using the wrong amount of oil can lead to detrimental consequences for your vehicle.