SVG Animation - animating along path

README.md

SVG Animation - animating along path

Community

community.css

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

community.html

<div class="container">
  <svg id="_3.support" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 227.6 267.3">
    
    <circle cx="112.4" cy="134.7" r="109.7" fill="#e5e5e5"/>

    <g id="network">
      <line x1="128.8" y1="134.7" x2="157.8" y2="134.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="46.9" y1="107.6" x2="69.9" y2="130.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M112.4,89.4a13.1,13.1,0,0,0-4.2-10.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="112.4" y1="118.3" x2="112.4" y2="89.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="78.7" y1="49.7" x2="108.2" y2="79.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M69.9,130.5A13.1,13.1,0,0,0,80,134.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="96" y1="134.7" x2="80" y2="134.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="95" y1="30.1" x2="95" y2="60" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="99.2" y1="70.2" x2="108.2" y2="79.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M95,60a13.1,13.1,0,0,0,4.2,10.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M157.8,134.7a13.1,13.1,0,0,1,10.2,4.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="116.6" y1="88.6" x2="139.6" y2="65.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M88.6,132.6a6.6,6.6,0,0,0,5.1,2.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="88.6" y1="132.6" x2="85.7" y2="129.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M81.5,119.6a13.1,13.1,0,0,0,4.2,10.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="81.5" y1="119.6" x2="81.5" y2="95.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M77.3,85.4a13.1,13.1,0,0,1,4.2,10.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="69.2" y1="154.2" x2="69.2" y2="215.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M69.2,154.2a6.6,6.6,0,0,1,2.1-5.1" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M105.3,252.8V220.4a13.1,13.1,0,0,0-4.2-10.2L73.4,182.6a13.1,13.1,0,0,1-4.2-10.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M140.4,128.9a5.7,5.7,0,0,1-5.7,5.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="140.4" y1="117.2" x2="140.4" y2="128.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="140.4" y1="117.2" x2="140.4" y2="106.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M140.4,106.9a13.1,13.1,0,0,1,4.2-10.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="170" y1="71.3" x2="144.6" y2="96.8" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="157.8" y1="134.7" x2="174.4" y2="134.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M184.6,130.5a13.1,13.1,0,0,1-10.2,4.2" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="184.6" y1="130.5" x2="213.5" y2="101.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="30.1" y1="38.2" x2="77.3" y2="85.4" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <line x1="197.4" y1="168.3" x2="167.9" y2="138.9" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
      <path d="M132.1,194.6l-15.4-15.4a13.1,13.1,0,0,1-4.2-10.2v-18" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75"/>
    </g>

    <g id="node-green">
        <path d="M137.6,3.6a3.7,3.7,0,0,1,7.4,0,3.2,3.2,0,0,1,0,.3,3.7,3.7,0,1,1-7.4.1A3.5,3.5,0,0,1,137.6,3.6Z" fill="#97d2ad"/>
        <circle cx="208.3" cy="229.3" r="9.2" transform="translate(-101.2 215) rotate(-45.1)" fill="#97d2ad"/>
        <path d="M6.3,148.4a3.7,3.7,0,0,0-5.2,5.2l.2.3a3.7,3.7,0,0,0,5.3-5.2Z" fill="#97d2ad"/>
    </g>     

    <path class="loop-a" d="M128.8,134.7h15.4a13.1,13.1,0,0,1,7.6,2.1,16.4,16.4,0,0,1,2.5,2.1l9.3,9.3a12.9,12.9,0,0,1,4.2,8.9q0,.6,0,1.3V183a13.1,13.1,0,0,0,4.2,10.2l29.6,29.6" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" id="loop-a"/>

    <path class="loop-b" d="M138.7,6.6l-8.5,8.5a6.6,6.6,0,0,0-2.1,5.1v54a6.6,6.6,0,0,1-2.1,5.1l-9.4,9.4a13.1,13.1,0,0,0-4.2,10.2v19.5" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" id="loop-b"/>

    <path class="loop-c" d="M96,134.7H88.7a6.6,6.6,0,0,0-5.1,2.1L71.3,149.1a6.6,6.6,0,0,1-5.1,2.1H7.7" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" id="loop-c"/>

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

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

    <g id=node>
      <path d="M79.8,46.4a3.7,3.7,0,0,0-7.4,0,3.2,3.2,0,0,0,0,.3,3.7,3.7,0,1,0,7.4.1A3.4,3.4,0,0,0,79.8,46.4Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M200.4,167.3a3.7,3.7,0,0,1,0,7.4H200a3.7,3.7,0,0,1-.1-7.4Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M138.3,62.1a3.7,3.7,0,0,1,7.4,0,3.2,3.2,0,0,1,0,.3,3.7,3.7,0,1,1-7.4.1A3.4,3.4,0,0,1,138.3,62.1Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M72.9,220a3.7,3.7,0,0,1-7.4,0,3.2,3.2,0,0,1,0-.3,3.7,3.7,0,1,1,7.4-.1A3.5,3.5,0,0,1,72.9,220Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M46.7,101.6a3.7,3.7,0,0,0-5.2,5.2l.2.3a3.7,3.7,0,1,0,5.3-5.2Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M98.7,25.8a3.7,3.7,0,0,0-7.4,0,3.2,3.2,0,0,0,0,.3,3.7,3.7,0,0,0,7.4.1A3.5,3.5,0,0,0,98.7,25.8Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M131.1,197.9a3.7,3.7,0,0,0,7.4,0,3.2,3.2,0,0,0,0-.3,3.7,3.7,0,1,0-7.4-.1A3.5,3.5,0,0,0,131.1,197.9Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <circle cx="23.6" cy="31.7" r="9.2" transform="translate(-15.5 26) rotate(-45.1)" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M109,256.9a3.7,3.7,0,0,1-7.4,0,3.2,3.2,0,0,1,0-.3,3.7,3.7,0,1,1,7.4-.1A3.5,3.5,0,0,1,109,256.9Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <circle cx="176.5" cy="64.8" r="9.2" transform="translate(6 144.1) rotate(-45.1)" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <path d="M212.5,98.6a3.7,3.7,0,0,1,7.4,0,3.2,3.2,0,0,1,0,.3,3.7,3.7,0,0,1-7.4.1A3.4,3.4,0,0,1,212.5,98.6Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
      <circle cx="112.4" cy="134.7" r="16.4" transform="translate(-53.6 78) rotate(-31.3)" fill="#97d2ad" stroke="#231f20" stroke-miterlimit="10"/>
      <path d="M6.3,148.4a3.7,3.7,0,0,0-5.2,5.2l.2.3a3.7,3.7,0,0,0,5.3-5.2Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
      <path d="M137.6,3.6a3.7,3.7,0,0,1,7.4,0,3.2,3.2,0,0,1,0,.3,3.7,3.7,0,1,1-7.4.1A3.5,3.5,0,0,1,137.6,3.6Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
      <circle cx="208.3" cy="229.3" r="9.2" transform="translate(-101.2 215) rotate(-45.1)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
    </g>


  </svg>
</div>