Confetti

<!-- Confetti · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="conf-root"><canvas class="conf-canvas"></canvas><button class="conf-btn">&#127881; Vier het</button></div>
</div>

/* Confetti · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.conf-root{position:absolute;inset:0;overflow:hidden;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.conf-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.conf-btn{position:relative;z-index:1;cursor:pointer;border:none;border-radius:999px;padding:12px 22px;font:600 15px 'Switzer',sans-serif;color:#0a0a10;background:#F5480F;transition:transform .1s}
.conf-btn:active{transform:scale(.96)}

// Confetti · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var canvas=root.querySelector('.conf-canvas');var btn=root.querySelector('.conf-btn');var ctx=canvas.getContext('2d');var colors=['#F5480F','#ff9466','#ffd2bf','#fff','#1dd1a1'];var parts=[],raf=null;
function resize(){canvas.width=root.clientWidth;canvas.height=root.clientHeight;}resize();new ResizeObserver(resize).observe(root);
function burst(){var cx=canvas.width/2,cy=canvas.height/2;for(var i=0;i<120;i++){var a=Math.random()*Math.PI*2,sp=2+Math.random()*6;parts.push({x:cx,y:cy,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp-2,size:4+Math.random()*4,rot:Math.random()*6.28,vr:(Math.random()-.5)*.3,color:colors[(Math.random()*colors.length)|0],life:1});}if(!raf)loop();}
function loop(){ctx.clearRect(0,0,canvas.width,canvas.height);parts.forEach(function(p){p.vy+=0.12;p.x+=p.vx;p.y+=p.vy;p.vx*=.99;p.rot+=p.vr;p.life-=.012;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.rot);ctx.globalAlpha=Math.max(0,p.life);ctx.fillStyle=p.color;ctx.fillRect(-p.size/2,-p.size/2,p.size,p.size*0.6);ctx.restore();});parts=parts.filter(function(p){return p.life>0&&p.y<canvas.height+20;});if(parts.length){raf=requestAnimationFrame(loop);}else{raf=null;ctx.clearRect(0,0,canvas.width,canvas.height);}}
btn.addEventListener('click',burst);
}
init(document.querySelector('.jouw-container'));