Confetti

<div class="js-confetti">
    <svg class="m-confetti absolute" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:rgba(241, 242, 243, 0);display:block;" width="1500" height="1200" preserveAspectRatio="xMidYMin slice" viewBox="0 0 1500 1200">
        <style type="text/css">
            @keyframes confetti-fall {
                0% {
                    transform: translate(-400px, 1350px) rotate3d(1, 1, 1, 0deg);
                }

                15% {
                    transform: translate(500px, 100px) rotate3d(1, 1, 1, 360deg);
                }

                100% {
                    transform: translate(750px, 1350px) rotate3d(1, 1, 1, 1800deg);
                }
            }

            @keyframes confetti-fall2 {
                0% {
                    transform: translate(-300px, 1350px) rotate3d(1, 1, 1, 0deg);
                }

                20% {
                    transform: translate(750px, 200px) rotate3d(1, 1, 1, 720deg);
                }

                100% {
                    transform: translate(250px, 1350px) rotate3d(1, 1, 1, 2520deg);
                }
            }

            @keyframes confetti-fall3 {
                0% {
                    transform: translate(-300px, 1350px) rotate3d(1, 1, 1, 0deg);
                }

                15% {
                    transform: translate(750px, 50px) rotate3d(1, 1, 1, 540deg);
                }

                100% {
                    transform: translate(450px, 1350px) rotate3d(1, 1, 1, 2880deg);
                }
            }

            @keyframes confetti-fall4 {
                0% {
                    transform: translate(-200px, 1300px) rotate3d(1, 1, 1, 0deg);
                }

                20% {
                    transform: translate(450px, 150px) rotate3d(1, 1, 1, 1440deg);
                }

                100% {
                    transform: translate(150px, 1350px) rotate3d(1, 1, 1, 7200deg);
                }
            }

            @keyframes confetti-fall5 {
                0% {
                    transform: translate(-200px, 1300px) rotate3d(1, 1, 1, 0deg);
                }

                15% {
                    transform: translate(300px, 150px) rotate3d(1, 1, 1, 1440deg);
                }

                100% {
                    transform: translate(200px, 1350px) rotate3d(1, 1, 1, 7200deg);
                }
            }

            @keyframes confetti-fall6 {
                0% {
                    transform: translate(-200px, 1300px) rotate3d(1, 1, 1, 0deg);
                }

                20% {
                    transform: translate(400px, 150px) rotate3d(1, 1, 1, 1440deg);
                }

                100% {
                    transform: translate(50px, 1350px) rotate3d(1, 1, 1, 5400deg);
                }
            }

            .confetti.confetti-fall {
                animation: confetti-fall 4s 1 ease;
            }

            .confetti.confetti-fall2 {
                animation: confetti-fall2 4s 1 ease;
            }

            .confetti.confetti-fall3 {
                animation: confetti-fall3 4s 1 ease;
            }

            .confetti.confetti-fall4 {
                animation: confetti-fall4 4s 1 ease;
            }

            .confetti.confetti-fall5 {
                animation: confetti-fall5 4s 1 ease;
            }

            .confetti.confetti-fall6 {
                animation: confetti-fall6 4s 1 ease;
            }
        </style>
        <g style="transform: translate(0, -30px);" class="m-confetti__left">
            <g style="transform: translate(-0px, -0px);">
                <circle x="0" y="0" r="30" fill="#9e958c" class="confetti confetti-fall6" style="animation-delay: 0; animation-duration: 3.8s"></circle>
            </g>
            <g style="transform: translate(-75px, -75px);">
                <circle x="0" y="0" r="25" fill="#0F8D38" class="confetti confetti-fall" style="animation-delay: 0.1s; animation-duration: 4.1s"></circle>
            </g>
            <g style="transform: translate(-50px, -50px);">
                <circle x="0" y="0" r="20" fill="#E41018" class="confetti confetti-fall2" style="animation-delay: 0.2s; animation-duration: 4.2s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="25" fill="#FF85BB" class="confetti confetti-fall3" style="animation-delay: 0s; animation-duration: 5s"></circle>
            </g>
            <g style="transform: translate(-90px, -90px);">
                <circle x="0" y="0" r="18" fill="#69D2C2" class="confetti confetti-fall2" style="animation-delay: 0.2s; animation-duration: 3.8s"></circle>
            </g>
            <g style="transform: translate(-25px, -25px);">
                <circle x="0" y="0" r="20" fill="#A6EC8A" class="confetti confetti-fall" style="animation-delay: 0.3s; animation-duration: 3.5s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="20" fill="#69D2C2" class="confetti confetti-fall" style="animation-delay: 0.1s; animation-duration: 4s"></circle>
            </g>
            <g style="transform: translate(-50px, -50px);">
                <circle x="0" y="0" r="18" fill="#9e958c" class="confetti confetti-fall3" style="animation-delay: 0.3s; animation-duration: 3s"></circle>
            </g>
            <g style="transform: translate(-40px, -40px);">
                <circle x="0" y="0" r="18" fill="#F1DCDD" class="confetti confetti-fall4" style="animation-delay: 0.35s; animation-duration: 3.5s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="18" fill="#A6EC8A" class="confetti confetti-fall4" style="animation-delay: 0.4s; animation-duration: 4.5s"></circle>
            </g>
            <g style="transform: translate(-30px, -30px);">
                <circle x="0" y="0" r="18" fill="#F1DCDD" class="confetti confetti-fall5" style="animation-delay: 0.2s; animation-duration: 3s"></circle>
            </g>
            <g style="transform: translate(-50px, -50px);">
                <circle x="0" y="0" r="15" fill="#E41018" class="confetti confetti-fall6" style="animation-delay: 0s; animation-duration: 3.5s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="15" fill="#E41018" class="confetti confetti-fall4" style="animation-delay: 0.3s; animation-duration: 3s"></circle>
            </g>
        </g>
        <g style="transform: scaleX(-1) translate(-100%, -30px);" class="m-confetti__right">
            <g style="transform: translate(-0px, -0px);">
                <circle x="0" y="0" r="25" fill="#E41018" class="confetti confetti-fall6" style="animation-delay: 0.3s; animation-duration: 3.8s"></circle>
            </g>
            <g style="transform: translate(-75px, -75px);">
                <circle x="0" y="0" r="18" fill="#0F8D38" class="confetti confetti-fall" style="animation-delay: 0.2s; animation-duration: 4.1s"></circle>
            </g>
            <g style="transform: translate(-50px, -50px);">
                <circle x="0" y="0" r="18" fill="#FF85BB" class="confetti confetti-fall2" style="animation-delay: 0s; animation-duration: 4.2s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="20" fill="#E41018" class="confetti confetti-fall3" style="animation-delay: 0.1s; animation-duration: 4s"></circle>
            </g>
            <g style="transform: translate(-90px, -90px);">
                <circle x="0" y="0" r="30" fill="#69D2C2" class="confetti confetti-fall2" style="animation-delay: 0.3s; animation-duration: 3.8s"></circle>
            </g>
            <g style="transform: translate(-25px, -25px);">
                <circle x="0" y="0" r="18" fill="#A6EC8A" class="confetti confetti-fall" style="animation-delay: 0.1s; animation-duration: 3.5s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="25" fill="#69D2C2" class="confetti confetti-fall" style="animation-delay: 0.15s; animation-duration: 4s"></circle>
            </g>
            <g style="transform: translate(-50px, -50px);">
                <circle x="0" y="0" r="20" fill="#9e958c" class="confetti confetti-fall3" style="animation-delay: 0.2s; animation-duration: 3s"></circle>
            </g>
            <g style="transform: translate(-40px, -40px);">
                <circle x="0" y="0" r="18" fill="#F1DCDD" class="confetti confetti-fall4" style="animation-delay: 0.15s; animation-duration: 4.5s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="18" fill="#9E968D" class="confetti confetti-fall4" style="animation-delay: 0.4s; animation-duration: 5s"></circle>
            </g>
            <g style="transform: translate(-30px, -30px);">
                <circle x="0" y="0" r="18" fill="#0F8D38" class="confetti confetti-fall5" style="animation-delay: 0.5s; animation-duration: 4s"></circle>
            </g>
            <g style="transform: translate(0px, 0px);">
                <circle x="0" y="0" r="15" fill="#69D2C2" class="confetti confetti-fall6" style="animation-delay: 0.3s; animation-duration: 3s"></circle>
            </g>
            <g style="transform: translate(-20px, -20px);">
                <circle x="0" y="0" r="15" fill="#A6EC8A" class="confetti confetti-fall4" style="animation-delay: 0.5s; animation-duration: 3s"></circle>
            </g>
        </g>
    </svg>
</div>