<span class="type" style="--n:11">CSS is Cool</span>
<script>
if (CSS.paintWorklet) { CSS.paintWorklet.addModule('/t_afif/pen/MWojOQG.js');
}
</script>
@property --f-o{
syntax: '<number>';
inherits: false;
initial-value: 1;
}
body {
font-family: monospace;
font-weight: 700;
font-size:80px;
padding:20px;
background:#005F6B;
color:#00DFFC
}
.type {
--f-o:1;
--f-n:20;
--f-m:30;
-webkit-mask:
paint(fragmentation) calc(var(--n)*1ch) 0/1ch 100%,
linear-gradient(#000 0 0) 0 0/calc(var(--n)*1ch) 100%;
-webkit-mask-repeat:no-repeat;
animation:
b .6s linear infinite both 1.5s,
t calc(var(--n)*.6s) steps(var(--n)) both 1.5s;
}
@keyframes t{
from {
-webkit-mask-size:1ch 100%,0 100%;
-webkit-mask-position:0 0,0 0;
}
}
@keyframes b{
from {--f-o:0}
}
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 = 15;
const mask = 0xffffffff;
const seed = 11;
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, j*h, w, h);
}
}
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.