Let it snow, let it snow, let it snow

Wow, amazing - might try this here!  :D 

Love it ​@Jef Vanlaer ⛄🎄

Thanks for sharing ​@Jef Vanlaer  ! I'm saving this for next year as we'll be adding Community to our tech stack 😄

Psst...Unless I’m mistaken I met you at Pulse and seems that you are missing the badge in your profile 🕵

Thanks for mentioning, ​@romihache . I guess I have to flag it here: 

• Where is my badge? Blog

We’ll get on that!  :-D 

Wow, thanks a lot ​@Jef Vanlaer about this!

I think this is almost annoying when using mobile device so I made small changes and with this code effect can be seen only by the desktop users:

(Use it by your own risk)

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Check if the user is on a desktop
    if (!/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {
        // Create a canvas element dynamically
        const canvas = document.createElement('canvas');
        canvas.id = 'snowCanvas';

        // Append the canvas to the body
        document.body.appendChild(canvas);

        // Set up the canvas and its context
        const ctx = canvas.getContext('2d');

        // Make the canvas cover the whole screen
        function setCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        setCanvasSize();

        // Update canvas size on window resize
        window.addEventListener('resize', setCanvasSize);

        // Create an array to store snowflakes
        const snowflakes = [];

        // Snowflake class
        class Snowflake {
            constructor() {
                this.x = Math.random() * canvas.width; // Random x position
                this.y = Math.random() * canvas.height; // Random y position
                this.radius = Math.random() * 3 + 2; // Random size
                this.speed = Math.random() * 1 + 0.5; // Random speed
                this.wind = Math.random() * 0.5 - 0.25; // Random horizontal drift
            }

            // Update the snowflake's position
            update() {
                this.y += this.speed; // Move down
                this.x += this.wind; // Drift horizontally

                // Reset snowflake to the top if it goes off-screen
                if (this.y > canvas.height) {
                    this.y = 0;
                    this.x = Math.random() * canvas.width;
                }
            }

            // Draw the snowflake
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.closePath();
            }
        }

        // Create initial snowflakes
        for (let i = 0; i < 150; i++) {
            snowflakes.push(new Snowflake());
        }

        // Animation loop
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            snowflakes.forEach(snowflake => {
                snowflake.update();
                snowflake.draw();
            });
            requestAnimationFrame(animate); // Continue animation
        }

        // Start the animation
        animate();

        // Style the canvas directly via JavaScript
        canvas.style.position = 'fixed';
        canvas.style.top = '0';
        canvas.style.left = '0';
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        canvas.style.zIndex = '9999'; // Ensure it appears above other elements
        canvas.style.pointerEvents = 'none'; // Allow clicks through the canvas
    }
});
</script>