<div class="worklet-canvas"></div>
<script>
  CSS.paintWorklet.addModule('https://codepen.io/georgedoescode/pen/MWmwBjB.js');
  document.querySelector('.worklet-canvas').style.setProperty('--seed', Math.random() * 10);
</script>

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

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.worklet-canvas {
  width: 75vmin;
  height: 75vmin;
  background-image: paint(testWorklet);
  resize: both;
  overflow: auto;
}

function mulberry32(a) {
  return function () {
    a |= 0;
    a = (a + 0x6d2b79f5) | 0;
    var t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

class TestWorklet {
  static get inputProperties() {
    return ["--seed"];
  }

  paint(ctx, geometry, props) {
    const seed = props.get("--seed").toString().trim();

    const random = mulberry32(seed);
    const hue = random() * 360;

    ctx.fillStyle = `hsl(${hue}, 75%, 50%)`;
    ctx.fillRect(0, 0, geometry.width, geometry.height);
  }
}

if (typeof registerPaint !== "undefined") {
  registerPaint("testWorklet", TestWorklet);
}