How to evenly spread the linear gradient colors to a circle path ?

[Bayramito]

      <Path path={path} style="stroke" strokeWidth={3} strokeCap="round" end={progress}>
          <LinearGradient
            start={vec(0, 0)}
            end={vec(100, 100)}
            colors={["yellow", "blue", "red", "green"]}
            positions={[0, 0.4, 0.62, 1]}
          />
      </Path>

I have a component like above, and what i want is, it should shart from yellow and end with green

[wcandillon]

with a sweep gradient?

[Bayramito]

yes i did it with sweep gradient but is it possible also with linear one?

[Albx68]

You can use the path to mask out the linear gradient @Bayramito

const CircleGrad = () => {
const canvasHeight = 200
const canvasWidth = 200
const centerX = 100;
const centerY = 100;
const radius = 90;
const offset = 30
const startX = centerX;
const startY = centerY - radius;
const pathData = M ${startX} ${startY} A ${radius} ${radius} 0 1 0 ${startX} ${startY + 2 * radius} A ${radius} ${radius} 0 1 0 ${startX} ${startY};
return <Canvas style={{ height: canvasHeight, width: canvasWidth }}>
<Mask mask={


}>

<LinearGradient
start={vec(offset, offset)}
end={vec(canvasWidth - offset, canvasWidth - offset)}
colors={["yellow", "blue", "red", "green"]}
positions={[0, 0.4, 0.62, 1]}
/>



}