<div class="worklet-canvas"></div>

<script id="register-worklet">
  if (CSS.paintWorklet) {
    // ⚠️ hey friend! update the URL below each time you fork this pen! ⚠️
    CSS.paintWorklet.addModule('https://codepen.io/georgedoescode/pen/bGrMXxm.js');
  }
</script>

body {
  margin: 0;
}

.worklet-canvas {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  background-image: paint(workletName);
}

import random from "https://cdn.skypack.dev/random";
import seedrandom from "https://cdn.skypack.dev/seedrandom";

class Worklet {
  paint(ctx, geometry, props) {
    const { width, height } = geometry;

    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, width, height);
  }
}

if (typeof registerPaint !== "undefined") {
  registerPaint("workletName", Worklet);
}