<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/zYdJGbo.js');
  }
</script>
body {
  margin: 0;
}

.worklet-canvas {
  width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  margin-left: 2rem;
  margin-top: 2rem;
  background-color: #fff;
  background-image: paint(workletName);
  resize: both;
  overflow: hidden;
}
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 = "#EA2F34";
    ctx.fillRect(0, 0, width, height);

    ctx.fillStyle = "#E9EDEB";
    for (let i = 0; i < 1000; i++) {
      const x = Math.random() * width;
      const y = Math.random() * height;

      ctx.beginPath();
      ctx.arc(x, y, Math.random() * 8, 0, Math.PI * 2);
      ctx.fill();
    }
  }
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.