So I’m using this component, and I’m trying to figure out a way to make the ring overlap with itself when it overfills (exceeds 100%), but to indicate that we need a border and shadow for wherever the head of the animated ring is. I’ve converted the code into JavaScript, so we need to do this in JavaScript for React Native.
<Svg
width={scaledWidth}
height={scaledHeight}
viewBox={viewBox}
style={{ position: "absolute" }}
>
<Defs>
<LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<Stop offset="0%" stopColor={gradientEndColor} />
<Stop offset="100%" stopColor={gradientStartColor} />
</LinearGradient>
</Defs>
<G rotation={-90} originX="90" originY="90">
<Circle
cx="50%"
cy="50%"
r={radius + 5}
stroke="black"
fill="transparent"
strokeWidth={11}
/>
<Circle
cx="50%"
cy="50%"
r={radius}
stroke={bgColor}
fill="transparent"
strokeWidth="19"
/>
<AnimatedCircle
cx="50%"
cy="50%"
r={radius}
stroke="url(#gradient)"
fill="transparent"
strokeWidth="19"
strokeDasharray={circleCircumference}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
/>
</G>
{customIcon(radius)}
</Svg>
I’ve tried making a circle that creates a ball and follows the end of the animated circle, not sure how to do that though. Also I’ve tried to create a marker for strokeLinecap, but I don’t think it supports that.
Basically I’m trying to get this to function exactly like the Apple Activity Rings on the watch. Any help would be greatly appreciated.