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

.worklet-canvas {
  width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  margin-top: 2rem;
  margin-left: 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";
import { createVoronoiTessellation } from "https://cdn.skypack.dev/@georgedoescode/generative-utils";

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

    ctx.strokeStyle = "#1D1934";
    ctx.fillStyle = "#1D1934";

    random.use(seedrandom(123456));

    const { cells } = createVoronoiTessellation({
      width,
      height,
      points: [...Array(24)].map(() => {
        return {
          x: random.float(0, width),
          y: random.float(0, height)
        };
      })
    });

    ctx.lineWidth = 2;

    ctx.scale(0.9, 0.9);
    ctx.translate((width * 0.1) / 2, (height * 0.1) / 2);

    cells.forEach((cell) => {
      ctx.fillStyle = "#fff";

      ctx.beginPath();
      ctx.moveTo(cell.points[0][0], cell.points[0][1]);
      for (let i = 0; i < cell.points.length - 1; i++) {
        ctx.lineTo(cell.points[i][0], cell.points[i][1]);
      }
      ctx.closePath();
      ctx.stroke();

      ctx.fillStyle = "#1D1934";

      ctx.beginPath();
      ctx.arc(cell.centroid.x, cell.centroid.y, 4, 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.