<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();
    }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.