html,
body {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  transition: 1s filter ease-in;
  padding: 0px;
  background-color: #111;
  box-sizing: border-box;
  filter: blur(3px);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

path {
  fill: transparent !important;
  stroke-dasharray: 5;
  stroke-width: 0.5px;
  stroke-linecap: round;
  filter: drop-shadow(0px 0px 2px #fff);
  stroke: #fff !important;

}
.body--superbro{
  animation: superbro 5s linear infinite;
}
.body--superbro path:nth-of-type(1) {
  stroke: rgb(59, 187, 155) !important;
}

.body--superbro path:nth-of-type(2) {
  stroke: rgb(61, 59, 187) !important;
}

.body--superbro path:nth-of-type(3) {
  stroke: rgb(176, 59, 187) !important;
}

.body--superbro path:nth-of-type(4) {
  stroke: rgb(187, 59, 140) !important;
}

path:nth-of-type(1) {
  animation: path0default 16s linear 0s infinite;
}

path:nth-of-type(2) {
  animation: path1default 16s linear 0s infinite;
}

path:nth-of-type(3) {
  animation: path2default 16s linear 0s infinite;
}

path:nth-of-type(4) {
  animation: path3default 16s linear 0s infinite;
}

.body--invert path:nth-of-type(1) {
  animation: path0update 5s linear 0s infinite;
  stroke-dasharray: 282.65618896484375;
}

.body--invert path:nth-of-type(2) {
  animation: path1update 5s linear 0s infinite;
  stroke-dasharray: 281.333251953125;
}

.body--invert path:nth-of-type(3) {
  animation: path2update 5s linear 0s infinite;
  stroke-dasharray: 141.9199981689453;
}

.body--invert path:nth-of-type(4) {
  animation: path3update 5s linear 0s infinite;
  stroke-dasharray: 141.35031127929688;
}

/* [0]282.65618896484375 */
/* [1]281.333251953125 */
/* [2]141.9199981689453 */
/* [3]141.35031127929688 */

@keyframes path0default {
  0% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dashoffset: 282.65618896484375;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes path1default {
  0% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dashoffset: 281.333251953125;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes path2default {
  0% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dashoffset: 141.9199981689453;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes path3default {
  0% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dashoffset: 141.35031127929688;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes path0update {
  0% {
    stroke-dashoffset: 0;

  }

  50% {
    stroke-dashoffset: 282.65618896484375;

  }

  100% {
    stroke-dashoffset: 565.312378;
  }
}

@keyframes path1update {
  0% {
    stroke-dashoffset: 0;

  }

  50% {
    stroke-dashoffset: 281.333251953125*;

  }

  100% {
    stroke-dashoffset: 562.666504;
  }
}

@keyframes path2update {
  0% {
    stroke-dashoffset: 0;

  }

  50% {
    stroke-dashoffset: 141.9199981689453;

  }

  100% {
    stroke-dashoffset: 283.839996;
  }
}

@keyframes path3update {
  0% {
    stroke-dashoffset: 0;

  }

  50% {
    stroke-dashoffset: 141.35031127929688;

  }

  100% {
    stroke-dashoffset: 282.700623;
  }
}

@keyframes superbro {
  0% {
    filter: blur(3px) hue-rotate(0deg);
  }

  100% {
    filter: blur(3px) hue-rotate(360deg);
  }
}