Loading . . .

Create 3D Cubes Spin into New Year using HTML, CSS & JavaScript

Create a Mental Wellness Partner Website using HTML, CSS & JavaScript

Create a Mesmerizing Marquee Text using HTML & CSS

Create a QR Code Login Template using HTML, CSS & JavaScript

Create a Stunning Matrix Like Rain Effect using HTML, CSS & JavaScript

Create Spectacular Diwali Animation using HTML, CSS & JavaScript

Create a Trippy Loader using HTML & CSS

Create Super Smooth Gradient Animation using HTML, CSS & JavaScript

Create a Whimsical Snow Ball Loader using HTML & CSS

Create a Minimalist Web Developer Portfolio using HTML, CSS & JavaScript

Create a Dizzying Text Spirals using HTML, CSS & JavaScript

Create an Advertisement Brand Website using HTML & CSS

Create a Bouncing Responsive Menu using HTML & CSS

Create Barrel Effect using HTML, CSS & JavaScript

Create Dazzling Neon Loops & Orbs using HTML & CSS

Create Incredible 3d Cube Animation using HTML & CSS

Create Sublime Shiva Animation using HTML & CSS

Create Hypnotic and Colourful Magical Rings using HTML & CSS

Create a 3d Spinning Rings Animation using HTML & CSS

Create a Beautiful Background Animation using HTML & CSS

Create a 7 Segment Neon Digital Clock using HTML, CSS & JavaScript

Create a Satisfying Abacus Clock using HTML, CSS & JavaScript

Create a 3d Loading Text Animation using HTML & CSS

Create a 3d Effect Loading Spinner using HTML & CSS

Create a Fireworks Typing Effect using HTML, CSS & JavaScript

Create Hypnotic Ellipses and Springs using HTML & CSS

Create a Visual Symphony using HTML & CSS

Create a Glowing Blue Tinted Button using HTML & CSS

Create a Modern Team Page using HTML & CSS

Create Animated Rings Login Form using HTML & CSS

Create Bubble Adventure using HTML, CSS & JavaScript

Spectral Spin Circles using HTML & CSS

3D Room 404 Errorverse using HTML & CSS

Team Spotlight using HTML & CSS

Fireflower Fiery Flourish using HTML & CSS

Luxury Tourism Website using HTML & CSS

Company Website Template using HTML & CSS

Nature's Nest Soap using HTML & CSS

Pawfect Wellness using HTML & CSS

Account Creation Hub using HTML & CSS

Accelerate Login Form using HTML & CSS

Valentine Art Love Pixels using HTML, CSS & JavaScript

Animated Valentine's Delight using HTML & CSS

A Tapestry of Eternal Love using HTML & CSS

Gleaming Moments Wedding Invitation using HTML & CSS

Elevate your Login Experience using HTML & CSS

Snowy New Year Celebration using HTML, CSS & JavaScript

Frosty Interactive Christmas Delight using HTML, CSS & JavaScript

Quest Search Page Template using HTML, CSS & JavaScript

Creative Button Artistry using HTML, CSS & JavaScript

Elevate Search Horizon Template using HTML, CSS & JavaScript

Joyful Cake & Balloon Animation using HTML, CSS & JavaScript

Explore Search Page Template using HTML, CSS & JavaScript

Minimal Search Page Template using HTML & CSS

Soothing Gradient Elegance using HTML & CSS

Interactive Profile Card using HTML & CSS

Chic Navbar Navigation using HTML & CSS

Search Page Template using HTML, CSS & JavaScript

Evolving Abstract Art using HTML, CSS & JavaScript

Happy Diya-Lit Diwali using HTML & CSS

Interactive Text Split Effect using HTML & CSS

Artistic Triangle Symphony using HTML & CSS

Button Burst Visual Delight using HTML, CSS & JavaScript

Elegance Animated Typing using HTML, CSS & JavaScript

Journey of Lord Rama using HTML, CSS & JavaScript

Divine Goddesses Gallery using HTML, CSS & JavaScript

Morphing Transition Menu using HTML & CSS

Sticky Smooth Slider Nav using HTML, CSS & JavaScript

Dazzling Neon Typography using HTML & CSS

Glowing Backlight Effect using HTML & CSS

Order Process Steps using HTML & CSS

Text with Gradient Border using HTML & CSS

Login Signup Form Transition using HTML, CSS & JavaScript

A Flower Shower of Blessings using HTML, CSS & JavaScript

Water Waves using HTML, CSS & JavaScript

Flying Origami Bird using HTML & CSS

Glowing Meteor using HTML & CSS

Crafting a World Beyond The Sky using HTML & CSS

Floral Tribute to Flag using HTML, CSS & JavaScript

Tri Hexa Loader using HTML & CSS

Zephyr the Husky using HTML & CSS

Sculpting Shivling Typography using HTML & CSS

Multiple Parallax Effect using HTML, CSS & JavaScript

Scroll Micro Animation using HTML & CSS

Shrink Expand Menu using HTML & CSS

Slideshow Ken Burns Effect using HTML & CSS

Sleek Hamburger Fold Out using HTML & CSS

3d Card using HTML & CSS

Yoga Pose using HTML & CSS

Father's Day Wish Card using HTML, CSS & JavaScript

Flip Opening Modal Button using HTML, CSS & JavaScript

Multiple Scroll Button using HTML & CSS

Glass Keyboard using HTML & CSS

Animated Vertical Tabs using HTML, CSS & JavaScript

Full Page Parallax Scroll Effect using HTML, CSS & JavaScript

Social Buttons using HTML & CSS

Image Accordion using HTML, CSS & JavaScript

Blog Cards using HTML & CSS

Accordions using HTML & CSS

Flowers on Cake using HTML & CSS

Wedding Invitation with Timer using HTML, CSS & JavaScript

Wedding Invitation using HTML & CSS

Couple Name Text Animation using HTML & CSS

Minimal Toggles using HTML & CSS

Revolving Mesmerizing Semi Circles using HTML & CSS

Day Night Toggle using HTML & CSS

Particles Form Neon Hexagons using HTML, CSS & JavaScript

Elastic Text using HTML & CSS

Custom Checkboxes using HTML & CSS

Tic Tac Toe Game using HTML & CSS

3d Text Animation using HTML & CSS

Hamburger Animation using HTML, CSS and JavaScript

Balkan Style Image Gallery using HTML, CSS and JavaScript

Minimalist Loading Page using HTML and CSS

Glitch Clock using HTML, CSS and JavaScript

Digital Clock using HTML, CSS and JavaScript

Round Blob Music Visualizer using HTML, CSS and JavaScript

Cursor Splashing Colours using HTML, CSS and JavaScript

Music Player Visualizer using HTML, CSS and JavaScript

Adjustable Audio Waveform using HTML, CSS and JavaScript

Random Sound Bars using HTML and CSS

Jiggle Wiggle Waveform using HTML and CSS

Heart Eyes using HTML and CSS

Popping Hearts using HTML, CSS and JavaScript

Chaotic Lines Heart using HTML, CSS and JavaScript

Envelope with Letter using HTML & CSS

Moving Particles Animation using HTML, CSS and JavaScript

Interactive Text Masking using HTML, CSS and Javascript

Tri-Colour Flying Balloons using HTML, CSS & JavaScript

Responsive Tabs using HTML & CSS

Mouse Following Box using HTML, CSS & JavaScript

Circular Menu using HTML, CSS & JavaScript

Kite & Cloud Flying Animation using HTML & CSS

Mars Landing using HTML & CSS

Custom Animation Inputs using HTML & CSS

New Year with Snow Falling using HTML, CSS & JavaScript

Skewed 3d Navbar Menu using HTML & CSS

Christmas Animations using HTML & CSS

Sliding Menu using HTML, CSS & JavaScript

Navbar Menu using HTML, CSS & JavaScript

Text Revealing on Hover using HTML & CSS

MacBook revolves in Air using HTML & CSS

Confetti follows the curser using HTML, CSS & JavaScript

Circular Form using HTML, CSS & JavaScript

Rotating Rings Around Text using HTML & CSS

Seconds Counter using HTML, CSS & JavaScript

Baby Animation using HTML & CSS

Simple Loading Page using HTML & CSS

Typewriter using HTML & CSS

Rolling Cube 404 Page using HTML & CSS

Neon Light 404 Page using HTML & CSS

Bookshelf 404 Page using HTML & CSS

Scary 404 Page using HTML & CSS

Diwali Diya & Firework Animation using HTML, CSS & JavaScript

Blinking 404 Page using HTML & CSS

Burger 404 Page using HTML & CSS

Terminal Style 404 Page using HTML & CSS

Image Gallery using HTML, CSS & JavaScript

Gandhi & Shastri Jayanti Wish using HTML & CSS

Happy Navaratri Wish using HTML, CSS & JavaScript

Vertical Image Carousel #4 using HTML, CSS & JavaScript

Vertical Image Carousel #3 using HTML, CSS & JavaScript

Vertical Image Carousel #2 using HTML & CSS

Vertical Image Carousel #1 using HTML & CSS

Horizontal Image Carousel #11 using HTML, CSS & JavaScript

Teachers Day Wish Chat Animation using HTML, CSS & JavaScript

SVG Drawing & BG Animation & using HTML, CSS & JavaScript

Horizontal Image Carousel #10 using HTML, CSS & JavaScript

Horizontal Image Carousel #9 using HTML & CSS

Flag Hosting with Flying Flag using HTML, CSS & JavaScript

Horizontal Image Carousel #8 using HTML & CSS

Greeting follows Mouse Movement using HTML, CSS & JavaScript

Horizontal Image Carousel #7 using HTML & CSS

Horizontal Image Carousel #6 using HTML & CSS

Horizontal Image Carousel #5 using HTML & CSS

Horizontal Image Carousel #4 using HTML & CSS

Horizontal Image Carousel #3 using HTML & CSS

Horizontal Image Carousel #2 using HTML & CSS

Horizontal Image Carousel #1 using HTML, CSS & JavaScript

Image Popup on Hover using HTML & CSS

Infinite Pencil Loader using HTML & CSS

Lappy - A Laptop using HTML & CSS

Eco Theme Button Popup using HTML & CSS

Buttons with Gradient Animation using HTML & CSS

Gradient Buttons Animation on Hover using HTML & CSS

Father's Day Wish using HTML & CSS

Modal Popup on Button Click using HTML & CSS

Button Glow Animation on Hover using HTML & CSS

Button Shines Animation on Hover using HTML & CSS

Jumping Text Animation with Reflection using HTML & CSS

CyberPunk Inspired 404 Page using HTML & CSS

Jumping Letters Animation using HTML & CSS

Holi Wishes using HTML & CSS

Rotating Border Animation using HTML & CSS

Women Typography using HTML & CSS

Sliced Text Animation Using HTML & CSS

Text Shadow Animation using HTML & CSS

Create Fading Hearts Animation using HTML, CSS & JavaScript

Create Tetris Heart Animation using HTML & CSS

Create the Flying Indian Flag Animation using HTML & CSS

Create Makar Sankranti Wishes using HTML, CSS & JavaScript

Create New Year Wishes using HTML & CSS

Create Merry Christmas Wishes using HTML, CSS & JavaScript

Create Ganesh Chaturthi Wishes using HTML & CSS

Create the Indian Flag using HTML & CSS

Create a Password Generator using HTML, CSS & JavaScript

Create a Custom Alert Box using HTML, CSS & JavaScript

Disclaimer: Educational Purposes Only

The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.

The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.

Create Merry Christmas Wishes using HTML, CSS & JavaScript

Below is the html code for this video.

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Merry Christmas</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- title block starts here -->

    <div class="wrap">
        <div class="headline-wrap">
            <span class="headline-overlay">
                Merry Christmas
            </span>
            <h1 class="headline-main">
                Merry Christmas
            </h1>
        </div>
    </div>

    <!-- title block ends here -->
    <!-- text block starts here -->

    <div class="opaque opaque-1">
        I know it's been an incredibly challenging year. Wishing you and your family brighter days ahead.
    </div>
    <div class="opaque opaque-2">
        Santa told me you've been very good this year...I told him it was just a lack of opportunity.
    </div>
    <div class="opaque opaque-3">
        Don't worry, this greeting has been <em>SANTA-tized!</em>
    </div>

    <!-- text block ends here -->
    <!-- santa block starts here -->

    <div class="window">
        <div class="santa">
            <div class="head">
                <div class="face">
                    <div class="redhat">
                        <div class="whitepart"></div>
                        <div class="redpart"></div>
                        <div class="hatball"></div>
                    </div>
                    <div class="eyes"></div>
                    <div class="beard">
                        <div class="nose"></div>
                        <div class="mouth"></div>
                    </div>
                </div>
                <div class="ears"></div>
            </div>
            <div class="body"></div>
        </div>
    </div>

    <!-- santa block ends here -->
    <!-- snowman block starts here -->

    <div class="snowman">
        <div class="body">
            <div class="head"></div>
            <div class="hat"></div>
            <div class="scarf"></div>
            <div class="buttons"></div>
            <div class="hands">
                <div class="right-hand"></div>
                <div class="left-hand"></div>
            </div>
            <div class="shadow"></div>
        </div>
    </div>

    <!-- snowman block ends here -->
    <!-- xmas tree block starts here -->

    <div class="xmas-tree">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 230">
            <path class="top" style="--no: 1"
                d="m84.4 7.39 1.85 2.81 3.1 1.33-2.1 2.64-.3 3.36-3.16-1.18-3.29.75.15-3.37-1.73-2.9 3.25-.9z" />
            <path style="--no: 2"
                d="m84.67 34.46-1.03-1.67-1.95-.1 1.27-1.48-.51-1.89 1.8.75L85.9 29l-.15 1.95 1.52 1.22-1.9.46z" />
            <path style="--no: 3"
                d="m84.48 44.88-2.79-1.53-2.84 1.42.6-3.12-2.24-2.27 3.16-.4 1.46-2.82 1.36 2.88 3.14.52L84 41.73z" />
            <path style="--no: 4"
                d="m90.24 45.43-1.46-.36-1.13 1-.1-1.5-1.3-.76 1.39-.57.32-1.48.97 1.16 1.5-.15-.79 1.28z" />
            <path style="--no: 5"
                d="m80.37 49.82-1.09-.41-.95.66.06-1.16-.93-.7 1.12-.31.39-1.1.63.98 1.16.03-.72.9z" />
            <path style="--no: 6" d="m75.25 53.39-.84-.6-.97.35.3-.99-.62-.81 1.03-.01.58-.85.32.98 1 .28-.84.62z" />
            <path style="--no: 7"
                d="m84.85 57.69-2.11-1.54-2.46.87.8-2.48-1.58-2.07h2.6l1.48-2.15.8 2.48 2.51.75-2.1 1.53z" />
            <path style="--no: 8"
                d="m94.09 54.3-1.93-.88-1.81 1.09.24-2.1-1.6-1.4 2.08-.41.83-1.95 1.04 1.84 2.1.2-1.43 1.55z" />
            <path style="--no: 9"
                d="m72.5 60.61.5-1.87-1.26-1.47 1.94-.1 1-1.66.7 1.81 1.89.45-1.5 1.22.15 1.93-1.63-1.05z" />
            <path style="--no: 10"
                d="m82.2 63.9-1.47-.5-1.24.93.02-1.54-1.26-.9 1.48-.45.46-1.48.89 1.26 1.54-.02-.92 1.24z" />
            <path style="--no:  11" d="m86.5 63.08-.7-.46-.8.31.23-.81-.54-.65.84-.03.45-.72.3.8.82.2-.66.52z" />
            <path style="--no: 12"
                d="m94.09 63.72-1.85-.85-1.74 1.04.24-2.02-1.53-1.34 2-.4.8-1.86.99 1.77 2.02.2-1.38 1.48z" />
            <path style="--no: 13"
                d="M100.3 62.17 98.92 62 98 63.04l-.27-1.37-1.28-.56 1.22-.67.14-1.39 1.02.95 1.36-.3-.6 1.27z" />
            <path style="--no: 14"
                d="m77.53 68.48-.8-.82-1.14.2.53-1.02-.55-1.02 1.14.19.8-.83.17 1.14 1.04.5-1.03.52z" />
            <path style="--no: 15"
                d="m71.77 71.77-2.28-1.04L67.34 72l.3-2.49-1.9-1.65 2.46-.49.99-2.3 1.23 2.18 2.5.23-1.7 1.84z" />
            <path style="--no: 16" d="m77.07 73.14-.54-.4-.64.2.22-.64-.4-.54.68.01.4-.55.2.65.64.2-.56.4z" />
            <path style="--no: 17"
                d="m86.13 75.43-2-1.32-2.22.9.63-2.3-1.55-1.83 2.4-.12 1.26-2.03.85 2.24 2.32.57-1.87 1.5z" />
            <path style="--no: 18" d="m92.35 70.67-.76-.3-.68.45.05-.81-.64-.5.8-.2.28-.78.43.7.82.03-.52.63z" />
            <path style="--no: 19" d="m92.53 75.43-.46-.11-.35.31-.04-.47-.41-.24.44-.18.1-.46.3.36.48-.05-.25.4z" />
            <path style="--no:  20"
                d="m99.02 72.32-1.46.18-.69 1.31-.62-1.34-1.46-.24 1.08-1-.22-1.47 1.3.72 1.32-.67-.29 1.46z" />
            <path style="--no: 21"
                d="m104.05 70.95-.01 1.19.97.69-1.14.35-.35 1.14-.69-.97-1.2.01.72-.95-.38-1.13 1.13.38z" />
            <path style="--no: 22" d="m88.96 78.26-.33-.21-.38.1.1-.39-.2-.33.39-.02.25-.3.14.37.37.14-.31.25z" />
            <path style="--no: 23" d="m84.85 80.92-.95-.55-.99.47.23-1.07-.75-.8 1.09-.11.52-.96.45 1 1.07.2-.81.73z" />
            <path style="--no: 24"
                d="m78.17 83.48-1.78-1.43-2.19.67.8-2.14-1.3-1.87 2.28.1L77.35 77l.61 2.2 2.16.75-1.9 1.25z" />
            <path style="--no: 25" d="m69.76 82.1-.8-.08-.6.54-.16-.79-.7-.4.7-.4.17-.78.6.53.79-.08-.33.73z" />
            <path style="--no: 26"
                d="m63.72 85.4-1.51-1.02-1.7.68.5-1.76-1.17-1.4 1.82-.07.98-1.54.63 1.7 1.77.46-1.44 1.13z" />
            <path style="--no: 27" d="m68.84 86.5-.78.04-.4.68-.3-.73-.77-.18.6-.5-.06-.79.66.42.73-.3-.2.76z" />
            <path style="--no: 28"
                d="m74.15 86.68-1.28-.25-.93.9-.15-1.29-1.15-.6 1.18-.55.21-1.28.89.96 1.28-.2-.63 1.14z" />
            <path style="--no: 29" d="m79.82 88.6-.97-.39-.94.46.06-1.04-.72-.76 1.01-.25.5-.93.55.89 1.03.18-.67.8z" />
            <path style="--no:  30"
                d="M86.59 88.69 85.2 87.4l-1.84.4.8-1.7-.96-1.63 1.87.23 1.25-1.41.36 1.85 1.72.75-1.64.91z" />
            <path style="--no: 31" d="m93.54 85.3-.87.03-.56.66-.3-.81-.8-.33.69-.54.06-.86.72.49.84-.2-.24.83z" />
            <path style="--no: 32" d="m98.02 87.5-.84.08-.42.74-.33-.78-.83-.17.63-.56-.1-.84.73.44.77-.36-.19.83z" />
            <path style="--no: 33"
                d="m106.07 87.77-2.01-.63-1.66 1.3-.02-2.11-1.74-1.18 2-.67.58-2.02 1.25 1.7 2.1-.08-1.22 1.72z" />
            <path style="--no: 34" d="m110.63 87.43-.58-.07-.44.39-.12-.58-.5-.3.51-.29.13-.57.44.4.58-.05-.25.53z" />
            <path style="--no: 35" d="m99.85 90.98-.57-.15-.48.31-.04-.58-.45-.37.55-.2.2-.55.37.45.58.03-.31.5z" />
            <path style="--no: 36"
                d="m94.63 94.27-1.77-.6-1.64.9.02-1.87-1.37-1.27 1.79-.56.79-1.7 1.08 1.53 1.86.22-1.12 1.5z" />
            <path style="--no: 37"
                d="m86.5 97.74-1.97-1.17-2.2.68.51-2.24-1.32-1.87 2.28-.21 1.38-1.83.9 2.1 2.17.74-1.72 1.51z" />
            <path style="--no: 38" d="m79.27 96.28-.63-.38-.7.2.16-.71-.41-.6.73-.07.45-.58.28.68.7.24-.56.48z" />
            <path style="--no: 39"
                d="m75.7 96.92-1.33.16-.78 1.1-.56-1.22-1.29-.4.99-.91-.02-1.35 1.18.66 1.27-.43-.26 1.31z" />
            <path style="--no:  40" d="m71.77 100.3-.36.08-.2.32-.18-.32-.36-.08.25-.28-.03-.37.33.15.35-.14-.05.37z" />
            <path style="--no: 41"
                d="m67.38 102.04-1.68-1.26-2.07.4.68-2-1.02-1.85 2.1.04 1.45-1.54.62 2.01 1.9.9-1.72 1.21z" />
            <path style="--no: 42"
                d="m61.16 100.85-1.92.1-1.22 1.48-.68-1.8-1.78-.7 1.5-1.2.11-1.92 1.6 1.06 1.86-.49-.5 1.85z" />
            <path style="--no: 43" d="m54.64 103.5-.97-.26-.83.55-.06-1-.77-.63.93-.36.36-.93.63.77 1 .06-.55.84z" />
            <path style="--no: 44"
                d="M64.09 105.8h-1.36l-.95.97-.43-1.28-1.22-.6 1.1-.82.2-1.34 1.1.79 1.34-.23-.4 1.3z" />
            <path style="--no: 45" d="m68.75 105.24-.47.02-.32.34-.16-.44-.42-.2.37-.29.06-.47.39.27.46-.09-.13.45z" />
            <path style="--no: 46"
                d="m75.15 106.52-1.48-.52-1.42.67.04-1.57-1.08-1.14 1.5-.44.76-1.38.9 1.29 1.54.29-.96 1.24z" />
            <path style="--no: 47"
                d="m85.12 106.25-2.34.41-1.36 1.95-1.12-2.1-2.27-.7 1.65-1.71-.04-2.38 2.14 1.05 2.25-.77-.33 2.35z" />
            <path style="--no: 48"
                d="m90.34 105.8-1.3-.23-1.08.75-.19-1.3-1.05-.8 1.18-.58.43-1.24.92.94 1.32.02-.62 1.17z" />
            <path style="--no: 49" d="M92.07 108.35h-.34l-.23.25-.11-.32-.3-.15.27-.2.05-.34.27.2.34-.06-.1.32z" />
            <path style="--no:  50"
                d="m98.48 105.43-1.85.44-.98 1.62-1-1.61-1.84-.44 1.22-1.45-.15-1.89 1.76.72 1.75-.72-.15 1.89z" />
            <path style="--no: 51"
                d="m108.17 105.97-2.37.83-.66 2.42-1.52-1.99-2.5.12 1.43-2.06-.9-2.35 2.4.72 1.96-1.57.06 2.51z" />
            <path style="--no: 52"
                d="m115.03 105.43-1.59.08-1.06 1.18-.57-1.48-1.45-.64 1.23-1 .17-1.59 1.33.87 1.55-.33-.4 1.53z" />
            <path style="--no: 53" d="m117.77 103.96-.25-.18-.3.04.1-.3-.15-.28h.32l.22-.21.1.3.27.14-.25.18z" />
            <path style="--no: 54" d="m110 108.54-.37-.05-.3.23-.07-.37-.3-.2.32-.19.1-.36.28.26.37-.01-.16.33z" />
            <path style="--no: 55" d="m103.41 111.37-.29-.03-.22.19-.06-.29-.25-.15.25-.15.07-.28.22.2.3-.03-.12.27z" />
            <path style="--no: 56"
                d="m100.49 111.92-2.07.88-.44 2.21-1.49-1.7-2.23.27 1.15-1.94-.94-2.04 2.2.5 1.65-1.53.2 2.25z" />
            <path style="--no: 57" d="m90.8 112.47-.45-.28-.5.12.12-.5-.27-.45.52-.04.34-.4.2.5.48.2-.4.33z" />
            <path style="--no: 58" d="m91.98 115.67-.47.01-.32.34-.16-.44-.42-.2.37-.28.06-.47.39.26.46-.08-.13.45z" />
            <path style="--no: 59"
                d="m88.14 116.3-2.8.1-1.5 2.36-.96-2.63-2.7-.7 2.2-1.73-.17-2.8 2.32 1.58 2.6-1.02-.77 2.69z" />
            <path style="--no:  60" d="m79.73 118.23-.3-.03-.22.19-.06-.29-.25-.15.25-.15.08-.28.21.19.3-.02-.12.27z" />
            <path style="--no: 61"
                d="m76.9 115.49-1.12.07-.57.96-.42-1.03-1.09-.25.86-.71-.1-1.12.94.6 1.03-.45-.28 1.09z" />
            <path style="--no: 62" d="m74.97 120.33-.43-.14-.4.2v-.46l-.32-.32.44-.14.2-.4.27.37.45.08-.27.36z" />
            <path style="--no: 63"
                d="m69.21 121.8-1.76-2.05-2.68.29 1.4-2.3-1.1-2.47 2.63.63 2-1.8.22 2.68 2.33 1.34-2.48 1.04z" />
            <path style="--no: 64" d="m65 122.34-.25.16-.06.28-.22-.19-.3.02.12-.27-.11-.26.29.02.22-.19.06.28z" />
            <path style="--no: 65" d="m61.9 117.13-.63-.03-.38.5-.16-.6-.6-.21.53-.34.01-.63.49.4.6-.19-.22.59z" />
            <path style="--no: 66"
                d="m61.62 122.16-1.17-.03-.69.94-.33-1.12-1.1-.36.96-.66v-1.17l.93.71 1.1-.36-.38 1.1z" />
            <path style="--no: 67"
                d="m54.67 123.44-1.51-.57-1.48.66.08-1.61-1.09-1.2 1.56-.43.8-1.4.9 1.35 1.58.33-1.01 1.26z" />
            <path style="--no: 68"
                d="m44.43 126.92-1.25-1.56-1.98.14 1.1-1.66-.75-1.84 1.92.53 1.52-1.28.09 1.98 1.69 1.06-1.87.7z" />
            <path style="--no: 69" d="m50.1 127.28-.87-.25-.7.58-.03-.9-.76-.49.85-.3.22-.88.56.7.9-.05-.5.75z" />
            <path style="--no:  70"
                d="m57.69 128.84-1.52-.06-.92 1.21-.4-1.46-1.45-.5 1.27-.84.02-1.52 1.2.94 1.45-.44-.53 1.42z" />
            <path style="--no: 71" d="m60.52 130.03-.27-.11-.27.12.02-.3-.19-.21.28-.08.15-.25.16.25.28.06-.19.23z" />
            <path style="--no: 72"
                d="m66.37 129.39-2.08-.67-1.73 1.35-.02-2.2-1.81-1.22 2.08-.7.6-2.1 1.3 1.77 2.2-.07-1.28 1.78z" />
            <path style="--no: 73"
                d="m68.3 130.76.6-1.52-.9-1.36 1.62.1 1.02-1.27.4 1.58 1.53.57-1.38.87-.07 1.63-1.25-1.04z" />
            <path style="--no: 74" d="m75.7 127.28-.7-.19-.56.47-.04-.73-.62-.39.69-.25.17-.71.46.57.73-.05-.4.6z" />
            <path style="--no: 75" d="m76.25 132.13-.43-.06-.3.33-.08-.43-.4-.18.39-.2.04-.44.32.3.43-.1-.19.4z" />
            <path style="--no: 76"
                d="m86.4 132.31-3.17-.8-2.46 2.16-.22-3.27-2.81-1.67 3.04-1.22.72-3.2 2.1 2.52 3.26-.3-1.75 2.78z" />
            <path style="--no: 77" d="m89.42 132.22.07-.66-.4-.52.64-.13.37-.55.32.57.64.18-.44.49.03.66-.6-.27z" />
            <path style="--no: 78"
                d="m93.35 127.37-1.33-.22-.93.97-.2-1.33-1.21-.6 1.2-.6.2-1.33.94.96 1.33-.23-.63 1.2z" />
            <path style="--no: 79" d="m95.73 131.49-.44.06-.26.36-.2-.4-.42-.14.32-.3v-.45l.4.2.42-.13-.07.44z" />
            <path style="--no:  80"
                d="m104.24 129.75-2.05.44-1.15 1.76-1.05-1.81-2.02-.54 1.4-1.57-.11-2.09 1.91.85 1.96-.75-.21 2.08z" />
            <path style="--no: 81"
                d="m110.46 131.12-1.33-.08-.83 1.04-.33-1.3-1.25-.45 1.13-.71.05-1.34 1.03.86 1.28-.36-.5 1.23z" />
            <path style="--no: 82" d="m111.46 126.46-.45-.4-.6.03.24-.56-.22-.56.6.06.47-.39.13.6.51.33-.52.3z" />
            <path style="--no: 83"
                d="m120.6 130.03-2.54-.37-1.75 1.9-.44-2.54-2.34-1.08 2.28-1.2.3-2.56 1.85 1.8 2.52-.51-1.13 2.3z" />
            <path style="--no: 84"
                d="m128.04 128.27-1.5-.13-.96 1.17-.34-1.47-1.4-.54 1.28-.78.09-1.5 1.14.98 1.46-.39-.59 1.4z" />
            <path style="--no: 85" d="m113.02 134.42-.3-.87-.88-.25.74-.55-.04-.92.75.53.86-.32-.27.88.57.72-.92.01z" />
            <path style="--no: 86"
                d="m107.26 137.8-1.85-.99-1.85.96.37-2.06-1.49-1.47 2.07-.28.94-1.87.91 1.88 2.07.32-1.51 1.45z" />
            <path style="--no: 87"
                d="m97.38 140.73-1.9-.56-1.53 1.25-.06-1.97-1.67-1.07 1.87-.67.5-1.91 1.21 1.56 1.97-.11-1.1 1.63z" />
            <path style="--no: 88" d="m89.7 140.36-.3-.05-.22.21-.04-.3-.27-.14.28-.13.05-.3.2.22.3-.05-.14.27z" />
            <path style="--no: 89"
                d="m88.6 144.3-4.73.43-2.32 4.14-1.88-4.36-4.65-.92 3.56-3.14-.55-4.71 4.08 2.42 4.31-1.98-1.04 4.63z" />
            <path style="--no:  90"
                d="m71.77 142.28-1.03.51-.17 1.14-.8-.82-1.14.2.53-1.03-.53-1.02 1.13.2.81-.83.17 1.14z" />
            <path style="--no: 91"
                d="m76.25 148.96-1.93.48-.7 1.86-1.05-1.69-1.99-.09 1.28-1.52-.53-1.92 1.85.75 1.66-1.1-.14 1.99z" />
            <path style="--no: 92" d="m67.65 149.78-.65-.08-.44.49-.12-.65-.6-.27.58-.31.07-.66.48.46.64-.14-.28.6z" />
            <path style="--no: 93"
                d="m62.26 151.15-2.35-2.29-3.22.64 1.45-2.95-1.6-2.87 3.25.48 2.23-2.41.56 3.24 2.98 1.37-2.91 1.53z" />
            <path style="--no: 94" d="m56.04 152.43-.33.03-.16.28-.12-.3-.32-.07.24-.21-.03-.33.28.18.3-.14-.08.32z" />
            <path style="--no: 95"
                d="M53.39 147.68h-1.22l-.7 1-.37-1.17-1.17-.35.99-.72-.03-1.22.99.73 1.15-.4-.38 1.15z" />
            <path style="--no: 96" d="m51.2 152.43-.39.06-.17.34-.17-.35-.38-.05.28-.27-.06-.38.34.18.34-.17-.07.37z" />
            <path style="--no: 97"
                d="m40.22 154.26 1.1-3.39-2.16-2.83h3.56l2.02-2.93 1.1 3.4 3.42 1-2.89 2.1.1 3.57-2.89-2.1z" />
            <path style="--no: 98"
                d="m32.08 152.07.89 1.12 1.43-.1-.8 1.19.54 1.32-1.38-.38-1.09.92-.06-1.43-1.22-.75 1.34-.5z" />
            <path style="--no: 99" d="m26.77 157.46-.1-.9-.8-.42.82-.37.16-.9.61.67.9-.12-.45.78.4.81-.89-.17z" />
            <path style="--no:  100" d="m38.02 158.1-.73-.65-.95.23.4-.9-.52-.84.98.1.64-.74.2.96.9.37-.84.5z" />
            <path style="--no: 101" d="m33.45 160.12-.46-.39-.57.17.22-.56-.33-.5.6.04.36-.47.15.58.56.2-.5.33z" />
            <path style="--no: 102"
                d="m45.89 161.12-1.98-.17-1.1 1.66-.44-1.94-1.92-.52 1.7-1.03-.09-1.98 1.5 1.3 1.86-.7-.78 1.83z" />
            <path style="--no: 103" d="m50.83 157.46-.87.3-.25.88-.55-.74-.92.04.53-.75-.32-.86.88.27.72-.57.01.92z" />
            <path style="--no: 104"
                d="m57.5 162.59-1.83-2.43-3.15.14 1.75-2.5-1.1-2.95 2.9.89 2.47-1.96.05 3.03 2.63 1.75-2.87.99z" />
            <path style="--no: 105"
                d="M64.91 162.22h-.81l-.47.66-.25-.77-.78-.24.67-.47-.02-.82.66.48.76-.26-.25.77z" />
            <path style="--no: 106" d="m67.38 157-.7-.05-.45.55-.17-.7-.66-.25.6-.37.05-.7.54.46.68-.18-.27.65z" />
            <path style="--no: 107" d="m69.58 162.86-.9-.44-.87.49.14-.99-.73-.67.98-.17.42-.9.47.87.98.12-.69.71z" />
            <path style="--no: 108"
                d="m77.44 162.4-2.41-.9-2.12 1.47.12-2.58-2.05-1.56 2.48-.68.85-2.44 1.42 2.16 2.57.05-1.6 2.01z" />
            <path style="--no: 109"
                d="m84.48 162.13-1.25.07-.64 1.07-.46-1.16-1.22-.28.97-.8-.11-1.25 1.05.68 1.16-.49-.32 1.21z" />
            <path style="--no:  110"
                d="m95.37 162.04-3.96-1.44-3.43 2.45.14-4.2-3.38-2.5 4.04-1.17 1.33-4 2.36 3.49 4.21.03-2.58 3.32z" />
            <path style="--no: 111"
                d="m103.14 162.22-1.46-1.04-1.69.61.54-1.7-1.1-1.42 1.79-.02 1-1.48.57 1.7 1.73.49-1.44 1.07z" />
            <path style="--no: 112"
                d="m100.58 164.78-.25.05-.1.23-.12-.21-.25-.02.17-.19-.06-.24.23.1.21-.13-.02.25z" />
            <path style="--no: 113" d="m105.15 155.09-1 .15-.44.92-.47-.9-1-.14.72-.72-.19-1 .91.46.9-.48-.17 1z" />
            <path style="--no: 114" d="M105.6 165.15h-.4l-.23.33-.13-.39-.39-.12.34-.24-.01-.4.33.24.38-.14-.13.4z" />
            <path style="--no: 115"
                d="m117.96 160.85-3.27 1.34-.75 3.45-2.28-2.7-3.52.36 1.86-3-1.43-3.23 3.44.83 2.63-2.35.26 3.52z" />
            <path style="--no: 116" d="m120.79 157.74-.87-.52-.92.42.23-.99-.68-.74 1-.1.5-.87.4.93.99.2-.76.66z" />
            <path style="--no: 117"
                d="m127.56 164.69-2.25-1.13-2.2 1.22.37-2.49-1.83-1.72 2.48-.4 1.07-2.28 1.15 2.23 2.5.3-1.77 1.8z" />
            <path style="--no: 118" d="m131.3 157.74-.29-.47-.55-.01.35-.43-.15-.53.51.2.46-.3-.04.54.44.34-.53.14z" />
            <path style="--no: 119"
                d="m144.3 163.23-4.38.05-2.43 3.64-1.4-4.14-4.22-1.19 3.5-2.62-.16-4.37 3.57 2.53 4.1-1.52-1.3 4.18z" />
            <path style="--no:  120" d="m132.4 167.16-.6-.25-.53.35.05-.64-.5-.4.62-.16.24-.6.33.55.65.03-.42.5z" />
            <path style="--no: 121"
                d="m125.36 169.81-.13-.95-.86-.43.87-.42.14-.95.67.7.95-.16-.46.84.44.86-.94-.17z" />
            <path style="--no: 122"
                d="m122.71 171.55-2.41-.37-1.67 1.78-.4-2.4-2.22-1.04 2.17-1.13.3-2.42 1.75 1.71 2.4-.46-1.1 2.19z" />
            <path style="--no: 123"
                d="m104.6 174.2-2.22-.8-1.92 1.38.07-2.36-1.9-1.4 2.27-.66.74-2.24 1.33 1.95 2.36.01-1.45 1.87z" />
            <path style="--no: 124"
                d="m114.48 176.67-2.6-.75-2.1 1.72-.09-2.7-2.28-1.46 2.54-.93.68-2.62 1.67 2.14 2.7-.17-1.51 2.25z" />
            <path style="--no: 125" d="m102.87 179.05-.68-.14-.5.48-.08-.7-.61-.32.63-.28.12-.68.47.5.69-.09-.35.6z" />
            <path style="--no: 126"
                d="m96.65 176.58-2.6 1.75-.02 3.13-2.46-1.93-2.99.95 1.07-2.94-1.82-2.55 3.13.1 1.85-2.5.87 3z" />
            <path style="--no: 127"
                d="m85.3 184.63-5.13-.38-3.22 4-1.22-4.99-4.81-1.82 4.37-2.71.25-5.14 3.93 3.32 4.96-1.35-1.94 4.76z" />
            <path style="--no: 128" d="m70.4 178.68-.49-.3-.52.23.13-.56-.38-.42.57-.05.3-.5.2.54.57.12-.44.37z" />
            <path style="--no: 129"
                d="m67.01 188.83-1.7-1.8-2.45.38 1.2-2.17-1.13-2.21 2.44.45 1.76-1.74.31 2.45 2.2 1.13-2.23 1.07z" />
            <path style="--no:  130" d="m58.97 190.02.13-.4-.25-.35h.43l.25-.34.12.4.41.13-.35.25v.43l-.34-.26z" />
            <path style="--no: 131"
                d="m58.78 186.36-2.35-.93-2.11 1.41.16-2.53-2-1.57 2.46-.63.88-2.38 1.36 2.14 2.53.1-1.62 1.95z" />
            <path style="--no: 132" d="m54.3 190.75-.7-.05-.45.54-.16-.69-.66-.25.6-.37.04-.7.54.45.68-.18-.27.66z" />
            <path style="--no: 133" d="m47.8 186-.48-.17-.41.31v-.51l-.42-.3.5-.16.15-.49.3.42h.51l-.3.4z" />
            <path style="--no: 134"
                d="m49.36 191.12-1.52.34-.58 1.45-.8-1.34-1.55-.1 1.02-1.17-.38-1.52 1.44.62 1.32-.83-.15 1.55z" />
            <path style="--no: 135"
                d="m41.59 192.22-3.23.17-1.7 2.76-1.16-3.02-3.15-.75 2.52-2.04-.26-3.23 2.72 1.76 2.99-1.24-.83 3.13z" />
            <path style="--no: 136" d="m28.42 191.4-.22.1-.03.24-.17-.17-.24.04.11-.22-.11-.21.24.04.17-.17.03.24z" />
            <path style="--no: 137"
                d="m30.25 197.25-1.17-.04-.69.95-.33-1.12-1.1-.37.96-.66v-1.17l.93.72 1.1-.36-.38 1.1z" />
            <path style="--no: 138" d="m23.4 192.5-.17-.47-.47-.13.39-.3-.02-.49.4.28.46-.17-.15.47.31.38-.49.01z" />
            <path style="--no: 139"
                d="m20.46 202.37-3.79-2.2-3.95 1.89.91-4.29-3-3.18 4.35-.45 2.1-3.85 1.77 4 4.3.8-3.25 2.94z" />
            <path style="--no:  140"
                d="m8.94 202.44-1.27-1.06-1.6.44.63-1.54-.92-1.38 1.66.11 1.03-1.3.4 1.61 1.55.59-1.4.87z" />
            <path style="--no: 141"
                d="m27.78 203.65-1.65-.6-1.44 1.01.07-1.76-1.42-1.05 1.7-.48.56-1.67.98 1.46 1.76.02-1.08 1.39z" />
            <path style="--no: 142"
                d="m39.85 203.92-2.3.26-1.1 2.05-.96-2.11-2.3-.41 1.72-1.57-.31-2.3 2.02 1.14 2.09-1.01-.47 2.28z" />
            <path style="--no: 143"
                d="m46.8 200.26-1.4-.25-1.02 1.02-.2-1.42-1.27-.64 1.29-.63.21-1.41 1 1.03 1.41-.23-.68 1.26z" />
            <path style="--no: 144"
                d="m46.07 207.12-.21-.43-.48-.07.34-.34-.08-.48.43.23.43-.23-.08.48.35.34-.48.07z" />
            <path style="--no: 145" d="m51.47 207.76-.46-.1-.36.31-.03-.47-.41-.24.43-.18.1-.47.31.37.47-.05-.24.4z" />
            <path style="--no: 146"
                d="m63.81 206.12-4.53-.27-2.8 3.58-1.14-4.4-4.27-1.54 3.83-2.45.15-4.54 3.51 2.88 4.36-1.25-1.65 4.23z" />
            <path style="--no: 147" d="m66.83 205.11-.3-.19-.32.14.09-.35-.23-.26.35-.02.18-.3.13.32.35.08-.28.23z" />
            <path style="--no: 148"
                d="m70.03 208.77 1.06-4.31-2.96-3.32 4.43-.33 2.24-3.83 1.68 4.1 4.34.95-3.39 2.87.44 4.42-3.77-2.34z" />
            <path style="--no: 149"
                d="m81.74 199.99-.73-.8-1.07.16.53-.94-.47-.96 1.05.2.78-.74.12 1.07.95.5-.98.45z" />
            <path style="--no:  150" d="m81.92 207.67-.4-.27-.46.18.14-.47-.32-.38.5-.02.26-.41.16.46.48.12-.39.3z" />
            <path style="--no: 151"
                d="m99.94 203.83-4.63 2.7-.41 5.33-4-3.57-5.2 1.26 2.17-4.9-2.81-4.56 5.33.55 3.47-4.08 1.12 5.23z" />
            <path style="--no: 152"
                d="m102.23 211.42-1.36-.41-1.11.88-.03-1.42-1.18-.78 1.34-.46.38-1.37.86 1.13 1.41-.06-.81 1.16z" />
            <path style="--no: 153"
                d="m103.14 202.46-1-1.06-1.44.22.7-1.28-.65-1.3 1.43.26 1.04-1.02.18 1.45 1.3.67-1.32.62z" />
            <path style="--no: 154"
                d="m108.17 209.6-1-.66-1.11.45.31-1.16-.77-.91 1.2-.06.63-1.02.42 1.12 1.17.29-.94.75z" />
            <path style="--no: 155" d="m113.1 210.78-.5.05-.26.46-.2-.48-.52-.1.4-.34-.07-.51.44.26.47-.22-.1.5z" />
            <path style="--no: 156"
                d="m113.2 206.67-2.24-2.9-3.65.21 2.06-3.02-1.33-3.41 3.51 1.02 2.84-2.31.1 3.66 3.08 1.97-3.44 1.24z" />
            <path style="--no: 157"
                d="m119.78 209.96-1.1-.33-.91.73-.03-1.16-.97-.64 1.1-.38.3-1.12.7.92 1.16-.06-.66.95z" />
            <path style="--no: 158"
                d="m122.62 201.45-.25.06-.09.23-.13-.22-.25-.02.17-.18-.06-.25.23.1.21-.13-.02.25z" />
            <path style="--no: 159"
                d="m133.78 209.96-4.32-.78-3.09 3.1-.59-4.34-3.91-1.98 3.95-1.9.67-4.33 3.03 3.17 4.33-.7-2.08 3.86z" />
            <path style="--no: 160" d="m139.63 202.19-.87-.25-.7.57-.03-.9-.76-.49.85-.3.23-.88.55.71.9-.05-.5.74z" />
            <path style="--no: 161"
                d="m139.81 212.89-1.38-1.02-1.61.57.53-1.63-1.03-1.36h1.71l.98-1.4.52 1.63 1.64.5-1.4 1z" />
            <path style="--no: 162"
                d="m154.08 209.41-5.13-.65-3.44 3.86-.97-5.08-4.73-2.09 4.53-2.49.52-5.14 3.77 3.54 5.05-1.1-2.2 4.68z" />
            <path style="--no: 163" d="m156.18 207.67-.3-.05-.21.21-.04-.3-.27-.14.27-.13.05-.3.21.22.3-.04-.14.26z" />
            <path style="--no: 164"
                d="m164.5 206.67-2.9-.67-2.2 2.01-.25-2.96-2.6-1.47 2.74-1.17.6-2.91 1.95 2.24 2.96-.34-1.53 2.56z" />
            <path style="--no: 165" d="m162.59 210.6-.36-.3-.44.12.17-.43-.25-.39.46.04.3-.36.1.45.43.17-.39.24z" />
        </svg>
    </div>

    <!-- xmas tree block ends here -->
    <!-- falling snow block starts here -->

    <div id="falling-snow"></div>

    <!-- falling snow block ends here -->

    <script src="index.js"></script>
</body>

</html>

Below is the css code for this video.

style.css


@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(to bottom, #241d33 0%, #171930 51%, #091119 100%);
    height: 100vh;
}

.wrap {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h1, .headline-overlay {
    font-family: 'Gochi Hand';
    font-size: 5rem;
    line-height: 1;
    margin: -1rem 0 0;
    padding: 0 2rem;
    letter-spacing: 0.1em;
    background: repeating-linear-gradient(45deg, #d80e13, #d80e13 10px, #fff 10px, #fff 20px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.05), 0 7px 5px rgba(0, 0, 0, 0.05), 0 13px 10px rgba(0, 0, 0, 0.05), 0 22px 18px rgba(0, 0, 0, 0.075), 0 42px 33px rgba(0, 0, 0, 0.075), 0 100px 80px rgba(0, 0, 0, 0.1);
}

.headline-wrap {
    position: absolute;
    transition: all 0.25s ease-in-out;
    top: 5%;
    left: 0;
    text-align: center;
    width: 100%;
}

.headline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(180deg, rgba(252, 247, 205, 0.5), rgba(252, 247, 205, 0.25) 10%, rgba(252, 247, 205, 0.05) 49%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 90%);
    text-shadow: none;
    mix-blend-mode: hard-light;
    width: 100%;
}

.opaque {
    animation: opacityBlink 1s linear infinite;
    position: absolute;
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 1.25em;
}

@keyframes opacityBlink {
    0% {
        color: rgba(255, 255, 255, 0.2);
    }

    50% {
        color: rgba(255, 255, 255, 1);
    }

    100% {
        color: rgba(255, 255, 255, 0.2);
    }
}

.opaque-1 {
    bottom: 11%;
}

.opaque-2 {
    bottom: 7%;
}

.opaque-3 {
    bottom: 3%;
}

.window {
    width: 340px;
    height: 340px;
    background: #a6b6c9;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid #fdfbf9;
    overflow: hidden;
}

.santa {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.santa .body {
    width: 190px;
    height: 210px;
    background: #b73e42;
    position: relative;
    border-radius: 50%;
    top: 0;
    animation: bodyLaugh 4s linear infinite;
    transform: translateY(50%);
}

.santa .body:before {
    content: " ";
    width: 7px;
    height: 7px;
    background: #edd94c;
    border-radius: 50%;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px -18px 0px #edd94c, 0px 18px 0px #edd94c;
}

.santa .head {
    z-index: 2;
    position: absolute;
    bottom: 90px;
    left: 50%;
    animation: headLaugh 4s linear infinite;
    transform: translateX(-50%);
}

.santa .head .face {
    width: 120px;
    height: 130px;
    background: #edcab0;
    background: radial-gradient(#edcab0, #e9a982);
    border-radius: 50%;
    border: 3px solid #f8e7dc;
}

.santa .head .face .redhat .whitepart {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 90%;
    height: 32px;
    background: #f8e7dc;
    border-radius: 50px;
    z-index: 4;
    box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);
}

.santa .head .face .redhat .redpart {
    width: 120px;
    height: 120px;
    background: #b73e42;
    position: absolute;
    top: -50px;
    left: 15px;
    border-radius: 50%;
    z-index: -1;
}

.santa .head .face .redhat .redpart:before {
    content: " ";
    width: 95px;
    height: 95px;
    position: absolute;
    left: 0;
    top: 12px;
    border-radius: 50%;
    box-shadow: inset -8px -1px 0px -5px rgba(0, 0, 0, 0.05);
}

.santa .head .face .redhat .redpart:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 60px;
    background: #b73e42;
    width: 20px;
    height: 50px;
}

.santa .head .face .redhat .hatball {
    width: 38px;
    height: 38px;
    background: #f8e7dc;
    border-radius: 50%;
    z-index: 5;
    position: absolute;
    right: -20px;
    top: 40px;
    box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);
}

.santa .head .face .eyes {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 57px;
}

.santa .head .face .eyes:before, .santa .head .face .eyes:after {
    content: " ";
    position: absolute;
    width: 15px;
    height: 9px;
    top: 0;
    border: 5px solid #a8744f;
    border-width: 0;
    border-top-width: 5px;
    border-radius: 50%;
}

.santa .head .face .eyes:before {
    left: -28px;
}

.santa .head .face .eyes:after {
    right: -28px;
}

.santa .head .face .beard {
    width: 55px;
    height: 55px;
    background: #f8e7dc;
    border-radius: 50%;
    position: absolute;
    bottom: -30px;
    left: 50%;
    animation: beardLaugh 4s linear infinite;
    transform: translateX(-50%);
}

.santa .head .face .beard:before, .santa .head .face .beard:after {
    content: "";
    width: 80px;
    height: 80px;
    background: #f8e7dc;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
}

.santa .head .face .beard:before {
    left: -40px;
}

.santa .head .face .beard:after {
    right: -40px;
}

.santa .head .face .beard .nose {
    width: 25px;
    height: 20px;
    border-radius: 50%;
    background: #edcab0;
    position: absolute;
    z-index: 3;
    box-shadow: inset -3px -3px 0px #e9a982;
    left: 50%;
    transform: translateX(-50%);
    top: -42px;
}

.santa .head .face .beard .mouth {
    background: #a8744f;
    z-index: 3;
    position: absolute;
    width: 15px;
    height: 5px;
    border-bottom-right-radius: 80px 50px;
    border-bottom-left-radius: 80px 50px;
    left: 50%;
    top: 0;
    animation: mouthLaugh 4s linear infinite;
    transform: translateX(-50%);
}

.santa .head .ears:before, .santa .head .ears:after {
    content: "";
    width: 20px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(#e9a982, #edcab0);
    position: absolute;
    top: 50%;
    z-index: -1;
}

.santa .head .ears:before {
    left: -8px;
    transform: rotate(-10deg);
}

.santa .head .ears:after {
    right: -8px;
    transform: rotate(10deg);
}

@keyframes bodyLaugh {
    0% {
        top: 0px;
    }

    2.5% {
        top: -3px;
    }

    5% {
        top: 0px;
    }

    7.5% {
        top: -3px;
    }

    10% {
        top: 0px;
    }

    12.5% {
        top: -3px;
    }

    15% {
        top: 0px;
    }

    17.5% {
        top: -3px;
    }

    20% {
        top: 0px;
    }

    22.5% {
        top: -3px;
    }

    25% {
        top: 0px;
    }

    27.5% {
        top: -3px;
    }

    30% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

@keyframes beardLaugh {
    0% {
        bottom: -28px;
    }

    2.5% {
        bottom: -30px;
    }

    5% {
        bottom: -28px;
    }

    7.5% {
        bottom: -30px;
    }

    10% {
        bottom: -28px;
    }

    12.5% {
        bottom: -30px;
    }

    15% {
        bottom: -28px;
    }

    17.5% {
        bottom: -30px;
    }

    20% {
        bottom: -28px;
    }

    22.5% {
        bottom: -30px;
    }

    25% {
        bottom: -28px;
    }

    27.5% {
        bottom: -30px;
    }

    30% {
        bottom: -28px;
    }

    100% {
        bottom: -28px;
    }
}

@keyframes headLaugh {
    0% {
        bottom: 83px;
    }

    45% {
        bottom: 83px;
    }

    50% {
        bottom: 90px;
    }

    92% {
        bottom: 90px;
    }

    98% {
        bottom: 83px;
    }

    100% {
        bottom: 83px;
    }
}

@keyframes mouthLaugh {
    0% {
        width: 20px;
    }

    45% {
        width: 20px;
    }

    50% {
        width: 15px;
    }

    92% {
        width: 15px;
    }

    98% {
        width: 20px;
    }

    100% {
        width: 20px;
    }
}

.snowman .body {
    width: 200px;
    height: 200px;
    background: #ecf0f1;
    box-shadow: -13px -8px 0px rgba(0, 0, 0, 0.1) inset;
    border-radius: 50%;
    position: absolute;
    right: 0;
    left: 66.7%;
    top: 50%;
    margin: 0 auto;
}

.snowman .body:before {
    width: 100px;
    height: 100px;
    background: #ecf0f1;
    box-shadow: -5px 0px 0px rgba(0, 0, 0, 0.1) inset;
    border-radius: 50%;
    display: inline-block;
    content: "";
    position: relative;
    top: -191px;
    left: 46px;
    z-index: 30;
}

.snowman .body:after {
    width: 160px;
    height: 160px;
    background: #ecf0f1;
    box-shadow: -7px -5px 0px rgba(0, 0, 0, 0.1) inset;
    border-radius: 50%;
    display: inline-block;
    content: "";
    position: relative;
    top: -203px;
    left: 20px;
}

.snowman .body .head {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 41px 8px 0;
    border-color: transparent #fa7a50 transparent transparent;
    content: "";
    position: relative;
    top: -229px;
    display: inline-block;
    left: -50px;
    transform: rotate(10deg);
    box-shadow: 0px 43px rgba(0, 0, 0, 0.2) inset;
    z-index: 30;
}

.snowman .body .head:before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #003c5f;
    display: inline-block;
    position: absolute;
    top: -23px;
    left: 20px;
}

.snowman .body .head:after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #003c5f;
    display: inline-block;
    position: absolute;
    top: -26px;
    left: 40px;
}

.scarf {
    border-bottom: 21px solid rgb(243, 77, 77);
    border-left: 18px solid transparent;
    border-right: 29px solid transparent;
    height: 0;
    width: 104px;
    position: absolute;
    top: -101px;
    z-index: 30;
    left: 50px;
    border-radius: 0px 100% 5px 10px;
}

.scarf:after {
    width: 74px;
    height: 17px;
    transform: rotate(86deg);
    background: rgb(243, 77, 77);
    display: inline-block;
    content: "";
    position: absolute;
    top: 34px;
    left: 15px;
    border-radius: 50% 0% 50% 50%;
    box-shadow: -4px 0px rgba(0, 0, 0, 0.1) inset;
}

.snowman .body .shadow {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 190px;
    height: 30px;
    position: absolute;
    bottom: -29px;
    z-index: 1;
    left: 30px;
}

.left-hand {
    position: absolute;
    top: -30px;
    left: -7px;
    transform: rotate(15deg);
    border-bottom: 6px solid rgba(151, 102, 13, 1);
    border-left: 2px solid transparent;
    border-right: 0 solid transparent;
    height: 0;
    width: 36px;
}

.left-hand:before {
    width: 81px;
    left: -82px;
    position: absolute;
    content: "";
    display: inline-block;
    transform: rotate(-12deg);
    top: 8px;
    border-bottom: 7px solid rgba(128, 84, 6, 1);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    height: 0;
    z-index: 30;
}

.left-hand:after {
    width: 47px;
    left: -88px;
    position: absolute;
    content: "";
    display: inline-block;
    transform: rotate(17deg);
    top: 3px;
    border-bottom: 4px solid rgba(128, 84, 6, 1);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    height: 0;
    border-radius: 20px 50% 10% 20%;
}

.right-hand {
    position: absolute;
    top: -30px;
    right: -37px;
    transform: rotate(-12deg);
    border-bottom: 6px solid rgba(151, 102, 13, 1);
    border-right: 2px solid transparent;
    border-left: 0 solid transparent;
    height: 0;
    width: 66px;
}

.right-hand:before {
    width: 80px;
    right: -82px;
    position: absolute;
    content: "";
    display: inline-block;
    transform: rotate(10deg);
    top: 7px;
    border-bottom: 6px solid rgba(128, 84, 6, 1);
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    height: 0;
    z-index: 30;
}

.right-hand:after {
    width: 47px;
    right: -47px;
    position: absolute;
    content: "";
    display: inline-block;
    transform: rotate(-16deg);
    top: -6px;
    border-bottom: 4px solid rgba(128, 84, 6, 1);
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    height: 0;
    border-radius: 20px 50% 10% 20%;
}

.snowman .hat {
    top: -253px;
    left: 76px;
    transform: rotate(10deg);
    position: absolute;
    border-radius: 0;
    z-index: 20;
    border-top: 56px solid rgb(37, 37, 37);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 60px;
    border-bottom: 27px solid rgb(246, 62, 62);
}

.snowman .buttons {
    height: 8px;
    width: 8px;
    background: #2c3e50;
    position: absolute;
    border-radius: 50%;
    left: 60px;
    top: -23px;
    z-index: 30;
}

.snowman .buttons:before {
    height: 10px;
    width: 10px;
    background: #2c3e50;
    position: absolute;
    content: "";
    display: inline-block;
    border-radius: 50%;
    top: -30px;
    left: 5px;
}

.snowman .buttons:after {
    height: 6px;
    width: 6px;
    background: #2c3e50;
    position: absolute;
    content: "";
    display: inline-block;
    border-radius: 50%;
    top: 30px;
    left: 5px;
}

.xmas-tree {
    width: 33.3%;
    position: absolute;
    left: 1%;
    top: 15%;
}

svg {
    max-height: 60vh;
    overflow: visible;
}

path.top {
    --star-color: #ff0;
}

path {
    --star-color: #379157;
    fill: var(--star-color, green);
    stroke: var(--star-color, green);
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 0.2;
    transform: scale(0);
    transform-origin: 50% 50%;
    animation: starAnim 8s ease-in infinite;
    animation-delay: calc((var(--no) - 165) * -0.015s);
    transform-box: fill-box;
}

@keyframes starAnim {
    0% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.74, 1.72, 0.57, 1.01);
    }

    10% {
        transform: scale(1);
    }

    65% {
        transform: translateY(0px) scale(1);
    }

    75% {
        transform: translateY(50px) scale(0);
    }

    100% {
        transform: translateY(0px) scale(0);
    }
}

.snowball {
    position: absolute;
    display: block;
    border-radius: 50%;
    transform: translateZ(0);
    user-select: none;
    background-color: #fff;
}

#snow {
    position: absolute;
    width: 100%;
    height: 100%;
}

Below is the javascript code for this video.

index.js


var Snowball = (function () {
    var balls;
    var totalBalls = 100;
    var breeze = 0;

    function SnowBall(size, x, y, vx, vy) {
        this.size = size;
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.hit = false;
        this.melt = false;
        this.div = document.createElement('div');

        this.div.classList.add("snowball");
        this.div.style.width = this.size + 'px';
        this.div.style.height = this.size + 'px';
    }

    SnowBall.prototype.move = function () {
        if (this.hit) {
            if (Math.random() > 0.995) {
                this.melt = true;
            }
        } else {
            this.x += this.vx + Math.min(Math.max(breeze, -10), 10);
            this.y += this.vy;
        }

        if (this.x > window.innerWidth + this.size) {
            this.x -= window.innerWidth + this.size;
        }

        if (this.x < -this.size) {
            this.x += window.innerWidth + this.size;
        }

        if (this.y > window.innerHeight + this.size) {
            this.x = Math.random() * window.innerWidth;
            this.y -= window.innerHeight + this.size * 2;
            this.melt = false;
        }
    };

    SnowBall.prototype.draw = function () {
        this.div.style.transform = 'translate3d(' + this.x + 'px' + ',' + this.y + 'px, 0)';
        this.div.style.MozTransform = 'translate3d(' + this.x + 'px' + ',' + this.y + 'px, 0)';
        this.div.style.webkitTransform = 'translate3d(' + this.x + 'px' + ',' + this.y + 'px, 0)';
    };

    function update() {
        for (var i = balls.length; i--;) {
            var flake = balls[i];
            flake.move();
            flake.draw();
        }
        requestAnimationFrame(update);
    }

    SnowBall.init = function (container) {
        balls = [];

        for (var i = totalBalls; i--;) {
            var size = (Math.random() + 0.2) * 12 + 1;
            var flake = new SnowBall(size, Math.random() * window.innerWidth, Math.random() * window.innerHeight, Math.random() - 0.5, size * 0.3);
            container.appendChild(flake.div);
            balls.push(flake);
        }

        window.ondeviceorientation = function (event) {
            if (event) {
                breeze = event.gamma / 10;
            }
        };

        update();
    };

    return SnowBall;
}());

window.onload = function () {
    setTimeout(function () {
        Snowball.init(document.getElementById('falling-snow'));
    }, 500);
}

Thanks for visiting