<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/LYjJppQ.js');
    setInterval(() => {
      document.documentElement.style.setProperty('--seed', Math.random() * 10000);
    }, 500);
  }
</script>
body {
  margin: 0;
  display: grid;
  height: 100vh;
  place-items: center;
}

.worklet-canvas {
  width: 75vmin;
  height: 75vmin;
  background-color: #e9edeb;
  background-image: paint(workletName);
}
import random from "https://cdn.skypack.dev/random";
import seedrandom from "https://cdn.skypack.dev/seedrandom";

class Worklet {
  static inputProperties = ["--seed"];

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

    const seed = Number(props.get("--seed"));

    random.use(seedrandom(seed));

    const radius = width / random.int(4, 8);

    ctx.fillStyle = "#141B3D";

    ctx.translate(width / 2, height / 2);
    ctx.rotate(((random.float(0, 360) * 180) / Math.PI) * 2);
    ctx.translate(-width / 2, -height / 2);

    ctx.beginPath();
    ctx.ellipse(width / 2, height / 2, radius, radius / 2, 0, Math.PI * 2, 0);
    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.