Animate (loop) a dashed SVG line-CodePudding

After finishing the animation, I need to keep the dotted arrow animated.. like this: https://www.youtube.com/watch?v=rZpR9DyM_qs

I tried to add:

<animate attributeName="d" from="M0 0 C0 0, 0 0, 0 0" to="M0 0 C47.85 -13.4, 239.25 -67.01, 287.1 -80.41"
      begin="1000ms" dur="900ms" fill="freeze" repeatCount="indefinite" />'

but it's starts from the beginning.. My code:

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 347.09505655750377 140.4105292643194"
 width="694.1901131150075" height="280.8210585286388">

 <rect x="0" y="0" width="347.09505655750377" height="140.4105292643194" fill="#ffffff" />
 <g stroke-linecap="round">
   <g transform="translate(30 110.4105292643194) rotate(0 143.54752827875188 -40.2052646321597)">
     <path d="M0 0 C0 0, 0 0, 0 0" stroke="#495057" stroke-width="4.5" fill="none" stroke-dasharray="8 12" opacity="0">
       <animate attributeName="d" from="M0 0 C0 0, 0 0, 0 0" to="M0 0 C47.85 -13.4, 239.25 -67.01, 287.1 -80.41"
         begin="1000ms" dur="900ms" fill="freeze" />
       <animate attributeName="opacity" from="1" to="1" begin="1000ms" dur="900ms" fill="freeze" /> 
     </path>
   </g>
   <g transform="translate(30 110.4105292643194) rotate(0 143.54752827875188 -40.2052646321597)">
     <path d="M262.72 -62.93 C262.72 -62.93, 262.72 -62.93, 262.72 -62.93" stroke="#495057" stroke-width="4.5"
       fill="none" opacity="0">
       <animate attributeName="d" from="M262.72 -62.93 C262.72 -62.93, 262.72 -62.93, 262.72 -62.93"
         to="M262.72 -62.93 C268.12 -66.8, 273.53 -70.68, 287.1 -80.41" begin="1900ms" dur="300ms" fill="freeze" />
       <animate attributeName="opacity" from="1" to="1" begin="1900ms" dur="300ms" fill="freeze" />
     </path>
   </g>
   <g transform="translate(30 110.4105292643194) rotate(0 143.54752827875188 -40.2052646321597)">
     <path d="M257.18 -82.69 C257.18 -82.69, 257.18 -82.69, 257.18 -82.69" stroke="#495057" stroke-width="4.5"
       fill="none" opacity="0">
       <animate attributeName="d" from="M257.18 -82.69 C257.18 -82.69, 257.18 -82.69, 257.18 -82.69"
         to="M257.18 -82.69 C263.82 -82.18, 270.45 -81.68, 287.1 -80.41" begin="2200ms" dur="300ms" fill="freeze" />
       <animate attributeName="opacity" from="1" to="1" begin="2200ms" dur="300ms" fill="freeze" />
     </path>
   </g>
 </g>
</svg>

Please help

CodePudding user response：

In this example I split out the arrow in two elements so that they can be animates separately. The "running" dash array is made with a mask that is animated. And the initial animation of the path is made by animating the dash offset. The three animations are timed, so that the two are following the one called primaty. The animation of the arrow head is made with a white rectangle that covers the arrow and is then animated "away" from the viewbox of the marker.

<svg viewBox="0 0 100 50">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
      markerWidth="10" markerHeight="10" orient="auto-start-reverse">
      <path d="M 1 1 L 9 5 L 1 9" fill="none" stroke="black"
        stroke-width="1" maske="url(#mask_arrow)" />
      <rect width="10" height="10" fill="white" x="0">
        <animate attributeName="x" values="0;10" dur="300ms"
          begin="primary.end - 300ms" repeatCount="none" fill="freeze" />
      </rect>
    </marker>
    <mask id="mask_arrow">
      <path d="M 5 5 Q 65 40 80 10" stroke="none" stroke-width="1"
        fill="none" marker-end="url(#arrow)"/>
    </mask>
    <mask id="mask_dash">
      <path d="M 5 5 Q 65 40 80 10" stroke="white" stroke-width="2"
        stroke-dasharray="5" fill="none" stroke-dashoffset="0"
        pathLength="100">
        <animate attributeName="stroke-dashoffset" values="0;-100"
          dur="5s" begin="primary.begin" repeatCount="indefinite" />
      </path>
    </mask>
  </defs>
  <path d="M 5 5 Q 65 40 80 10" stroke="black" stroke-width="1"
    stroke-dasharray="100" stroke-dashoffset="100" pathLength="100"
    fill="none" mask="url(#mask_dash)">
    <animate id="primary" attributeName="stroke-dashoffset"
      values="100;0" dur="5s" repeatCount="none" fill="freeze" />
  </path>
  <path d="M 5 45 Q 65 40 80 10" stroke="none" stroke-width="1"
    fill="none" marker-end="url(#arrow)" />
</svg>