How to restart an animation with saving a begin time in svg

Question

I'm trying to achive a situation where three lines are filling one by one and freeze when it's filled with waiting for restarting, the first line starts at 0s, the second line at 3s, the last one at 6s, an entire process takes for 9 second then it restarts

<svg viewBox="0 0 74 2" height="2" width="74">
    <line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" />
    <line class="line" x1="0" y1="0" x2="0" y2="0" 
          style="stroke:red;stroke-width:4" >
          <animate 
               id="first"
               dur="3s"
               attributeName="x2"
               from="0"
               begin="0s"
               to="20"
               dur="3s"
               fill='freeze'
          />
    </line>
    <line x1="27" y1="0" x2="27" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="second"
                dur="3s"
                begin="3s"
                attributeName="x2"
                from="27"
                to="47"
                dur="3s"
                fill='freeze'
                repeatCount="1"
          />
    </line>
    <line x1="54" y1="0" x2="54" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="third"
                dur="3s"
                begin="6s"
                attributeName="x2"
                from="54"
                to="74"
                dur="3s"
                repeatCount="1"
                fill='freeze'
          />
    </line>
  Sorry, your browser does not support inline SVG.
</svg>

My question is how to restart the three animation tags in the same time besides with saving their begin time.

p.s. i wanna to embed it to a react component

Answer 1

The easiest thing is to make all the animations the same length so they all restart at the same time. Then adjust the changes within each animation so they happen at the correct time.

To do that I've converted the animations from from/to to values so I can specify a value at each 3 second interval.

<svg viewBox="0 0 74 2" height="2" width="74">
    <line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" />
    <line class="line" x1="0" y1="0" x2="0" y2="0" 
          style="stroke:red;stroke-width:4" >
          <animate 
               id="first"
               dur="9s"
               attributeName="x2"
               begin="0s"
               values="0;20;20;20"
               from="0"
               to="20"
               repeatCount="indefinite"
          />
    </line>
    <line x1="27" y1="0" x2="27" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="second"
                dur="9s"
                begin="0s"
                attributeName="x2"
                values="27;27;47;47"
                fill='freeze'
                repeatCount="indefinite"
          />
    </line>
    <line x1="54" y1="0" x2="54" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="third"
                dur="9s"
                begin="0s"
                attributeName="x2"
                values="54;54;54;74"
                repeatCount="indefinite"
          />
    </line>
  Sorry, your browser does not support inline SVG.
</svg>