Snowfall background animation

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

body {
background-color: black;
overflow: hidden;
width: 100vw;
height: 100vh;
}

#wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}

.falling {
position: absolute;
animation: fall linear;
}

.rotating {
animation: rotate linear infinite;
}

@keyframes fall {
0% {
transform: translateY(-60vh);
}
100% {
transform: translateY(60vh);
}
}

@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script type="module">
import { random } from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.0";

// Returns a random integer between two values
function randomInt(min, max) {
return Math.round(random(min, max));
}

const container = document.getElementById("wrapper");
let snowflakeId = 0;

function createSnowflake() {
if (document.hidden) return;

const id = `snowflake-${snowflakeId++}`;

// Outer div for falling animation
const outerDiv = document.createElement("div");
outerDiv.classList.add("falling");
outerDiv.style.animationDuration = `${random(8, 18)}s`;
outerDiv.style.left = `${random(0, window.innerWidth)}px`;

// Inner div for rotation animation
const innerDiv = document.createElement("div");
innerDiv.classList.add("rotating");
innerDiv.style.animationDuration = `${random(4, 8)}s`;

// Snowflake SVG
const snowflake = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);
snowflake.setAttribute("viewBox", "0 0 100 100");
snowflake.setAttribute("xmlns", "http://www.w3.org/2000/svg");
snowflake.setAttribute("id", id);
snowflake.style.width = `${random(80, 150)}px`;
snowflake.style.height = snowflake.style.width;

// Generate snowflake properties
snowflake.innerHTML = `
<title>Snowflake ${id}</title>
<g>
${buildSnowflake(id, randomSnowflakeSettings())}
</g>
`;

innerDiv.appendChild(snowflake);
outerDiv.appendChild(innerDiv);
container.appendChild(outerDiv);

// Remove outer div after the falling animation ends
outerDiv.addEventListener("animationend", () => {
outerDiv.remove();
});
}

function buildSnowflake(id, { trunkLength, branches, treeCount }) {
return `
<g id="${id}-snowflake">
${buildTree(id, { trunkLength, branches })}
${buildTreeCopies(id, treeCount)}
</g>
`;
}

function buildTree(id, { trunkLength, branches }) {
const trunk = `
<line id="${id}-trunk" x1="50" y1="50" x2="50" y2="${
50 - trunkLength
}" stroke="#fff" stroke-linecap="round"/>
`;

const branchStrings = branches.map(({ distance, length }, index) => {
const startY = 50 - distance;
return `
<line
id="${id}-branch-${index}"
x1="50"
y1="${startY}"
x2="${50 - length}"
y2="${startY - length}"
stroke="#fff"
stroke-linecap="round"
/>
`;
});

return `<g id="${id}-tree">
${trunk}
<g id="${id}-branches">${branchStrings.join(" ")}</g>
<use href="#${id}-branches" style="scale: -1 1; transform-origin: center;"/>
</g>`;
}

function buildTreeCopies(id, branchCount) {
let copies = "";
for (let i = 0; i < branchCount; i++) {
copies += `
<use
href="#${id}-tree"
transform="rotate(${(360 / branchCount) * i},50,50)"
/>
`;
}
return copies;
}

function randomSnowflakeSettings() {
const trunkLength = randomInt(20, 40); // Random trunk length
const branches = [];

for (
let distance = randomInt(6, 10);
distance < trunkLength;
distance += randomInt(2, 10)
) {
const length = randomInt(5, Math.min(trunkLength - distance, 10)); // Random branch length
branches.push({ distance, length });
}

// const treeCount = randomInt(5, 12); // Random number of trees
const treeCount = 6;

return { trunkLength, branches, treeCount };
}

function startSnowfall() {
setInterval(() => {
createSnowflake();
}, 1000);
}

startSnowfall();
</script>