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

.spRing,.spRing div{background:var(--bk)}
.spRing,.spRing div{-webkit-transform:var(--nLab);-moz-transform:var(--nLab);-ms-transform:var(--nLab);-o-transform:var(--nLab);transform:var(--nLab)}
.spRing{-webkit-transition:var(--trans);-moz-transition:var(--trans);-o-transition:var(--trans);transition:var(--trans)}
.spRing,.spRing div{-webkit-animation:var(--anim);-moz-animation:var(--anim);-ms-animation:var(--anim);-o-animation:var(--anim);animation:var(--anim)}

.goRot{--goRot:-360deg}
.intRot{--goRot:1440deg}
.spRing,.spRing div{--rfall:4s}

.spRing{--bk:#000;--rdist:calc(var(--f)*1vw);--pF:perspective(20vw);--goneRot:1000s;--anim:fall var(--rfall) ease-in infinite;padding:calc(var(--rdist) + 1vw);border-radius:50%;-webkit-filter:contrast(19);-moz-filter:contrast(19);-ms-filter:contrast(19);-o-filter:contrast(19);filter:contrast(19)}

.spRing div{--bk:dodgerblue;--rdrop:calc(var(--s)*1vw);--adrop:var(--k)*1turn/var(--n);--nLab:rotate(calc(var(--goRot) - .25turn))translate(var(--rdist))scale(0,calc(var(--s)*.5));--anim:wave var(--rfall) ease-out infinite;top:50%;left:50%;margin:calc(var(--rdrop)*-1);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%{-webkit-transform:var(--pF)translateY(-100vh)scale(.25)rotateX(0)}32%{-webkit-transform:var(--pF)translateY(48vh)scale(.35,.75)rotateX(0)}33%{-webkit-transform:var(--pF)translateY(49vh)scale(.85,.35)rotateX(0)}35%,100%{-webkit-transform:var(--pF)translateY(50vh)scale(1)rotateX(130deg)}}@-moz-keyframes fall{0%{-moz-transform:var(--pF)translateY(-100vh)scale(.25)rotateX(0)}32%{-moz-transform:var(--pF)translateY(48vh)scale(.35,.75)rotateX(0)}33%{-moz-transform:var(--pF)translateY(49vh)scale(.85,.35)rotateX(0)}35%,100%{-moz-transform:var(--pF)translateY(50vh)scale(1)rotateX(130deg)}}@-ms-keyframes fall{0%{-ms-transform:var(--pF)translateY(-100vh)scale(.25)rotateX(0)}32%{-ms-transform:var(--pF)translateY(48vh)scale(.35,.75)rotateX(0)}33%{-ms-transform:var(--pF)translateY(49vh)scale(.85,.35)rotateX(0)}35%,100%{-ms-transform:var(--pF)translateY(50vh)scale(1)rotateX(130deg)}}@-o-keyframes fall{0%{-o-transform:var(--pF)translateY(-100vh)scale(.25)rotateX(0)}32%{-o-transform:var(--pF)translateY(48vh)scale(.35,.75)rotateX(0)}33%{-o-transform:var(--pF)translateY(49vh)scale(.85,.35)rotateX(0)}35%,100%{-o-transform:var(--pF)translateY(50vh)scale(1)rotateX(130deg)}}@keyframes fall{0%{transform:var(--pF)translateY(-100vh)scale(.25)rotateX(0)}32%{transform:var(--pF)translateY(48vh)scale(.35,.75)rotateX(0)}33%{transform:var(--pF)translateY(49vh)scale(.85,.35)rotateX(0)}35%,100%{transform:var(--pF)translateY(50vh)scale(1)rotateX(130deg)}}
@-webkit-keyframes wave{0%,32%{border-radius:.25vw 25% 25% 75%;transform:rotate(-45deg)translateY(calc(var(--s)*1vw))scale(x)}35%{border-radius:50%;transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@-moz-keyframes wave{0%,32%{border-radius:.25vw 25% 25% 75%;transform:rotate(-45deg)translateY(calc(var(--s)*1vw))scale(x)}35%{border-radius:50%;transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@-ms-keyframes wave{0%,32%{border-radius:.25vw 25% 25% 75%;transform:rotate(-45deg)translateY(calc(var(--s)*1vw))scale(x)}35%{border-radius:50%;transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@-o-keyframes wave{0%,32%{border-radius:.25vw 25% 25% 75%;transform:rotate(-45deg)translateY(calc(var(--s)*1vw))scale(x)}35%{border-radius:50%;transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}@keyframes wave{0%,32%{border-radius:.25vw 25% 25% 75%;transform:rotate(-45deg)translateY(calc(var(--s)*1vw))scale(x)}35%{border-radius:50%;transform:rotate(calc(var(--adrop) - 45deg))translate(0)scale(1)}}