<img src="https://picsum.photos/id/1069/300/300" >
<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/118572367997e844ac8029cfa0bc2c88.js');
}
</script>
img {
  -webkit-mask: paint(fragmentation);
}

body {
  background:pink;
}
registerPaint('fragmentation', class  {
  
  paint(ctx, size, properties) {
    
   /* left */
   ctx.fillStyle = 'rgba(0,0,0,1)';
   ctx.fillRect(0, 0, size.width/2, size.height);
   /* right */ 
   ctx.fillStyle = 'rgba(0,0,0,0.5)';
   ctx.fillRect(size.width/2, 0, size.width/2, size.height);
      
  }

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.