title: Animated SVG spinner uses excessive cpu and gpu
body: <p>My app uses a <a href="https://codesandbox.io/s/wwjyz58948" rel="nofollow noreferrer">circular progress spinner from the material-ui</a> package and I noticed cpu spikes whenever it was used. I couldn't really tell why it consumed so much GPU and CPU, so I set out to find another spinner I had used earlier (the example code below), as I assumed that was performing better. I was wrong: it suffered from the same issue.</p>
  
  <p>Hence, I wonder how I can improve the performance of SVG spinners such as this one, as it seems to be a problem of a more general nature. This SVG uses SMIL animations, but as the <a href="https://codesandbox.io/s/wwjyz58948" rel="nofollow noreferrer">linked demo shows</a> it also happens using CSS animations (keyframes).</p>
  
  <p>I have tried tricks, such as enabling a separate compositing layer using <code>translateZ</code> and similar stuff, but I couldn't tell any difference in the cpu usage.</p>
  
  <p><a href="https://i.stack.imgur.com/ToFwM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ToFwM.png" alt="High GPU and CPU usage"></a></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"
   viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" id="spinner"&gt;
  
          &lt;circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/&gt;
          &lt;circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"&gt;
              &lt;animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/&gt;
              &lt;animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/&gt;
          &lt;/circle&gt;
          
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>