SVG Animation - animating a circle along an svg path

README.md

SVG Animation - animating a circle along an svg path

Support

support.css

.container {
  width: 15%;
  margin: 5em auto;
}

/* svg path {
  stroke: #000000;
  stroke-width: 1.5px;
}  */

.loop {
  stroke: #000000;
  stroke-width: 1px;
}  

@keyframes offset {
  to {
    stroke-dashoffset: 0px;
  }
}

.loop {
  animation: offset 2s linear forwards;
}

.loop-circle {
  transform: translate(-300, -300);
}

/* .arrow-l, .arrow-r, {
  animation: offset 2s linear forwards;
} */


/* .loop {
  stroke-dasharray: 590px;
  stroke-dashoffset: 590px;
} */

support.html

<div class="container">
	<svg id="_3.support" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 227.6 267.3">
    
    <path class="bg" d="M175.9,201.7v21.7a5.7,5.7,0,0,1-9.8,4.1l-11.8-11.8a8.6,8.6,0,0,0-8.9-2.1A109.8,109.8,0,1,1,179.1,195,7.7,7.7,0,0,0,175.9,201.7Z" fill="#e5e5e5"/>
    
    <path class="loop-l" d="M3.8,109.8a44,44,0,0,1,75-31l24.1,24.1,6.9,6.9,29.1,29.1,2,2a43.9,43.9,0,1,0,0-62.1l-23.1,23.1-8,8L80.7,138.9l-2,2a44,44,0,0,1-75-31.1Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" id="loop-l"/>

    <path class="loop-r" d="M215.9,109.4a44,44,0,0,0-75-30.6l-23.1,23.1-8,8L80.7,138.9l-2,2a43.9,43.9,0,1,1,0-62.1l24.1,24.1,6.9,6.9,29.1,29.1,2,2a43.9,43.9,0,0,0,75-31.5Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" id="loop-r"/>

    <circle class="loop-circle" cx="" cy="" r="6" fill="#97d2ad">
      <animateMotion dur="6s" repeatCount="indefinite">
        <mpath xlink:href="#loop-l"/>
      </animateMotion>
    </circle>
    
    <circle class="loop-circle" cx="" cy="" r="6" fill="#97d2ad">
      <animateMotion dur="6s" repeatCount="indefinite">
        <mpath xlink:href="#loop-r"/>
      </animateMotion>
    </circle>
    
    

  </svg>
</div>