SVG circle with a stroke that has a gradient tail

Question

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.

What's the best way to achieve this? (The idea is to animate this so that it rotates in the next step.)

Codepen

    <div id="container">
  <svg idq="svg-spinner" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <defs>
        <linearGradient id="grad1" x1="0.01" y1="0.1">

            <stop offset="0" stop-color="#fff"></stop><stop offset="50%" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
    </defs>

    <circle cx="50" cy="50" r="40" stroke="url(#grad1)" stroke-width="10" fill="none"></circle>
</svg>
  </div>
</div>

Answer 1

I managed to solve it myself.

I resorted to a clip-path and that worked out great in my case:

       <div id="container">
      <svg id="svg-spinner" width="100" height="100">
        <defs>
          <clipPath id="cut-off">
          <rect x="0" y="50" width="100" height="100" />
        </clipPath>
            <linearGradient id="gradient">
                <stop offset="0" stop-color="#59b189"></stop>
                <stop offset="75%" stop-color="#59b189" stop-opacity="0"></stop>
            </linearGradient>
        </defs>
        
        <circle cx="50" cy="50" r="40" stroke="#eff8f3" stroke-width="10" fill="none" opacity="1"></circle>
        <circle cx="50" cy="50" r="40" stroke="url(#gradient)" stroke-width="10" fill="none" clip-path="url(#cut-off)"></circle>
    </svg>
    </div>
    </div>