0

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: Image

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.

1 Answer 1

0

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.

2
  • 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?
    – Denis Tepp
    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.
    – Xrott
    Commented Apr 26, 2022 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.