XenForo 2.х.х Зимний виджет с новым годом. 1.0.0

<main>
    <div class="globe"></div>
    <p class="greetings" data-splitting>С новым 2024 годом.</p>
</main>
<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css'>
<style>
    @import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");

p.greetings {
    width: 100%;
    font-family: "Alex Brush", cursive;
    font-size: 2em;
    font-weight: 600;
    color: gold;
    text-shadow: 1px 1px 5px rgba(0 0 0 / 0.7), 3px 3px 8px rgba(255 215 0 / 0.75),
        5px 5px 10px rgba(255 215 0 / 0.5), 10px 10px 15px rgba(255 215 0 / 0.25),
        20px 20px 20px rgba(255 215 0 / 0.15);
    text-align: center;
    line-height: 0.75;
    font-kerning: normal;
}

.globe {
    width: 100%;
    height: 12vw;
    outline: 1vmin solid gold;
    border-radius: 50%;
    display: flex;
    background:
        /* CLOUDS */ radial-gradient(#fff 0 70%, #0000 0 100%) top -8% left
            95% / 45% 18%,
        radial-gradient(#fff 0 70%, #0000 0 100%) top -7% left 35% / 40% 15%,
        radial-gradient(#fff 0 70%, #0000 0 100%) top -5% left 12% / 35% 15%,
        /* STAR */ /* main points */ /* top */
            conic-gradient(at 50% 0, #0000 175deg, yellow 175deg 185deg, #0000 185deg)
            top 17% left 70% / 4% 7%,
        /* right */
            conic-gradient(at 75% 30%, #0000 265deg, yellow 265deg 275deg, #0000 265deg)
            top 22.25% left 75% / 7% 4%,
        /* bottom */
            conic-gradient(at 50% 100%, yellow 5deg, #0000 5deg 355deg, yellow 355deg)
            top 25% left 70% / 4% 10%,
        /* left */
            conic-gradient(at 30% 75%, #0000 85deg, yellow 85deg 95deg, #0000 95deg) top
            20.5% left 66% / 7% 4%,
        /* short points */ /* top left */
            conic-gradient(at 0 0, #0000 130deg, yellow 130deg 140deg, #0000 140deg) top
            20% left 68% / 3% 3%,
        /* top right */
            conic-gradient(at 100% 0, #0000 220deg, yellow 220deg 230deg, #0000 230deg)
            top 20% left 71.5% / 3% 3%,
        /* bottom right */
            conic-gradient(
                at 100% 100%,
                #0000 310deg,
                yellow 310deg 320deg,
                #0000 320deg
            )
            top 23.5% left 72% / 3% 3%,
        /* bottom left */
            conic-gradient(at 0 100%, #0000 40deg, yellow 40deg 50deg, #0000 50deg) top
            23.5% left 67.5% / 3% 3%,
        /* HAT */ radial-gradient(ellipse at 50% 100%, #fff 0 70%, #0000 0 100%) top
            44% left 41% / 10% 2%,
        linear-gradient(#ff8b00 100%, #0000 100%) top 47.5% left 40.75% / 12% 5%,
        linear-gradient(#ff8b00 100%, #0000 100%) top 50% left 40.25% / 18% 1.25%,
        /* MOUTH */ radial-gradient(#000 0 70%, #0000 0 100%) top 59% left 39.5% /
            1.5% 1.5%,
        radial-gradient(#000 0 70%, #0000 0 100%) top 59.75% left 41% / 1.5% 1.5%,
        radial-gradient(#000 0 70%, #0000 0 100%) top 59.75% left 43.25% / 1.5% 1.5%,
        radial-gradient(#000 0 70%, #0000 0 100%) top 58.5% left 45% / 1.5% 1.5%,
        /* NOSE */ radial-gradient(#ff8b00 0 70%, #0000 0 100%) top 56% left 42% / 2%
            2%,
        /* EYES */ radial-gradient(#000 0 70%, #0000 0 100%) top 52.5% left 44% / 2%
            2%,
        radial-gradient(#000 0 70%, #0000 0 100%) top 53% left 39% / 2% 2%,
        /* HEAD */ radial-gradient(#fff 0 70%, #0000 0 100%) top 57% left 40% / 17%
            17%,
        /* ARMS */ linear-gradient(15deg, #0000 50%, #b14a30 50% 63%, #0000 63% 100%)
            top 72% left 20% / 16% 5%,
        linear-gradient(-10deg, #0000 45%, #b14a30 45% 62%, #0000 62% 100%) top 70.5%
            left 59% / 15% 5%,
        /* BUTTONS */ radial-gradient(blue 0 70%, #0000 0 100%) top 70% left 43% / 2%
            2%,
        radial-gradient(red 0 70%, #0000 0 100%) top 75% left 43.5% / 2% 2%,
        radial-gradient(purple 0 70%, #0000 0 100%) top 79% left 43.75% / 2% 2%,
        radial-gradient(green 0 70%, #0000 0 100%) top 84% left 43% / 2% 2%,
        /* BODY */ radial-gradient(ellipse at 50% 100%, #f7f8f8 0 70%, #0000 0 100%)
            top 95% left 57% / 35% 7%,
        radial-gradient(#fff 0 70%, #0000 0 100%) top 90% left 39% / 27% 31%,
        /* SHADOW */ radial-gradient(#dbdfe1 0 70%, #0000 0 100%) top 93.5% left 34% /
            22% 5%,
        /* TREE - BAUBLES */ radial-gradient(#d0ff14 0 70%, #0000 0 100%) top 33% left
            20.95% / 4% 4%,
        radial-gradient(#d8e4bc 0 70%, #0000 0 100%) top 44.5% left 21% / 2% 2%,
        radial-gradient(#ffa812 0 70%, #0000 0 100%) top 55% left 24% / 2% 2%,
        radial-gradient(#fff 0 70%, #0000 0 100%) top 52% left 19% / 2% 2%,
        radial-gradient(#03c03c 0 70%, #0000 0 100%) top 69% left 27% / 2% 2%,
        radial-gradient(#03c03c 0 70%, #0000 0 100%) top 65% left 22% / 2% 2%,
        radial-gradient(#dc143c 0 70%, #0000 0 100%) top 62% left 17% / 2% 2%,
        radial-gradient(#cccccc 0 70%, #0000 0 100%) top 72% left 15% / 2% 2%,
        radial-gradient(#0047ab 0 70%, #0000 0 100%) top 75% left 22% / 2% 2%,
        /* TREE */
            conic-gradient(
                at 50% 0,
                #0000 165deg,
                #fff 165deg,
                forestgreen 168deg 192deg,
                #fff 195deg,
                #0000 195deg
            )
            top 65% left 10%/ 30% 50%,
        linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 85% left 22% / 2%
            4%,
        /* SNOW PILES */ radial-gradient(#f7f8f8 0 70%, #0000 0 100%) top 85% left 95% /
            25% 10%,
        radial-gradient(#f7f8f8 0 70%, #0000 0 100%) top 92% left 80% / 45% 15%,
        radial-gradient(#f7f8f8 0 70%, #0000 0 100%) top 92% left 25% / 35% 15%,
        radial-gradient(#f7f8f8 0 70%, #0000 0 100%) top 89% left -30% / 45% 15%,
        /* HOUSE */ /* SMOKE */ radial-gradient(#d8d8f7 0 10%, #0000 80% 100%) top 49%
            right 28.5% / 1.5% 15%,
        /* CHIMNEY */ linear-gradient(#fff 0 100%, transparent 100%) top 60% left 72% /
            3% 5%,
        /* DOOR */ linear-gradient(#a95454 0 100%, transparent 100%) top 77% right 13% /
            4% 7%,
        /* WINDOW */
            linear-gradient(
                to right,
                #000 0 2%,
                gold 2% 49%,
                #000 49% 51%,
                gold 51% 98%,
                #000 98% 100%
            )
            top 74.5% left 74.2% / 7.2% 3.65%,
        linear-gradient(#000 0 2%, #0000 2% 98%, #000 98% 100%) top 74.6% left 74.25% /
            7.5% 4.2%,
        /* ROOF */ linear-gradient(-70deg, #fff 60% 85%, #0000 85% 90%) top 67% right
            24% / 20% 10%,
        linear-gradient(70deg, #fff 60% 85%, #0000 85% 90%) top 67% right 6% / 20% 10%,
        /* ROOF SHADOW */ linear-gradient(#d8d8f7 0 100%, #0000 100%) left 90% top
            69.35% / 30% 5%,
        /* BUILDING */ linear-gradient(#fff 0 100%, #0000 100%) left 90% top 80% / 30%
            15%,
        /* BACKGROUND SKY + GROUND BEHIND PILES */
            linear-gradient(to top, #f7f8f8 18%, #002686 18%, #001a5c, #000f34, #00091f);
    background-repeat: no-repeat;
    box-shadow: inset 0 0 15px 0 rgba(0 0 0 / 0.75);
}

main {
    display: grid;
    place-items: center;
}
</style>
<script src='js/gsap.min.js'></script>
<script src='js/splitting.min.js'></script>
<script>
Splitting();
gsap.from(".greetings .char", {
    delay: 2,
    duration: 0.5,
    opacity: 0,
    y: "-3vh",
    ease: "power4.out",
    stagger: {
        from: "start",
        amount: 1.5
    }
});

// the snow
var particleCount = 1500;
var particleMax = 2000;
var sky = document.querySelector(".globe");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var width = sky.clientWidth;
var height = sky.clientHeight;
var i = 0;
var active = false;
var snowflakes = [];
var snowflake;

canvas.style.position = "absolute";
canvas.style.left = "40";
canvas.style.top = "40";
canvas.style.borderRadius = "50%";

var Snowflake = function () {
    this.x = 0;
    this.y = 0;
    this.vy = 0;
    this.vx = 0;
    this.r = 0;
};

Snowflake.prototype.reset = function () {
    this.x = Math.random() * width;
    this.y = Math.random() * -height;
    // speed
    this.vy = 1 + Math.random() * 1;
    // drift
    this.vx = 0.5 - Math.random();
    // radial size of snowflakes
    this.r = 1 + Math.random() * 1;
    // opacity
    this.o = 0.5 + Math.random() * 0.5;
};

function generateSnowFlakes() {
    snowflakes = [];
    for (i = 0; i < particleMax; i++) {
        snowflake = new Snowflake();
        snowflake.reset();
        snowflakes.push(snowflake);
    }
}

generateSnowFlakes();

function update() {
    ctx.clearRect(0, 0, width, height);

    if (!active) {
        return;
    }

    for (i = 0; i < particleCount; i++) {
        snowflake = snowflakes[i];
        snowflake.y += snowflake.vy;
        snowflake.x += snowflake.vx;

        ctx.globalAlpha = snowflake.o;
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();

        if (snowflake.y > height) {
            snowflake.reset();
        }
    }

    requestAnimFrame(update);
}

function onResize() {
    width = sky.clientWidth;
    height = sky.clientHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = "#fff";

    var wasActive = active;
    active = width > 100;

    if (!wasActive && active) {
        requestAnimFrame(update);
    }
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 150 / 90);
        }
    );
})();

onResize();
window.addEventListener("resize", onResize, false);

sky.appendChild(canvas);
</script>