How to render a point on a gradient arc? - react-native

Question

So I have an SVG component that renders an arc with a color gradient as shown below. Currently, it's just the arc but no grey point. What I want to do is programmatically pass values into the component so that the grey dot moves along the arc as the value passed into the component get higher. How do I do that?
function SvgComponent(props) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={321}
height={161}
viewBox="0 0 321 161"
fill="none"
{...props}
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M230.036 39.195l10-17.32A160 160 0 01298.6 80.439l-17.321 10a139.984 139.984 0 00-51.243-51.244z"
fill="url(#prefix__paint0_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M281.279 90.439a139.997 139.997 0 0118.757 70h20a160 160 0 00-21.436-80l-17.321 10z"
fill="url(#prefix__paint1_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M240.036 21.875a160 160 0 00-80-21.436v20a139.994 139.994 0 0170 18.756l10-17.32z"
fill="url(#prefix__paint2_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M160.036.439a160.001 160.001 0 00-80 21.436l10 17.32a140.003 140.003 0 0170-18.756v-20z"
fill="url(#prefix__paint3_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M38.792 90.439l-17.32-10a160 160 0 0158.564-58.564l10 17.32A139.998 139.998 0 0038.792 90.44z"
fill="url(#prefix__paint4_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M20.041 160.441a139.994 139.994 0 0118.757-70l-17.32-10a159.998 159.998 0 00-21.437 80h20z"
fill="url(#prefix__paint5_linear)"
/>
<Defs>
<LinearGradient
id="prefix__paint0_linear"
x1={291.5}
y1={79}
x2={287.596}
y2={26.447}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#863030" />
<Stop offset={1} stopColor="#862BB0" />
</LinearGradient>
<LinearGradient
id="prefix__paint1_linear"
x1={294}
y1={89.5}
x2={326.552}
y2={147.819}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#863030" />
<Stop offset={1} stopColor="#481717" />
</LinearGradient>
<LinearGradient
id="prefix__paint2_linear"
x1={240}
y1={31.5}
x2={180.5}
y2={9.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#862BB0" />
<Stop offset={1} stopColor="#D12020" />
</LinearGradient>
<LinearGradient
id="prefix__paint3_linear"
x1={89}
y1={26.5}
x2={156}
y2={12.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#DB7326" />
<Stop offset={1} stopColor="#D12020" />
</LinearGradient>
<LinearGradient
id="prefix__paint4_linear"
x1={73}
y1={35.5}
x2={24.5}
y2={90}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0.004} stopColor="#DB7326" />
<Stop offset={0.8} stopColor="#EFC02E" />
</LinearGradient>
<LinearGradient
id="prefix__paint5_linear"
x1={29}
y1={90}
x2={10.992}
y2={160.377}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#EFC02E" />
<Stop offset={0.924} stopColor="#3E7821" />
</LinearGradient>
</Defs>
</Svg>
)
}
export default SvgComponent
The arc was made using SVGR (a tool that takes SVG and turns it into React components).

Answer 1

You can try adding this as a child in the Svg component
<Svg
xmlns="http://www.w3.org/2000/svg"
width={321}
height={161}
viewBox="0 0 321 161"
fill="none"
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M230.036 39.195l10-17.32A160 160 0 01298.6 80.439l-17.321 10a139.984 139.984 0 00-51.243-51.244z"
fill="url(#prefix__paint0_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M281.279 90.439a139.997 139.997 0 0118.757 70h20a160 160 0 00-21.436-80l-17.321 10z"
fill="url(#prefix__paint1_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M240.036 21.875a160 160 0 00-80-21.436v20a139.994 139.994 0 0170 18.756l10-17.32z"
fill="url(#prefix__paint2_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M160.036.439a160.001 160.001 0 00-80 21.436l10 17.32a140.003 140.003 0 0170-18.756v-20z"
fill="url(#prefix__paint3_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M38.792 90.439l-17.32-10a160 160 0 0158.564-58.564l10 17.32A139.998 139.998 0 0038.792 90.44z"
fill="url(#prefix__paint4_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M20.041 160.441a139.994 139.994 0 0118.757-70l-17.32-10a159.998 159.998 0 00-21.437 80h20z"
fill="url(#prefix__paint5_linear)"
/>
<Circle
cx="50%"
cy={10}
r={thickness}
stroke="none"
fill="#fff"
transform={`rotate(${(target / 100) * 180},${321 / 2},${321 / 2})`}
/>
<Defs>
<LinearGradient
id="prefix__paint0_linear"
x1={291.5}
y1={79}
x2={287.596}
y2={26.447}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#863030" />
<Stop offset={1} stopColor="#862BB0" />
</LinearGradient>
<LinearGradient
id="prefix__paint1_linear"
x1={294}
y1={89.5}
x2={326.552}
y2={147.819}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#863030" />
<Stop offset={1} stopColor="#481717" />
</LinearGradient>
<LinearGradient
id="prefix__paint2_linear"
x1={240}
y1={31.5}
x2={180.5}
y2={9.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#862BB0" />
<Stop offset={1} stopColor="#D12020" />
</LinearGradient>
<LinearGradient
id="prefix__paint3_linear"
x1={89}
y1={26.5}
x2={156}
y2={12.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#DB7326" />
<Stop offset={1} stopColor="#D12020" />
</LinearGradient>
<LinearGradient
id="prefix__paint4_linear"
x1={73}
y1={35.5}
x2={24.5}
y2={90}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0.004} stopColor="#DB7326" />
<Stop offset={0.8} stopColor="#EFC02E" />
</LinearGradient>
<LinearGradient
id="prefix__paint5_linear"
x1={29}
y1={90}
x2={10.992}
y2={160.377}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#EFC02E" />
<Stop offset={0.924} stopColor="#3E7821" />
</LinearGradient>
</Defs>
</Svg>
I added this for the white circle
<Circle
cx="50%"
cy={10}
r={thickness}
stroke="none"
fill="#fff"
transform={`rotate(${(target / 100) * 180},${321 / 2},${321 / 2})`}
/>
target should be any value between -50 and 50 with 50 being the max.