SVG Path Create Curve

Question

I am new to svg and trying to understand the arches and curves. After reading the documentation I understand on how to build arches and curves with Q and C, but I can't quite get to the right result when I am trying to draw.

Here is the example of what I have drawn so far:

const width = Dimensions.get('window').width;
const firstStop = width / 2 - 20;
const secondStop = width / 2 + 20;

  <Svg
   style={{ position: 'absolute', bottom: 0 }}
   fill-opacity='0.4'
   fill='none'
   height='70'
   width={width}>
        <Path
          d={`
          M${firstStop - 20},0 Q${firstStop},0 ${firstStop},15
          M${secondStop + 20},0 Q${secondStop},0 ${secondStop},15
          M 0 0 
          H ${firstStop - 20}
          L ${firstStop} 15
          V 30 
          H ${secondStop} 
          V 15
          L ${secondStop + 20} 0
          H ${width} 
          V 70 
          H 0 0 
          Z`}
          fill='black'
          stroke='red'
        />
      </Svg>

which results in the picture below:

The problem is that I want to draw the curves on the other 2 angles that are positioned in the cut/hole of the black figure (kind of border radius on the sharp angles). however, if am I making the curve, the fill is drawn on the inside of the curve and I don't want that.

Answer 1

It looks like you're jumping around a lot with the 'M' command, but for a proper fill you need one continuous path. The fill always closes the shape (i.e. paths and sub-paths) in a straight line and the order of operations is important.

What this means is, you start at 0,0 draw a line to the start of the upper left curve, draw that curve, then the two inner ones then the upper right one, all without "lifting the pen". Finally, you need to draw that lower part to complete the shape back to the start (or make it part of the green shape instead of the black one).

All in all, assuming width = 100, I get something like this:

M 0,0 H 10 Q 30,0 30,15 30,30 50,30 70,30 70,15 70,0 90,0 H 100 V 70 H 0 Z

Note that the symbol for a command can be omitted when it's the same as the previous one.