Vonken bij klik

<!-- Vonken bij klik · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-csp"><canvas class="ei-csp__cv"></canvas><button class="ei-csp__b" type="button">Aanmelden</button><span class="ei-csp__k">klik waar je wilt</span></div>
</div>

/* Vonken bij klik · NedDev · eigen werk. */
.ei-csp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:crosshair;user-select:none}
.ei-csp__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ei-csp__b{position:relative;font-family:'Switzer',sans-serif;font-weight:600;font-size:15px;padding:14px 26px;border:0;border-radius:2px;background:#0a0a0a;color:#fff;cursor:pointer;transition:transform .15s}
.ei-csp__b:active{transform:scale(.96)}
.ei-csp__k{position:absolute;bottom:14px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.45)}

// Vonken bij klik · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-csp'),cv=w.querySelector('.ei-csp__cv'),ctx=cv.getContext('2d'),sparks=[],running=false,used=false,dpr=Math.min(2,window.devicePixelRatio||1);
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function size(){cv.width=w.clientWidth*dpr;cv.height=w.clientHeight*dpr;}size();
if(window.ResizeObserver)new ResizeObserver(size).observe(w);
function burst(x,y){var n=10,a0=Math.random()*Math.PI;for(var i=0;i<n;i++){var a=a0+i/n*Math.PI*2;sparks.push({x:x,y:y,a:a,t:0,len:10+Math.random()*8,dist:26+Math.random()*16});}if(!running){running=true;requestAnimationFrame(draw);}}
function draw(){ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,cv.width,cv.height);ctx.lineCap='round';
  sparks=sparks.filter(function(s){s.t+=1/32;return s.t<1;});
  sparks.forEach(function(s){var e=1-Math.pow(1-s.t,3),r0=e*s.dist,r1=r0+s.len*(1-s.t);ctx.strokeStyle='rgba(245,72,15,'+(1-s.t)+')';ctx.lineWidth=2.4*(1-s.t)+.6;
    ctx.beginPath();ctx.moveTo(s.x+Math.cos(s.a)*r0,s.y+Math.sin(s.a)*r0);ctx.lineTo(s.x+Math.cos(s.a)*r1,s.y+Math.sin(s.a)*r1);ctx.stroke();});
  if(sparks.length)requestAnimationFrame(draw);else running=false;}
w.addEventListener('pointerdown',function(e){if(reduce)return;used=true;var r=w.getBoundingClientRect();burst(e.clientX-r.left,e.clientY-r.top);});
if(!reduce){var demo=setInterval(function(){if(used||!w.isConnected){clearInterval(demo);return;}var b=w.querySelector('.ei-csp__b');burst(b.offsetLeft+b.offsetWidth/2,b.offsetTop+b.offsetHeight/2);},1600);setTimeout(function(){if(!used){var b=w.querySelector('.ei-csp__b');burst(b.offsetLeft+b.offsetWidth/2,b.offsetTop+b.offsetHeight/2);}},300);}
}
init(document.querySelector('.jouw-container'));