body{overflow:hidden;background:#000;height:100vh;margin:0}
.canv,.canv div{position:absolute}

.canv,.canv div{-webkit-transform:var(--nLab);-moz-transform:var(--nLab);-ms-transform:var(--nLab);-o-transform:var(--nLab);transform:var(--nLab)}
.canv,.canv div{-webkit-animation:var(--anim);-moz-animation:var(--anim);-ms-animation:var(--anim);-o-animation:var(--anim);animation:var(--anim)}
.canv{-webkit-mask:var(--mask);-moz-mask:var(--mask);-ms-mask:var(--mask);-o-mask:var(--mask);mask:var(--mask)}

.canv,.canv div{--rfall:2s;background:var(--bk)}
.canv{--bk:transparent;--rdist:calc(var(--f)*1vw);--nLab:translate3d(13vw,10vw,0);--anim:fall var(--rfall) ease-in infinite;--mask:radial-gradient(circle 7vw at center 10vw,transparent 90%,#fff 100%);perspective:20vw;top:15vw;padding:calc(var(--rdist) + 1vw);border-radius:50%;opacity:0;-webkit-filter:contrast(19);-moz-filter:contrast(19);-ms-filter:contrast(19);-o-filter:contrast(19);filter:contrast(19)}

.canv div{--bk:blue;--rdrop:calc(var(--s)*2vw);--adrop:var(--k)*1turn/var(--n);--nLab:rotate(calc(var(--adrop) - .125turn))translate3D(var(--rdist),0,0)scale(0,calc(var(--s)*.5));--anim:wave var(--rfall) ease-out infinite;top:50%;left:50%;border-radius:100%;border:calc(var(--rdrop)*-2);padding:var(--rdrop);-webkit-filter:blur(.416vw);-moz-filter:blur(.416vw);-ms-filter:blur(.416vw);-o-filter:blur(.416vw);filter:blur(.416vw)}

@-webkit-keyframes fall{0%{opacity:0;-webkit-transform:translate3d(13vw,10vw,0)scale(.25)rotateX(0)rotate(30deg)}32%{-webkit-transform:translate3d(13vw,0,0)scale(.35,.75)rotateX(0)rotate(30deg)}33%{-webkit-transform:translate3d(13vw,0,0)scale(.85,.35)rotateX(0)rotate(30deg)}35%,100%{opacity:1;-webkit-transform:translate3d(13vw,0,0)scale(1)rotateX(75deg)rotate(30deg)}}@-moz-keyframes fall{0%{opacity:0;-moz-transform:translate3d(13vw,10vw,0)scale(.25)rotateX(0)rotate(30deg)}32%{-moz-transform:translate3d(13vw,0,0)scale(.35,.75)rotateX(0)rotate(30deg)}33%{-moz-transform:translate3d(13vw,0,0)scale(.85,.35)rotateX(0)rotate(30deg)}35%,100%{opacity:1;-moz-transform:translate3d(13vw,0,0)scale(1)rotateX(75deg)rotate(30deg)}}@-ms-keyframes fall{0%{opacity:0;-ms-transform:translate3d(13vw,10vw,0)scale(.25)rotateX(0)rotate(30deg)}32%{-ms-transform:translate3d(13vw,0,0)scale(.35,.75)rotateX(0)rotate(30deg)}33%{-ms-transform:translate3d(13vw,0,0)scale(.85,.35)rotateX(0)rotate(30deg)}35%,100%{opacity:1;-ms-transform:translate3d(13vw,0,0)scale(1)rotateX(75deg)rotate(30deg)}}@-o-keyframes fall{0%{opacity:0;-o-transform:translate3d(13vw,10vw,0)scale(.25)rotateX(0)rotate(30deg)}32%{-o-transform:translate3d(13vw,0,0)scale(.35,.75)rotateX(0)rotate(30deg)}33%{-o-transform:translate3d(13vw,0,0)scale(.85,.35)rotateX(0)rotate(30deg)}35%,100%{opacity:1;-o-transform:translate3d(13vw,0,0)scale(1)rotateX(75deg)rotate(30deg)}}@keyframes fall{0%{opacity:0;transform:translate3d(13vw,10vw,0)scale(.25)rotateX(0)rotate(30deg)}32%{transform:translate3d(13vw,0,0)scale(.35,.75)rotateX(0)rotate(30deg)}33%{transform:translate3d(13vw,0,0)scale(.85,.35)rotateX(0)rotate(30deg)}35%,100%{opacity:1;transform:translate3d(13vw,0,0)scale(1)rotateX(75deg)rotate(30deg)}}
@-webkit-keyframes wave{0%,32%{transform:rotate(-45deg)translate3d(var(--rdist),calc(var(--s)*3vw),0)scale(x)}35%{transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@-moz-keyframes wave{0%,32%{transform:rotate(-45deg)translate3d(var(--rdist),calc(var(--s)*3vw),0)scale(x)}35%{transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@-ms-keyframes wave{0%,32%{transform:rotate(-45deg)translate3d(var(--rdist),calc(var(--s)*3vw),0)scale(x)}35%{transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@-o-keyframes wave{0%,32%{transform:rotate(-45deg)translate3d(var(--rdist),calc(var(--s)*3vw),0)scale(x)}35%{transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@keyframes wave{0%,32%{transform:rotate(-45deg)translate3d(var(--rdist),calc(var(--s)*3vw),0)scale(x)}35%{transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}