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

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

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

.worklet-canvas {
  --blob-seed: 173411;
  --blob-num-points: 8;
  --blob-variance: 0.75;
  --blob-smoothness: 0;
  --blob-fill: #f25c54;

  width: 75vmin;
  height: 75vmin;

  background-image: paint(blob);
}

import gsap from "https://cdn.skypack.dev/gsap@3.7.0";

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

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

gsap.to(".worklet-canvas", {
  "--blob-smoothness": 1,
  yoyo: true,
  duration: 0.375,
  repeat: -1,
  repeatDelay: 1
});