body {
  background: rgba(24,38,35,0);
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
svg {
  width: 100vw;
  height: 100vh;
}
.one,
.two {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.one {
  top: 50%;
  left: -50%;
  -webkit-transform: scale(1.82);
          transform: scale(1.82);
  mix-blend-mode: color-dodge;
}
.two {
  top: 0%;
  left: 0%;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  mix-blend-mode: hard-light;
  -webkit-filter: contrast(2) brightness(1.2);
          filter: contrast(2) brightness(1.2);
}
.f2,
.f7 {
  fill: #ffca80;
}
.f3,
.f8 {
  fill: #4d6aff;
}
.f4,
.f9 {
  fill: rgba(26,255,45,0.5);
}
.f5,
.f10 {
  fill: #e60099;
}
.f2 {
  -webkit-animation: f2 cubic-bezier(0.01, 12.33, 1, -2.33) 22s 0.2s infinite alternate;
          animation: f2 cubic-bezier(0.01, 12.33, 1, -2.33) 22s 0.2s infinite alternate;
}
.f3 {
  -webkit-animation: f3 cubic-bezier(0.1, 5.33, 1, -12.33) 23s 0.7s infinite alternate;
          animation: f3 cubic-bezier(0.1, 5.33, 1, -12.33) 23s 0.7s infinite alternate;
}
.f4 {
  -webkit-animation: f4 cubic-bezier(0.01, 12.33, 1, -12.33) 24s 1.2s infinite alternate;
          animation: f4 cubic-bezier(0.01, 12.33, 1, -12.33) 24s 1.2s infinite alternate;
}
.f5 {
  -webkit-animation: f5 cubic-bezier(0.1, 3.33, 1, -12.33) 25s 1.7s infinite alternate;
          animation: f5 cubic-bezier(0.1, 3.33, 1, -12.33) 25s 1.7s infinite alternate;
}
.f7 {
  -webkit-animation: f7 cubic-bezier(1, -0.33, 0.1, 12.33) 56s 1.7s infinite alternate;
          animation: f7 cubic-bezier(1, -0.33, 0.1, 12.33) 56s 1.7s infinite alternate;
}
.f8 {
  -webkit-animation: f8 cubic-bezier(1, -0.33, 0.01, 12.33) 55s 1.2s infinite alternate;
          animation: f8 cubic-bezier(1, -0.33, 0.01, 12.33) 55s 1.2s infinite alternate;
}
.f9 {
  -webkit-animation: f9 cubic-bezier(1, -0.33, 0.1, 12.33) 54s 0.7s infinite alternate;
          animation: f9 cubic-bezier(1, -0.33, 0.1, 12.33) 54s 0.7s infinite alternate;
}
.f10 {
  -webkit-animation: f10 cubic-bezier(1, -0.33, 0.01, 12.33) 53s 0.2s infinite alternate;
          animation: f10 cubic-bezier(1, -0.33, 0.01, 12.33) 53s 0.2s infinite alternate;
}
@-webkit-keyframes f2 {
  25% {
    -webkit-transform: rotate(360deg) translateX(80%);
            transform: rotate(360deg) translateX(80%);
    -webkit-filter: hue-rotate(20deg);
            filter: hue-rotate(20deg);
  }
}
@keyframes f2 {
  25% {
    -webkit-transform: rotate(360deg) translateX(80%);
            transform: rotate(360deg) translateX(80%);
    -webkit-filter: hue-rotate(20deg);
            filter: hue-rotate(20deg);
  }
}
@-webkit-keyframes f3 {
  50% {
    -webkit-transform: rotate(720deg) translateX(20%);
            transform: rotate(720deg) translateX(20%);
    -webkit-filter: hue-rotate(80deg);
            filter: hue-rotate(80deg);
  }
}
@keyframes f3 {
  50% {
    -webkit-transform: rotate(720deg) translateX(20%);
            transform: rotate(720deg) translateX(20%);
    -webkit-filter: hue-rotate(80deg);
            filter: hue-rotate(80deg);
  }
}
@-webkit-keyframes f4 {
  75% {
    -webkit-transform: rotate(1080deg) translateX(50%);
            transform: rotate(1080deg) translateX(50%);
    -webkit-filter: hue-rotate(120deg);
            filter: hue-rotate(120deg);
  }
}
@keyframes f4 {
  75% {
    -webkit-transform: rotate(1080deg) translateX(50%);
            transform: rotate(1080deg) translateX(50%);
    -webkit-filter: hue-rotate(120deg);
            filter: hue-rotate(120deg);
  }
}
@-webkit-keyframes f5 {
  to {
    -webkit-transform: rotate(1440deg) translateX(60%);
            transform: rotate(1440deg) translateX(60%);
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
}
@keyframes f5 {
  to {
    -webkit-transform: rotate(1440deg) translateX(60%);
            transform: rotate(1440deg) translateX(60%);
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
}
@-webkit-keyframes f7 {
  to {
    -webkit-transform: rotate(-1440deg);
            transform: rotate(-1440deg);
  }
}
@keyframes f7 {
  to {
    -webkit-transform: rotate(-1440deg);
            transform: rotate(-1440deg);
  }
}
@-webkit-keyframes f8 {
  75% {
    -webkit-transform: rotate(-1080deg);
            transform: rotate(-1080deg);
  }
}
@keyframes f8 {
  75% {
    -webkit-transform: rotate(-1080deg);
            transform: rotate(-1080deg);
  }
}
@-webkit-keyframes f9 {
  50% {
    -webkit-transform: rotate(-720deg);
            transform: rotate(-720deg);
    -webkit-filter: hue-rotate(130deg);
            filter: hue-rotate(130deg);
  }
}
@keyframes f9 {
  50% {
    -webkit-transform: rotate(-720deg);
            transform: rotate(-720deg);
    -webkit-filter: hue-rotate(130deg);
            filter: hue-rotate(130deg);
  }
}
@-webkit-keyframes f10 {
  25% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
}
@keyframes f10 {
  25% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
}