<div class="full"></div>
<script>
if (CSS.paintWorklet) { CSS.paintWorklet.addModule('/t_afif/pen/MWmmejq.js');
}
</script>
@property --f-o{
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.full {
position:fixed;
inset: calc(50% - 50vmax) auto auto calc(50% - 50vmax);
width:100vmax;
height:100vmax;
z-index:268;
display:grid;
background:#fff;
}
.full:before {
content:"";
grid-area:1/1;
background:#000;
--f-n:20;
--f-m:20;
animation:i 3s infinite alternate;
-webkit-mask: paint(fragmentation);
mask: paint(fragmentation);
}
@keyframes i {
0% ,20% {--f-o:0}
80%,100% {--f-o:1}
}
.full:after {
content:"Loading...";
grid-area:1/1;
font-family:monospace;
font-weight:bold;
font-size:20vmin;
margin:auto;
mix-blend-mode:difference;
color: #fff;
}
registerPaint('fragmentation', class {
static get inputProperties() {
return [
'--f-n',
'--f-m',
'--f-o'
]
}
paint(ctx, size, properties) {
const n = properties.get('--f-n');
const m = properties.get('--f-m');
const o = properties.get('--f-o');
const w = size.width/n;
const h = size.height/m;
const l = 10;
const mask = 0xffffffff;
const seed = 35;
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++) {
for(var j=0;j<m;j++) {
ctx.fillStyle = 'rgba(0,0,0,'+((random()*(l-1) + 1) - (1-o)*l)+')';
ctx.fillRect(i*w-.5, j*h-.5, w+.5, h+.5);
}
}
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.