<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
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.