JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="display">
    <div></div>
    <p>
        How to be notified when the animation is over. <br>
        From the wiki: https://github.com/catdad/canvas-confetti/blob/master/README.md
        <br>
        confetti takes a single optional object. When window.Promise is available, it will return a Promise to let you know when it is done. When promises are not available (like in IE), it will return null. You can polyfill promises using any of the popular polyfills. You can also provide a promise implementation to confetti through:
		<br><br>
		const MyPromise = require('some-promise-lib');<br>
		const confetti = require('canvas-confetti');<br>
		confetti.Promise = MyPromise;<br>

    </p>
</div>

<script>
    window.module = {};
</script>
    <script src="https://www.kirilv.com/canvas-confetti/src/confetti.js"></script>
<script>
    window.confetti = module.exports;
</script>

CSS

div.display{
		width: 100%;
		height: 100%;
    }


    div.badgeDisplay div {
        width: 100%;
        height: 150px;
        background-repeat: no-repeat;
        background-position: center 75%;
        background-size: auto;
    }

    div.badgeDisplay p { font-size:18px; text-align:center; }

JavaScript

function realistic(){
    var count = 200;
    var defaults = { origin: { y: 0.5, x: 0.6 } };


    function fire(particleRatio, opts) {
	    var options = Object.assign({}, defaults, opts, {
            particleCount: Math.floor(count * particleRatio)
        });
        confetti(options).then(() => {
	        console.log('Done', particleRatio);
        });
    }

    fire(0.25, {
        spread: 26,
        startVelocity: 55,
    });

    fire(0.2, {
        spread: 60,
    });

    fire(0.35, {
        spread: 100,
        decay: 0.91,
        scalar: 0.8
    });

    fire(0.1, {
        spread: 120,
        startVelocity: 25,
        decay: 0.92,
        scalar: 1.2
    });

    fire(0.1, {
        spread: 120,
        startVelocity: 45,
    });
}

realistic();