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

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

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

.worklet-canvas {
  --blob-seed: 123429;
  --blob-num-points: 8;
  --blob-variance: 0.375;
  --blob-smoothness: 1;
  --blob-fill: #000;

  width: 75vmin;
  height: 75vmin;

  background-image: url("https://images.unsplash.com/photo-1540927550647-43699cb14916?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNTE1MzA5OA&ixlib=rb-1.2.1&q=85");
  background-size: cover;
  background-position: center center;

  mask-image: paint(blob);
  -webkit-mask-image: paint(blob);
}

(async function () {
  if (CSS["paintWorklet"] === undefined) {
    await import("https://unpkg.com/css-paint-polyfill");
  }

  CSS.paintWorklet.addModule(
    "https://unpkg.com/@georgedoescode/houdini-random-blobs"
  );

  document
    .querySelector(".worklet-canvas")
    .style.setProperty("--blob-seed", Math.random() * 10000);
})();