# SVG Path Create Curve

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.

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.

• Thank you for your answer! Unfortunately, I can't upvote your answer due to my low reputation, but this is exactly what I was looking for! Is this the same approach (I mean here "without lifting the pen") if I would want to use bezier curve? Commented Apr 19, 2022 at 11:51
• @DenisTepp Use this whenever you want a shape to have a proper fill. When you use the 'M' command and "lift the pen", you end the current sub-path, which makes the fill automatically close the shape to the start of that sub-path, which is usually not what you want. Commented Apr 26, 2022 at 21:04