@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Homemade+Apple&family=Sacramento&display=swap");

​

html, body {

  width: 100%;

  height: 100%;

  display: flex;

  font-family: "Bangers", cursive;

  background: #000;

}

​

svg {

  width: 600px;

  height: 300px;

  margin: auto;

}

​

svg text {

  text-transform: uppercase;

  animation: stroke 5s infinite alternate;

  letter-spacing: 10px;

  font-size: 150px;

}

@keyframes stroke {

  0% {

    fill: rgba(72, 138, 20, 0);

    stroke: rgba(54, 95, 160, 1);

    stroke-dashoffset: 25%;

    stroke-dasharray: 0 50%;

    stroke-width: 0.8;

  }

  50% {

    fill: rgba(72, 138, 20, 0);

    stroke: rgba(54, 95, 160, 1);

    stroke-width: 1.2;

  }

  70% {

    fill: rgba(72, 138, 20, 0);

    stroke: rgba(54, 95, 160, 1);

    stroke-width: 1.5;

  }

  90%,

  100% {

    fill: rgba(72, 138, 204, 1);

    stroke: rgba(54, 95, 160, 0);

    stroke-dashoffset: -25%;

    stroke-dasharray: 50% 0;

    stroke-width: 0;

  }

}

​