title: How to create animation svg gradient like this?
body: <p>I have css animation gradient</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>.test {
      width: 100px;
      height: 100px;
      background-image: linear-gradient(90deg,#e2e2e2,#e2e2e2,#e2e2e2,#f2f2f2,#e2e2e2,#e2e2e2,#e2e2e2);
      background-size: 300% 300%;
      animation: test 3s linear infinite;
  }
  
  @keyframes test{0%{background-position:150% 150%}to{background-position:-150% -150%}}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I need to create it using svg. Then I created it </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>.test {
    width: 100px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
    &lt;svg id="svg-test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"&gt;
    &lt;style type="text/css"&gt;
      .rect {
        fill: url(#linear-gradient);
      }
    &lt;/style&gt;
    &lt;defs&gt;
    &lt;linearGradient id="linear-gradient"&gt;
      &lt;stop offset="0%" stop-color="#e2e2e2" /&gt;
      &lt;stop offset="43%" stop-color="#e2e2e2" /&gt;
      &lt;stop offset="50%" stop-color="#f2f2f2" /&gt;
      &lt;stop offset="57%" stop-color="#e2e2e2" /&gt;
      &lt;stop offset="100%" stop-color="#e2e2e2" /&gt;
    &lt;/linearGradient&gt;
    &lt;/defs&gt;
   &lt;rect class="rect" x="-200" y="-200" width="300" height="300"&gt;
      &lt;animateTransform attributeName="transform"
        type="translate"
        from="0 0"
        to="200 200"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"
      /&gt;
    &lt;/rect&gt;
  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I have a problem, cause it work greate just with square. I need to work it with all figures. Then I tryed this code </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-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" &gt;
  &lt;defs&gt;
  &lt;linearGradient id="myG"&gt;
      &lt;stop offset="0%" stop-color="#f2f2f2"&gt;
       &lt;animate attributeName="offset" dur="1.5s" from="0" to="1" repeatCount="indefinite" /&gt;
      &lt;/stop&gt;
      &lt;stop offset="0%" stop-color="#e2e2e2" /&gt;&gt;
      &lt;stop offset="43%" stop-color="#e2e2e2" /&gt;
      &lt;stop offset="50%" stop-color="#e2e2e2"&gt;
      &lt;/stop&gt;
      &lt;stop offset="57%" stop-color="#e2e2e2" /&gt;
      &lt;stop offset="100%" stop-color="#e2e2e2" /&gt; 
  &lt;/linearGradient&gt; 
  &lt;/defs&gt;
  &lt;rect x="0" y="0" width="100%" height="100%" fill="url(#myG)" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's better, but not the same, as my css animation. Could you please help me to create svg animation gradient same as css gradient from first example?</p>