.background-anim span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  .background-anim span:nth-child(1) {
    color: #e8cfd5;
    top: 86%;
    left: 33%;
    animation-duration: 13s;
    animation-delay: -6.9s;
    transform-origin: 22vw -17vh;
    box-shadow: 40vmin 0 6.6393637989vmin currentColor; }
  .background-anim span:nth-child(2) {
    color: #d7adb7;
    top: 95%;
    left: 96%;
    animation-duration: 13.7s;
    animation-delay: -5.6s;
    transform-origin: -7vw -2vh;
    box-shadow: 40vmin 0 6.696770561vmin currentColor; }
  .background-anim span:nth-child(3) {
    color: #d7adb7;
    top: 86%;
    left: 93%;
    animation-duration: 10.6s;
    animation-delay: -13.4s;
    transform-origin: 11vw -11vh;
    box-shadow: 40vmin 0 14.4548763797vmin currentColor; }
  .background-anim span:nth-child(4) {
    color: #e8cfd5;
    top: 59%;
    left: 34%;
    animation-duration: 11.5s;
    animation-delay: -7.6s;
    transform-origin: 23vw 19vh;
    box-shadow: -40vmin 0 10.7961893503vmin currentColor; }
  .background-anim span:nth-child(5) {
    color: #d7adb7;
    top: 19%;
    left: 69%;
    animation-duration: 10.3s;
    animation-delay: -8.5s;
    transform-origin: -18vw 12vh;
    box-shadow: 40vmin 0 10.1555329925vmin currentColor; }
  .background-anim span:nth-child(6) {
    color: #e8cfd5;
    top: 50%;
    left: 68%;
    animation-duration: 12s;
    animation-delay: -7.1s;
    transform-origin: -11vw 1vh;
    box-shadow: -40vmin 0 12.5583724699vmin currentColor; }
  .background-anim span:nth-child(7) {
    color: #e8cfd5;
    top: 36%;
    left: 24%;
    animation-duration: 11.8s;
    animation-delay: -6.7s;
    transform-origin: -4vw 19vh;
    box-shadow: 40vmin 0 6.062295451vmin currentColor; }
  .background-anim span:nth-child(8) {
    color: #d7adb7;
    top: 79%;
    left: 63%;
    animation-duration: 12.9s;
    animation-delay: -8.6s;
    transform-origin: 17vw -6vh;
    box-shadow: -40vmin 0 13.3561724911vmin currentColor; }
  .background-anim span:nth-child(9) {
    color: #e8cfd5;
    top: 35%;
    left: 16%;
    animation-duration: 10.2s;
    animation-delay: -7.5s;
    transform-origin: 24vw 5vh;
    box-shadow: 40vmin 0 6.2904530173vmin currentColor; }
  .background-anim span:nth-child(10) {
    color: #e0bec6;
    top: 58%;
    left: 94%;
    animation-duration: 11.8s;
    animation-delay: -10.7s;
    transform-origin: -16vw 24vh;
    box-shadow: -40vmin 0 5.9774438788vmin currentColor; }
  .background-anim span:nth-child(11) {
    color: #d7adb7;
    top: 9%;
    left: 50%;
    animation-duration: 11.8s;
    animation-delay: -8.5s;
    transform-origin: 8vw 14vh;
    box-shadow: 40vmin 0 7.544562739vmin currentColor; }
  .background-anim span:nth-child(12) {
    color: #e0bec6;
    top: 35%;
    left: 82%;
    animation-duration: 11s;
    animation-delay: -11.6s;
    transform-origin: 4vw 10vh;
    box-shadow: 40vmin 0 10.8127780405vmin currentColor; }
  .background-anim span:nth-child(13) {
    color: #e0bec6;
    top: 84%;
    left: 17%;
    animation-duration: 12.7s;
    animation-delay: -7.7s;
    transform-origin: -21vw -7vh;
    box-shadow: 40vmin 0 10.3612835081vmin currentColor; }
  .background-anim span:nth-child(14) {
    color: #e0bec6;
    top: 37%;
    left: 89%;
    animation-duration: 15.7s;
    animation-delay: -8.9s;
    transform-origin: 10vw 1vh;
    box-shadow: 40vmin 0 11.7025989384vmin currentColor; }
  .background-anim span:nth-child(15) {
    color: #e8cfd5;
    top: 48%;
    left: 23%;
    animation-duration: 14.7s;
    animation-delay: -2s;
    transform-origin: 6vw -22vh;
    box-shadow: -40vmin 0 8.0754291197vmin currentColor; }
  .background-anim span:nth-child(16) {
    color: #e0bec6;
    top: 69%;
    left: 13%;
    animation-duration: 14.7s;
    animation-delay: -11.5s;
    transform-origin: -8vw 1vh;
    box-shadow: 40vmin 0 11.9371675015vmin currentColor; }
  .background-anim span:nth-child(17) {
    color: #e0bec6;
    top: 80%;
    left: 74%;
    animation-duration: 11.3s;
    animation-delay: -14.3s;
    transform-origin: -18vw 17vh;
    box-shadow: -40vmin 0 10.9060512549vmin currentColor; }
  .background-anim span:nth-child(18) {
    color: #e8cfd5;
    top: 13%;
    left: 15%;
    animation-duration: 15.4s;
    animation-delay: -12s;
    transform-origin: 21vw -10vh;
    box-shadow: -40vmin 0 5.3095849726vmin currentColor; }
  .background-anim span:nth-child(19) {
    color: #e0bec6;
    top: 41%;
    left: 76%;
    animation-duration: 14.7s;
    animation-delay: -14s;
    transform-origin: 6vw -8vh;
    box-shadow: -40vmin 0 13.0293375112vmin currentColor; }
  .background-anim span:nth-child(20) {
    color: #d7adb7;
    top: 22%;
    left: 85%;
    animation-duration: 10.4s;
    animation-delay: -14.5s;
    transform-origin: 18vw -22vh;
    box-shadow: 40vmin 0 5.7925250642vmin currentColor; }

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg); } }
.mvline, .mvline::before, .mvline::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.mvline {
  width: 100%;
  height: 100px;
  margin: auto; }
  .mvline::before, .mvline::after {
    color: #8c9bf9;
    content: '';
    z-index: -1;
    margin: -1%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite; }
  .mvline::before {
    animation-delay: -4s; }

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 204px, 2px, 0px); }
  25% {
    clip: rect(0px, 2px, 204px, 0px); }
  50% {
    clip: rect(202px, 204px, 204px, 0px); }
  75% {
    clip: rect(0px, 204px, 204px, 202px); } }