title: SVG circle with a stroke that has a gradient tail
body: <p>The below is what I have.
  The only thing I need is to have the top be a fill. So 12'O clock it's supposed to be a fill and ad 6'O clock it should end with a gradient.</p>
  
  <p>What's the best way to achieve this?
  (The idea is to animate this so that it rotates in the next step.)</p>
  
  <p><a href="https://codepen.io/joacim-boive/pen/VxWWoZ" rel="noreferrer">Codepen</a></p>
  
  <pre><code>    &lt;div id="container"&gt;
    &lt;svg idq="svg-spinner" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100"&gt;
      &lt;defs&gt;
          &lt;linearGradient id="grad1" x1="0.01" y1="0.1"&gt;
  
              &lt;stop offset="0" stop-color="#fff"&gt;&lt;/stop&gt;&lt;stop offset="50%" stop-color="#fff" stop-opacity="0"&gt;&lt;/stop&gt;
          &lt;/linearGradient&gt;
      &lt;/defs&gt;
  
      &lt;circle cx="50" cy="50" r="40" stroke="url(#grad1)" stroke-width="10" fill="none"&gt;&lt;/circle&gt;
  &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>