SVG background applied to SVG shape stroke repeats instead of spreading

Question

Let's say, I have a simple SVG: 1 circle, 1 linear gradient, apllied to its stroke.

I want gradient to spread along the stroke according to the stop-points: start from blue on the one end and finish on yellow color on another end.

But it somehow mirrors and repeats: blue color is in the middle and yellow on both ends of the circle.

What should I do to avoid repeating?

div {
  width: 200px;
  height: 200px;
}

svg {
  width: 100%;
  height: 100%;
}

<div>
  <svg viewport="0 0 100 100" version="1.1">
    <defs>
      <linearGradient id="b7781eda-4425-42b1-a879-c912f4606b76">
        <stop stop-color="#4158D0" offset="0%"></stop>
        <stop stop-color="#C850C0" offset="46%"></stop>
        <stop stop-color="#FFCC70" offset="100%"></stop>
      </linearGradient>
    </defs>
    <circle r="92.5" cx="100" cy="100" fill="transparent" stroke="url(#b7781eda-4425-42b1-a879-c912f4606b76)" stroke-linecap="round" stroke-width="15" stroke-dasharray="581.1946409141117" stroke-dashoffset="58.119464091411174"></circle>
  </svg>
  </svg>
</div>