Skip to content

Instantly share code, notes, and snippets.

@ajid2
Created Jul 24, 2021
Embed
What would you like to do?
Congratulation - HBD - etc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confetti Particle</title>
<style>
canvas{
position: fixed;
top: 0;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Congratulation</h1>
<script>
var startConfetti,stopConfetti,toggleConfetti,removeConfetti,maxParticleCount=150,particleSpeed=2;!function(){startConfetti=a,stopConfetti=l,toggleConfetti=function(){e?l():a()},removeConfetti=function(){stopConfetti(),i=[]};var t=["DodgerBlue","OliveDrab","Gold","Pink","SlateBlue","LightBlue","Violet","PaleGreen","SteelBlue","SandyBrown","Chocolate","Crimson"],e=!1,n=null,i=[],o=0;function r(e,n,i){return e.color=t[Math.random()*t.length|0],e.x=Math.random()*n,e.y=Math.random()*i-i,e.diameter=10*Math.random()+5,e.tilt=10*Math.random()-10,e.tiltAngleIncrement=.07*Math.random()+.05,e.tiltAngle=0,e}function a(){var t=window.innerWidth,a=window.innerHeight;window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,16.6666667)};var l=document.getElementById("confetti-canvas");null===l&&((l=document.createElement("canvas")).setAttribute("id","confetti-canvas"),l.setAttribute("style","display:block;z-index:999999;pointer-events:none"),document.body.appendChild(l),l.width=t,l.height=a,window.addEventListener("resize",function(){l.width=window.innerWidth,l.height=window.innerHeight},!0));for(var d=l.getContext("2d");i.length<maxParticleCount;)i.push(r({},t,a));e=!0,null===n&&function t(){d.clearRect(0,0,window.innerWidth,window.innerHeight),0===i.length?n=null:(!function(){var t,n=window.innerWidth,a=window.innerHeight;o+=.01;for(var l=0;l<i.length;l++)t=i[l],!e&&t.y<-15?t.y=a+100:(t.tiltAngle+=t.tiltAngleIncrement,t.x+=Math.sin(o),t.y+=.5*(Math.cos(o)+t.diameter+particleSpeed),t.tilt=15*Math.sin(t.tiltAngle)),(t.x>n+20||t.x<-20||t.y>a)&&(e&&i.length<=maxParticleCount?r(t,n,a):(i.splice(l,1),l--))}(),function(t){for(var e,n,o=0;o<i.length;o++)e=i[o],t.beginPath(),t.lineWidth=e.diameter,t.strokeStyle=e.color,n=e.x+e.tilt,t.moveTo(n+e.diameter/2,e.y),t.lineTo(n,e.y+e.tilt+e.diameter/2),t.stroke()}(d),n=requestAnimFrame(t))}()}function l(){e=!1}}();
</script>
<script>
startConfetti();
setTimeout(() => {
stopConfetti();
}, 9000)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment