/* Demo works in latest Firefox and Safari. In Chrome and Opera with experimental flag. */
BODY {
  background: #000;
}


path {
  fill: none;
  stroke: cyan;
  stroke-width: 22;
  color: transparent;

  -webkit-animation: pulsate 20s infinite alternate;
  -moz-animation: pulsate 20s infinite alternate;;
   animation: pulsate 20s infinite alternate;

/*
  -webkit-animation: colors 0.4s infinite;
          animation: colors 0.4s infinite;
*/

}

@-webkit-keyframes pulsate {
    0%   {stroke: aqua}
    10%  {stroke: deeppink}
    20%  {stroke: skyblue}
    40%  {stroke: aqua}
    60%  {stroke: lavender}
    80%  {stroke: turquoise}
    100% {stroke: cyan}
}
@-moz-keyframes pulsate {
    0%   {stroke: aqua}
    10%  {stroke: deeppink}
    20%  {stroke: skyblue}
    40%  {stroke: aqua}
    60%  {stroke: lavender}
    80%  {stroke: turquoise}
    100% {stroke: cyan}
}
@keyframes pulsate {
    0%   {stroke: aqua}
    10%  {stroke: deeppink}
    20%  {stroke: skyblue}
    40%  {stroke: aqua}
    60%  {stroke: lavender}
    80%  {stroke: turquoise}
    100% {stroke: cyan}
}

/*
path:nth-child(5n + 1) {
  stroke: aqua;
  -webkit-animation-delay: -0.08s;
          animation-delay: -0.08s;
}
path:nth-child(5n + 2) {
  stroke: deeppink;
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
path:nth-child(5n + 3) {
  stroke: skyblue;
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}
path:nth-child(5n + 4) {
  stroke: aqua;
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
path:nth-child(5n + 5) {
  stroke: lavender;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

@-webkit-keyframes colors {
  100% {
    stroke: turquoise;
  }
  40% {
    stroke: deeppink;
  }
  60% {
    stroke: cyan;
  }
  80% {
    stroke: lavender;
  }
  100% {
    stroke: aqua;
  }
}

@keyframes colors {
  100% {
    stroke: turquoise;
  }
  40% {
    stroke: deeppink;
  }
  60% {
    stroke: cyan;
  }
  80% {
    stroke: lavender;
  }
  100% {
    stroke: aqua;
  }
}
*/

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 199px;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.multy {
  mix-blend-mode: multiply;
}

.bg2 {
	background-image: url(https://media.giphy.com/media/3osxYuoJPUtJQrzoUU/giphy.gif);
	background-size: cover;
	filter: brightness(150%);
	color: transparent;
	width: 200px;
	height: 199px;
	-moz-background-clip: bg;
	-webkit-background-clip: bg;
	text-transform: uppercase;
	font-size: 120px;
	line-height: .75;
	margin: 0px 0;
}