How do I add a border and shadow (or marker) to the head of my animated circle?

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.