title: Use CSS (or JavaScript) instead of SMIL
body: <p>I see the following alert in my chrome console:</p>
  
  <pre><code>SVG's SMIL animations (&lt;animate&gt;, &lt;set&gt;, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
  </code></pre>
  
  <p><b>So I want to replace SMIL with CSS.</b><br>
  There are a few things what I can do in CSS, but I don't know how to do this one.
  My problem is that <b>I animated d attribute in SMIL and I don't know that can I / how can I do it in CSS.</b>
  Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg{
   position: fixed;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="500" height="500" viewBox="0 0 500 500"&gt;
   &lt;path id="rect" fill="lightblue" d="M10 10 L30 10 L30 30 L10 30 Z"/&gt;
   &lt;animate xlink:href="#rect"
    attributeName="d"
    attributeType="XML"
    values="M20 20 L30 20 L40 40 L20 40 Z;
    M10 10 L30 10 L40 30 L10 40 Z;
    M10 10 L30 10 L30 30 L10 30 Z;
    M20 20 L30 20 L40 40 L20 40 Z"
    begin="0s"
    dur="2s" 
    repeatCount="indefinite"
   /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>
  
  <p>P.S.: If it is not possible in CSS or faster in JavaScript, JavaScript would be good too.</p>