<img src="https://picsum.photos/id/1069/400/400">
<script>
if (CSS.paintWorklet) { CSS.paintWorklet.addModule('/t_afif/pen/gOWqmob.js');
} else {
alert("Your browser cannot run this demo. Consider Chrome or Edge instead")
}
</script>
img {
-webkit-mask:paint(blob);
--n:15;
}
body {
background:pink;
}
registerPaint('blob', class {
static get inputProperties() {
return [
'--n'
]
}
paint(ctx, size, properties) {
var point = [];
const RADIUS = size.width/2;
const cx = size.width/2;
const cy = size.height/2;
const N = parseInt(properties.get('--n'));
for(var i = 0; i < N; i++) {
var r = RADIUS - Math.random()*50;
var x = Math.cos((i / N) * (2 * Math.PI)) * r + cx;
var y = Math.sin((i / N) * (2 * Math.PI)) * r + cy;
point[i] = [x,y];
}
ctx.beginPath();
var xc1 = (point[0][0] + point[N - 1][0]) / 2;
var yc1 = (point[0][1] + point[N - 1][1]) / 2;
ctx.moveTo(xc1, yc1);
for(var i = 0; i < N - 1; i++) {
var xc = (point[i][0] + point[i + 1][0]) / 2;
var yc = (point[i][1] + point[i + 1][1]) / 2;
ctx.quadraticCurveTo(point[i][0], point[i][1], xc, yc)
}
ctx.quadraticCurveTo(point[N - 1][0], point[N - 1][1], xc1, yc1);
ctx.fillStyle = '#000';
ctx.closePath();
ctx.fill();
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.