JSFiddle - React, Tailwind, and code Playground

by Gary Pyne

HTML

<canvas id="confetti"></canvas>

JavaScript

var retina = window.devicePixelRatio,

				// Math shorthands
				PI = Math.PI,
				sqrt = Math.sqrt,
				round = Math.round,
				random = Math.random,
				cos = Math.cos,
				sin = Math.sin,

				// Local WindowAnimationTiming interface
				rAF = window.requestAnimationFrame,
				cAF = window.cancelAnimationFrame || window.cancelRequestAnimationFrame;

			// Local WindowAnimationTiming interface polyfill
			(function (w) {
				/**
				* Fallback implementation.
				*/
				var prev = new Date().getTime();
				function fallback(fn) {
					var curr = _now();
					var ms = Math.max(0, 16 - (curr - prev));
					var req = setTimeout(fn, ms);
					prev = curr;
					return req;
				}

				/**
				* Cancel.
				*/
				var cancel = w.cancelAnimationFrame
					|| w.webkitCancelAnimationFrame
					|| w.clearTimeout;

				rAF = w.requestAnimationFrame
					|| w.webkitRequestAnimationFrame
					|| fallback;

				cAF = function(id){
					cancel.call(w, id);
				};
			}(window));

			document.addEventListener("DOMContentLoaded", function() {
				var speed = 50,
					duration = (1.0 / speed),
					confettiRibbonCount = 11,
					ribbonPaperCount = 30,
					ribbonPaperDist = 8.0,
					ribbonPaperThick = 8.0,
					confettiPaperCount = 95,
					DEG_TO_RAD = PI / 180,
					RAD_TO_DEG = 180 / PI,
					colors = [
						["#df0049", "#660671"],
						["#00e857", "#005291"],
						["#2bebbc", "#05798a"],
						["#ffd200", "#b06c00"]
					];

				function Vector2(_x, _y) {
					this.x = _x, this.y = _y;
					this.Length = function() {
						return sqrt(this.SqrLength());
					}
					this.SqrLength = function() {
						return this.x * this.x + this.y * this.y;
					}
					this.Add = function(_vec) {
						this.x += _vec.x;
						this.y += _vec.y;
					}
					this.Sub = function(_vec) {
						this.x -= _vec.x;
						this.y -= _vec.y;
					}
					this.Div = function(_f) {
						this.x /= _f;
						this.y /= _f;
					}
					this.Mul = function(_f) {
						this.x *= _f;
						this.y *=...