BackgroundPattern.js

function generatePattern() {
    const cellSize = 60;
    const w = window.innerWidth;
    const h = window.innerHeight;
    const minO = 0;
    const maxO = 0.1;

    // how many full cells fit?
    const cols = Math.floor(w / cellSize);
    const rows = Math.floor(h / cellSize);
    const tileW = cols * cellSize;
    const tileH = rows * cellSize;

    // build a TILE‑sized SVG
    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tileW}" height="${tileH}" viewBox="0 0 ${tileW} ${tileH}">`;
    for (let y = 0; y < tileH; y += cellSize) {
        for (let x = 0; x < tileW; x += cellSize) {
            const flip = Math.random() < 0.5;
            const o = Math.random() * (maxO - minO) + minO;
            const light = Math.random() * 100;
            const fill = `hsla(0,0%,${light}%,${o})`;
            const pts = flip
                ? `${x},${y} ${x + cellSize},${y} ${x},${y + cellSize}`
                : `${x + cellSize},${y + cellSize} ${x + cellSize},${y} ${x},${y + cellSize}`;
            svg += `<polygon points="${pts}" fill="${fill}" />`;
        }
    }
    svg += `</svg>`;

    const uri = "data:image/svg+xml," + encodeURIComponent(svg);
    Object.assign(document.body.style, {
        backgroundImage: `url("${uri}")`,
        backgroundSize: `${tileW}px ${tileH}px`,
    });
}
generatePattern();