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