Animated background

const dx = 24;
const dy = 24;
const canvas = display(html`<canvas width=${dx} height=${dy} style="position: fixed; width: 100%; height: 100%; inset: 0; z-index: -1;">`);
const context = canvas.getContext("2d");
const animate = (function* () {
  const {cos, sin, min, max, PI} = Math;
  while (true) {
    const t = performance.now() / 2000;
    for (let x = 0; x < dx; ++x) {
      for (let y = 0; y < dy; ++y) {
        const l1 = 0.5 + 0.3 * sin((x * 0.1 + y * 0.1 + t * 0.5));
        const c1 = 0.15 + 0.1 * sin((x * 0.12 - t * 0.3 + PI / 3));
        const h1 = 360 * sin((y * 0.09 - t * 0.7 + 2 * PI / 3));
        const l2 = 0.4 + 0.2 * sin((x * 0.15 - y * 0.08 + t * 0.8 + PI));
        const c2 = 0.12 + 0.08 * sin((x * 0.12 * cos(t * 0.2) + y * 0.18 * sin(t * 0.2) + t * 0.4 + PI / 2));
        const h2 = 180 + 180 * sin((-x * 0.09 + y * 0.14 + t * 0.9 + 3 * PI / 2));
        const l3 = 0.3 + 0.15 * sin((x * 0.25 - y * 0.2 + t * 1.2));
        const c3 = 0.08 + 0.06 * sin((y * 0.28 + t * 0.6 + PI / 4));
        const h3 = 90 + 90 * sin((-x * 0.18 - y * 0.24 + t * 1.5 + PI / 6));
        const l = (l1 + l2 * 0.7 + l3 * 0.4) / 2.1;
        const c = (c1 + c2 * 0.7 + c3 * 0.4) / 2.1;
        const h = (h1 + h2 * 0.7 + h3 * 0.4) / 2.1;
        const intensity = 1.3;
        const vl = max(0, min(1, 0.4 + l * intensity));
        const vc = max(0, 0.5 * c * intensity);
        const vh = ((h % 360) + 360) % 360;
        context.fillStyle = `oklch(${vl} ${vc} ${vh})`;
        context.fillRect(x, y, 1, 1);
      }
    }
    yield;
  }
})();