Change direction of SVG animation

Question

I saw this SVG animation and I'm wondering how to alter the direction that the line is erased in; currently the line retracts from the last point it is drawn, however I want the reverse; for the line to erase itself from the point where it first started to draw (so that it looks more like a loading animation).

I see that the animation property on .path has a value of infinite, but I'm not sure how the direction is specified.

The HTML is

<div class="bg">  
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">

  <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/>

  <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/>

  </svg>
</div>

And the CSS is

body {
  background-color: #fff;
}

.bg  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
  animation: draw 3.5s infinite;
}

 @keyframes draw {
  50% {
    stroke-dashoffset: 0;
  }
}

Answer 1

I like your idea of making this an loading animation:

CODEPEN

Now what i did:

changed the animation start stop point

@keyframes draw {
  100% {
    stroke-dashoffset: -500;
  }
}

Why -500?
Because this is the value of the dash-array.
This is defined in the <svg>: dasharray="500"

Changed this value in the inner most path. It was only 300

I added a linear animation

animation: draw 5s infinite linear;

The default is ease. I found the animation has better consistency with a linear animation.

NOTE

dashoffset=500 <- makes the animation start without the dash/stroke

Answer 2

stroke-dasharray can be a list of white space separated dashes and gaps, so you could do something like this:

var svgPath = document.getElementById('svgPath');
var pathLength = svgPath.getTotalLength();
var offset = 0;

function offsetPath() {
  requestAnimationFrame(offsetPath);
  offset += 0.1;
  var dasharray = 0 + ' ' + offset + ' ' + (pathLength - offset);
  svgPath.setAttribute('stroke-dasharray', dasharray);
}
requestAnimationFrame(offsetPath);

<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">

  <path id="svgPath" class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="100 100 100" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"
  />

</svg>