minimal confetti svg

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
	<defs> 
   <g class="confetti">
    <rect class="paper" width="13" height="8" />
   </g>
	</defs> 
	<text x="50%" y="50%" fill="rgb(155,110,255)">Click Me</text>
 <g class="container"/>
</svg>

minimal-confetti-svg.markdown

minimal confetti svg

A Pen by alex on CodePen.

License.

script.js

let select = (s) => document.querySelector(s),
	selectAll = (s) => document.querySelectorAll(s),
	mainSVG = select("#mainSVG"), 
	//colorArray = ["#EF5350", "#EC407A","#AB47BC","#7E57C2","#5C6BC0","#42A5F5","#29B6F6","#26C6DA","#26A69A","#66BB6A","#9CCC65","#D4E157","#FFEE58","#FFCA28","#FFA726","#FF7043","#8D6E63","#BDBDBD","#78909C"],
	colorArray = ["#42c2f1", "#fbda4f", "#ab63df", "#5fc581"],
	confetti = select(".confetti"),
	container = select(".container");

gsap.set("svg", {
	visibility: "visible"
});
let confettiTl = gsap.timeline({ paused: true });

function playConfetti() {
	confettiTl.play(0);
}

function createConfetti() {
	var i = 160,
		clone,
		tl,
		rot,
		duration,
		paperDuration;
	while (--i > -1) {
		tl = gsap.timeline();
		clone = confetti.cloneNode(true);
		container.appendChild(clone);
		rot = gsap.utils.random(0, 360);
		duration = gsap.utils.random(3, 9);
		paperDuration = duration / 20;
		gsap.set(clone, {
			fill: gsap.utils.random(colorArray),
			rotation: rot,
			transformOrigin: "50% 50%"
		});

		tl
			.fromTo(
				clone,
				{
					x: gsap.utils.random(0, 800),
					y: -50,
					rotation: rot
				},
				{
					duration: duration,
					x: "+=" + gsap.utils.random(-200, 200),
					y: 650,
					rotation: "+=180",
					ease: "linear"
				}
			)
			.to(
				clone.querySelector(".paper"),
				{
					duration: duration / 23,
					scaleY: 0.1,
					repeat: 23,
					yoyo: true
				},
				0
			);
		//console.log(paperDuration)
		confettiTl.add(tl, i / 200).timeScale(5.3);
	}

	gsap.set(".paper", {
		transformOrigin: "50% 50%"
	});
}
createConfetti();
document.getElementById("mainSVG").addEventListener("click", playConfet); 
function playConfet() {
	let tl = gsap.timeline({ repeat: 0 });
	tl.add(playConfetti, "step0+=0.01");
}

style.css

body {
 background-color: #131417;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}

minimal confetti animation