<img src="https://picsum.photos/id/1069/250/250" style="--n:20;--v:50"> 
<img src="https://picsum.photos/id/1074/250/250" style="--n:30;--v:20;--t:1"> 
<img src="https://picsum.photos/id/109/250/250" style="--n:8;--v:50">  
<img src="https://picsum.photos/id/1019/250/250" style="--n:100;--v:80;--t:1"> 

<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/dyWazKE.js');
} else {
  alert("Your browser cannot run this demo. Consider Chrome or Edge instead")
}
</script>
@property --b{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

img {
  cursor:pointer;
  border-radius:50%;
  -webkit-mask:paint(blob);
  --n:20;
  --b:0;
  --t:0;
  transition:--b .5s;
}
img:hover {
  --b:var(--v)
}

body {
  background:pink;
}
registerPaint('blob', class  {

   static get inputProperties() {
    return [
      '--n',
      '--b',
      '--t'
    ]
  }
  
  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'));
    const B = parseFloat(properties.get('--b'));
    const T = parseInt(properties.get('--t'));
    
    const mask = 0xffffffff;
    const seed = 456;
    let m_w  = (123456789 + seed) & mask;
    let m_z  = (987654321 - seed) & mask;
    let random =  function() {
      m_z = (36969 * (m_z & 65535) + (m_z >>> 16)) & mask;
      m_w = (18000 * (m_w & 65535) + (m_w >>> 16)) & mask;

      var result = ((m_z << 16) + (m_w & 65535)) >>> 0;
      result /= 4294967296;
      return result;
    }
    
    for(var i = 0; i < N; i++) {
      if(T == 0) 
        var r = RADIUS - B*(i%2);
      else 
        var r = RADIUS - B*random();
      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.