I have two SVG circle elements, one nested inside the other. The outermost circle (orange ) seems to not have any padding and overlaps with the border of the viewBox.

How can I position the circles inside the viewBox so that there is no overlap and the circle is not cut off?

<View style={{ alignContent: "center", alignSelf: "center" }}>
     
      <Svg
        height="250"
        width="250"
        viewBox="0 0 100 100"
        style={{ zIndex: 1, borderWidth: 1 }}
      >
        {/* OUTTER ORANGE CIRCLE */}
        <Circle
          stroke="#FF8540"
          fill="none"
          cx="50"
          cy="50"
          r={radius}
          strokeWidth="3"
          transform={`rotate(52.5 ${"50"} ${"50"})`}
          strokeDasharray={[dash, circumference - dash]}
          strokeLinecap="round"
          style={{ transition: "all 0.5s" }}
        />
        {/* INNER TEAL CIRCLE */}
        <Circle
          stroke="#1AA39B"
          fill="none"
          cx="50"
          cy="50"
          r={radius * 0.8}
          strokeWidth="3"
          transform={`rotate(-152.5 ${"50"} ${"50"})`}
          strokeDasharray={[dash, circumference - dash]}
          strokeLinecap="round"
          style={{ transition: "all 0.5s" }}
        />
      </Svg>
     
    </View>