Zigzag stripe flow

Build "Zigzag stripe flow" for my site using the Enrichr Library element at https://enrichr.dev/elements/zigzag-stripe-flow.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/zigzag-stripe-flow.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- size: 200
- thickness: 50
- speed: 1
- stripes: #0c1e18
- background: #fbf8f1

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<div class="ef-zzs"><svg class="ef-zzs__svg" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Bold zigzag stripes drifting slowly downward in a seamless loop"></svg></div>

/* Enrichr Library · https://enrichr.dev */
.ef-zzs { position: relative; width: 100%; min-height: 24rem; overflow: hidden; border-radius: 1rem; background: #fbf8f1; }
.ef-zzs .ef-zzs__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

// Enrichr Library · https://enrichr.dev
// Zigzag stripe flow: an SVG pattern of bold chevron bands that drifts straight down forever. One square tile holds a
// background and three zigzag bands (each band rises and falls 100 units across a 200 unit tile), so the tiles meet with no
// seam. The pattern's own transform moves it down by exactly one tile height per loop at a constant rate (linear, like an
// SVG animateTransform), so the end of a loop looks the same as the start. Default timing: one tile every 8 seconds.
// Reduced motion shows the stripes still. The loop pauses off screen and in hidden tabs.
// mount(root, { size (tile size, px), thickness (band thickness, out of 200), speed (1 = one tile per 8 s),
//               stripes (band colour), background })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var NS = "http://www.w3.org/2000/svg";
  var wrap = root.querySelector(".ef-zzs");
  var svg = root.querySelector(".ef-zzs__svg");
  var uid = "ef-zzs-" + Math.random().toString(36).slice(2, 10);
  var opts = {}, raf = 0, visible = true, io = null, ro = null, destroyed = false, last = 0, phase = 0;

  function el(name, attrs) {
    var n = document.createElementNS(NS, name);
    for (var k in attrs) n.setAttribute(k, attrs[k]);
    return n;
  }
  function num(v, d) { v = Number(v); return isFinite(v) ? v : d; }

  // one 200 x 200 tile: the background, then three bands. Band 0 sits across the top edge and band 2 across the bottom
  // edge, so where one tile ends the next one carries on the same band.
  svg.textContent = "";
  var defs = el("defs", {});
  var pat = el("pattern", { id: uid, width: 200, height: 200, patternUnits: "userSpaceOnUse" });
  var bg = el("rect", { width: 200, height: 200 });
  var bands = [];
  pat.appendChild(bg);
  for (var i = 0; i < 3; i++) { bands.push(el("polygon", {})); pat.appendChild(bands[i]); }
  defs.appendChild(pat);
  svg.appendChild(defs);
  svg.appendChild(el("rect", { width: "100%", height: "100%", fill: "url(#" + uid + ")" }));

  function shape() {
    var th = opts.thickness;
    for (var k = 0; k < 3; k++) {
      var y = -75 + 100 * k;
      bands[k].setAttribute("points", "0," + y + " 100," + (y + 100) + " 200," + y + " 200," + (y + th) + " 100," + (y + 100 + th) + " 0," + (y + th));
    }
  }
  // the tile is drawn in 200 unit space and scaled to the chosen size; the translate moves it down by one tile per loop
  function frame() {
    var k = opts.size / 200;
    pat.setAttribute("patternTransform", "translate(0 " + (phase * opts.size).toFixed(3) + ") scale(" + k + ")");
  }

  function loop(now) {
    raf = requestAnimationFrame(loop);
    var dt = Math.min(0.05, (now - last) / 1000 || 0); last = now;
    if (!visible || document.hidden) return;
    phase = (phase + dt * opts.speed / 8) % 1; // 8 s per tile at speed 1, as in the original
    frame();
  }

  function update(partial) {
    opts = Object.assign({ size: 200, thickness: 50, speed: 1, stripes: "#0c1e18", background: "#fbf8f1" }, opts, partial || {});
    opts.size = Math.max(20, num(opts.size, 200));
    opts.thickness = Math.min(99, Math.max(1, num(opts.thickness, 50)));
    opts.speed = Math.max(0, num(opts.speed, 1));
    bg.setAttribute("fill", opts.background);
    for (var k = 0; k < 3; k++) bands[k].setAttribute("fill", opts.stripes);
    wrap.style.background = opts.background;
    if (destroyed) return;
    shape();
    frame();
  }

  update(o);
  if (!reduce) {
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }); io.observe(wrap); }
    last = performance.now(); raf = requestAnimationFrame(loop);
  }
  // the pattern is in user space, so it needs no maths on resize; redraw once in case the box was hidden at mount
  if ("ResizeObserver" in window) { ro = new ResizeObserver(function () { if (!destroyed) frame(); }); ro.observe(wrap); }
  return {
    update: update,
    destroy: function () {
      destroyed = true; cancelAnimationFrame(raf);
      if (io) io.disconnect();
      if (ro) ro.disconnect();
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"size":200,"thickness":50,"speed":1,"stripes":"#0c1e18","background":"#fbf8f1"});