title: How to alternate-reverse loop an SVG animation?
body: <p>I am new to SVG specially in SVG animation so I don't know how to do this. I need to reverse the animation once it is finished and start it over again. I found this one <a href="https://stackoverflow.com/questions/32423332/how-to-reverse-the-moving-direction-of-the-svg-animation-on-the-mpath">How to reverse the moving direction of the SVG animation?</a> and tried the accepted answer but I don't how to do it. Please help me guys. Heres my codes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.s0 {
    overflow: visible;
  }
  .st0 {
    clip-path: url(#SVGID_6_);
    fill: #FF0500;
  }
  .st1 {
    opacity: 0.6;
    fill: #FF0500;
  }
  .st2 {
    clip-path: url(#SVGID_8_);
    fill: #FF0500;
  }
  .st3 {
    clip-path: url(#SVGID_2_);
    fill: none;
    stroke: #000000;
    stroke-width: 5;
    stroke-miterlimit: 10;
  }
  .st4 {
    clip-path: url(#SVGID_2_);
    fill: none;
    stroke: #000000;
    stroke-width: 5;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
  }
  .st5 {
    opacity: 0.6;
    clip-path: url(#SVGID_4_);
  }
  .st6 {
    opacity: 0.7;
    clip-path: url(#SVGID_4_);
  }
  .st7 {
    clip-path: url(#SVGID_2_);
  }
  .st8 {
    clip-path: url(#SVGID_10_);
    fill: #FF0500;
  }
  .st9 {
    opacity: 0.65;
    fill: #FF0500;
  }
  .st10 {
    opacity: 0.7;
    fill: #FF0500;
  }
  .st11 {
    clip-path: url(#SVGID_2_);
    fill: #FFFFFF;
  }
  .st12 {
    opacity: 0.59;
    clip-path: url(#SVGID_4_);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="75px" height="100px" viewBox="0 0 75 100" xml:space="preserve" enable-background="new 0 0 75 100"&gt;
    &lt;defs&gt;
      &lt;rect id="SVGID_1_" x="-121" y="-27.388" width="317.829" height="150.388" /&gt;
    &lt;/defs&gt;
    &lt;clipPath id="SVGID_2_"&gt;
      &lt;use xlink:href="#SVGID_1_" overflow="visible" /&gt;
    &lt;/clipPath&gt;
    &lt;polygon class="st11" points="26.344 95.133 4.813 78.661 4.813 41.538 26.344 41.538 " /&gt;
    &lt;polygon class="st3" points="26.344 95.133 4.813 78.661 4.813 41.538 26.344 41.538 " /&gt;
    &lt;polygon class="st11" points="56.376 41.538 5.345 6.038 5.345 28.817 56.376 64.317 " /&gt;
    &lt;polygon class="st4" points="56.376 41.538 5.345 6.038 5.345 28.817 56.376 64.317 " /&gt;
    &lt;rect x="4.813" y="6.039" class="st11" width="67.095" height="22.779" /&gt;
    &lt;rect x="4.813" y="41.539" class="st11" width="52.095" height="22.779" /&gt;
    &lt;rect x="4.813" y="41.539" class="st3" width="52.095" height="22.779" /&gt;
    &lt;rect x="10.545" y="69.081" class="st7" width="11.154" height="1.538" /&gt;
    &lt;rect x="9.375" y="72.719" class="st7" width="13.071" height="1.538" /&gt;
    &lt;rect x="10.334" y="76.247" class="st7" width="11.154" height="1.538" /&gt;
    &lt;rect x="10.946" y="10.692" class="st7" width="1.538" height="13.07" /&gt;
    &lt;rect x="14.476" y="11.851" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="18.113" y="10.892" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="21.643" y="12.052" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="25.241" y="10.993" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="28.771" y="12.153" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="32.408" y="11.195" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="35.938" y="12.355" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="39.294" y="11.296" class="st7" width="1.539" height="13.071" /&gt;
    &lt;rect x="42.824" y="12.456" class="st7" width="1.539" height="11.154" /&gt;
    &lt;rect x="46.461" y="11.497" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="49.991" y="12.657" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="53.53" y="11.396" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="57.059" y="12.557" class="st7" width="1.539" height="11.154" /&gt;
    &lt;rect x="60.696" y="11.497" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="64.226" y="12.758" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="10.124" y="47.351" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="13.76" y="46.393" class="st7" width="1.538" height="13.07" /&gt;
    &lt;rect x="17.29" y="47.552" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="26.898" y="26.956" transform="matrix(0.4983 0.867 -0.867 0.4983 42.4791 -7.5061)" class="st7" width="1.654" height="11.991" /&gt;
    &lt;rect x="31.527" y="30.615" transform="matrix(0.4981 0.8671 -0.8671 0.4981 46.7432 -10.3986)" class="st7" width="1.654" height="9.125" /&gt;
    &lt;rect x="36.135" y="33.386" transform="matrix(0.4981 0.8671 -0.8671 0.4981 51.2 -13.153)" class="st7" width="1.654" height="8.53" /&gt;
    &lt;rect x="21.831" y="27.194" transform="matrix(0.4983 0.867 -0.867 0.4983 38.3092 -4.0545)" class="st7" width="1.654" height="7.76" /&gt;
    &lt;rect x="41.997" y="37.781" transform="matrix(0.4983 0.867 -0.867 0.4983 56.1469 -17.0713)" class="st7" width="1.654" height="4.397" /&gt;
    &lt;rect x="4.813" y="6.039" class="st3" width="67.095" height="22.779" /&gt;
    &lt;rect x="20.889" y="47.552" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="24.525" y="46.595" class="st7" width="1.538" height="13.07" /&gt;
    &lt;rect x="28.055" y="47.754" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="31.585" y="47.754" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="35.168" y="46.594" class="st7" width="1.538" height="13.071" /&gt;
    &lt;rect x="38.752" y="47.956" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="42.109" y="47.956" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="45.745" y="46.595" class="st7" width="1.538" height="13.07" /&gt;
    &lt;rect x="49.275" y="47.956" class="st7" width="1.538" height="11.154" /&gt;
    &lt;rect x="16.277" y="80.391" transform="matrix(-0.0035 1 -1 -0.0035 101.7282 67.8725)" class="st7" width="1.538" height="8.465" /&gt;
    &lt;rect x="9.582" y="79.94" class="st7" width="13.071" height="1.537" /&gt;
  
    &lt;!-- CLIPPINGS --&gt;
    &lt;defs&gt;
      &lt;!-- 1st --&gt;
      &lt;clipPath id="cliptop"&gt;
        &lt;rect x="7" y="8" width="64" height="19" /&gt;
      &lt;/clipPath&gt;
  
      &lt;!-- 2nd --&gt;
      &lt;clipPath id="clip2"&gt;
        &lt;polygon points="37.2,31 50.1,39.02 24,39.02 12.6,31" /&gt;
      &lt;/clipPath&gt;
  
      &lt;!-- 3rd --&gt;
      &lt;clipPath id="clip3"&gt;
        &lt;rect width="47.6" height="17.75" x="7" y="44" fill="yellow" fill-opacity="0.9"&gt;&lt;/rect&gt;
      &lt;/clipPath&gt;
  
      &lt;!-- Last --&gt;
      &lt;clipPath id="clip4"&gt;
        &lt;polygon points="23.84 90.133 7.32 77.661 7.32 66.7 23.84 66.7 " fill="green" fill-opacity="0.8" /&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  
    &lt;!-- SCANNERS --&gt;
  
    &lt;!-- 1st --&gt;
    &lt;g class="st7" style="clip-path: url(#cliptop)"&gt;
      &lt;defs&gt;
        &lt;rect id="SVGID_3_" x="-121" y="-27.388" width="317.829" height="150.388" /&gt;
      &lt;/defs&gt;
      &lt;clipPath id="SVGID_4_"&gt;
        &lt;use xlink:href="#SVGID_3_" overflow="visible" /&gt;
      &lt;/clipPath&gt;
      &lt;g class="st5"&gt;
        &lt;animateMotion id="scan_1_1" to="-64,0" begin="0s; scan_4_1.end + 1s" dur="1.5s" fill="freeze" /&gt;
        &lt;defs&gt;
          &lt;rect id="SVGID_5_" x="59.452" y="8.488" width="7.473" height="17.88" /&gt;
        &lt;/defs&gt;
        &lt;clipPath id="SVGID_6_"&gt;
          &lt;use xlink:href="#SVGID_5_" overflow="visible" /&gt;
        &lt;/clipPath&gt;
        &lt;rect x="59.451" y="8.488" class="st0" width="7.474" height="17.88" /&gt;
      &lt;/g&gt;
      &lt;g class="st12"&gt;
        &lt;animateMotion id="scan_1_2" to="-64,0" begin="0s; scan_4_2.end + 1s" dur="1.5s" fill="freeze" /&gt;
        &lt;defs&gt;
          &lt;rect id="SVGID_7_" x="61.938" y="8.488" width="7.473" height="17.88" /&gt;
        &lt;/defs&gt;
        &lt;clipPath id="SVGID_8_"&gt;
          &lt;use xlink:href="#SVGID_7_" overflow="visible" /&gt;
        &lt;/clipPath&gt;
        &lt;rect x="61.937" y="8.488" class="st2" width="7.475" height="17.88" /&gt;
      &lt;/g&gt;
      &lt;g class="st6"&gt;
        &lt;animateMotion id="scan_1_3" to="-64,0" begin="0s; scan_4_3.end + 1s" dur="1.5s" fill="freeze" /&gt;
        &lt;defs&gt;
          &lt;rect id="SVGID_9_" x="60.695" y="8.488" width="7.473" height="17.88" /&gt;
        &lt;/defs&gt;
        &lt;clipPath id="SVGID_10_"&gt;
          &lt;use xlink:href="#SVGID_9_" overflow="visible" /&gt;
        &lt;/clipPath&gt;
        &lt;rect x="60.694" y="8.488" class="st8" width="7.474" height="17.88" /&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  
    &lt;!-- 2nd --&gt;
    &lt;g class="st7" style="clip-path: url(#clip2)"&gt;
      &lt;polygon class="st9" points="30.601 26.583 36.285 30.564 12.267 30.564 6.581 26.583 " y="-7"&gt;
        &lt;animateMotion id="scan_2_1" to="17.75,12.5" dur="1s" begin="scan_1_1.end" fill="freeze" /&gt;
      &lt;/polygon&gt;
      &lt;polygon class="st9" points="31.814 27.352 37.5 31.333 13.481 31.333 7.795 27.352 " y="-7"&gt;
        &lt;animateMotion id="scan_2_2" to="17.75,12.5" dur="1s" begin="scan_1_2.end" fill="freeze" /&gt;
      &lt;/polygon&gt;
      &lt;polygon class="st9" points="31.117 26.928 36.802 30.909 12.784 30.909 7.098 26.928 " y="-7"&gt;
        &lt;animateMotion id="scan_2_3" to="17.75,12.5" dur="1s" begin="scan_1_3.end" fill="freeze" /&gt;
      &lt;/polygon&gt;
    &lt;/g&gt;
  
    &lt;!-- 3rd --&gt;
    &lt;g class="st7" style="clip-path:url(#clip3);"&gt;
      &lt;rect x="54.368" y="43.988" class="st1" width="7.474" height="17.88"&gt;
        &lt;animateMotion id="scan_3_1" to="-57.5,0" dur="1.5s" begin="scan_2_1.end" fill="freeze" /&gt;
      &lt;/rect&gt;
      &lt;rect x="56.854" y="43.988" class="st10" width="7.475" height="17.88"&gt;
        &lt;animateMotion id="scan_3_2" to="-57.5,0" dur="1.5s" begin="scan_2_2.end" fill="freeze" /&gt;
      &lt;/rect&gt;
      &lt;rect x="55.611" y="43.988" class="st10" width="7.474" height="17.88"&gt;
        &lt;animateMotion id="scan_3_3" to="-57.5,0" dur="1.5s" begin="scan_2_3.end" fill="freeze" /&gt;
      &lt;/rect&gt;
    &lt;/g&gt;
  
    &lt;!-- Last --&gt;
    &lt;g class="st7" style="clip-path:url(#clip4);"&gt;
      &lt;rect x="7.324" y="59.351" class="st1" width="16.53" height="7.474"&gt;
        &lt;animateMotion id="scan_4_1" to="0,33" dur="1.5s" begin="scan_3_1.end" fill="freeze" /&gt;
      &lt;/rect&gt;
      &lt;rect x="7.324" y="56.864" class="st10" width="16.53" height="7.475"&gt;
        &lt;animateMotion id="scan_4_2" to="0,33" dur="1.5s" begin="scan_3_2.end" fill="freeze" /&gt;
      &lt;/rect&gt;
      &lt;rect x="7.324" y="58.107" class="st10" width="16.53" height="7.474"&gt;
        &lt;animateMotion id="scan_4_3" to="0,33" dur="1.5s" begin="scan_3_3.end" fill="freeze" /&gt;
      &lt;/rect&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>