CodePen Embed - Mask houdini #1

<img src="https://picsum.photos/id/1069/300/300" >
<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/NWjGbLN.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);
      
  }

})

This Pen is owned by Temani Afif on CodePen.

See more by @t_afif on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.