<img src="https://picsum.photos/id/1069/300/300" >
<script>
if (CSS.paintWorklet) { CSS.paintWorklet.addModule('/t_afif/pen/PomPbrP.js');
}
</script>
img {
-webkit-mask: paint(fragmentation);
--f-n:10;
--f-m:10;
}
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);
}
}
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.