<img src="https://picsum.photos/id/1069/200/200" style="--f-n:4;--f-m:2;">
<img src="https://picsum.photos/id/1072/200/200" style="--f-n:10;--f-m:20;">
<img src="https://picsum.photos/id/1032/200/200" style="--f-n:30;--f-m:30;">
<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/ExmVZbM.js');
}
</script>

img {
  -webkit-mask: paint(fragmentation);
  
}

body {
  background:pink;
}

registerPaint('fragmentation', class  {

  static get inputProperties() {
    return [
      '--f-n',
      '--f-m'
    ]
  }
  
  paint(ctx, size, properties) {

    const n = properties.get('--f-n');
    const m = properties.get('--f-m');
    const w = size.width/n;
    const h = size.height/m;
   
    for(var i=0;i<n;i++) {
       for(var j=0;j<m;j++) {
         ctx.fillStyle = 'rgba(0,0,0,'+(Math.random())+')';
         ctx.fillRect(i*w, j*h, w, h);
        }
      }
  }

})