SVG Dash Stroke Offset Animation Test

index.html

<div class="c">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
     <path class="trace" fill="transparent" stroke="red" stroke-width="4" d="M21 25s91-15 121 17-77 78-77 78 141 2 97 27 24 32 24 32"/>
  </svg>
</div>

style.css

div.c {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

path.trace {
  stroke-dasharray: 600;
  animation: indy 5s linear reverse infinite;
}
@keyframes indy {
  0% {
    stroke-dashoffset: 0; 
  }
  100% {
    stroke-dashoffset: 1000;
  }
}

svg-dash-stroke-offset-animation-test.markdown

SVG Dash Stroke Offset Animation Test

A Pen by Graham F. Scott on CodePen.

License.