Round Up SVG Path

Question

I am new to drawing vectors using svg and I am trying to create a custom tab bar for my app's navigations. I was able to create a bar that looks like this:

And the svg code looks like this:

  const width = SCREEN_WIDTH;
  const firstStop = width / 2 - 30;
  const secondStop = width / 2 + 28;

        <Path
          d={`
          M 0,0 
          H ${firstStop - 30} 
          Q ${firstStop},0
          ${firstStop},0
          ${firstStop},35 
          ${firstStop + 30},35 
          ${secondStop},35 
          ${secondStop},0
          ${secondStop},0 
          ${secondStop + 30},0 
          H ${width} 
          V 70 
          H 0 
          Z`}
          fill={colors.accent}
          fillRule='nonzero'
        />

As you can see I can create it with sharp edges but I wanted to achieve the smoother edge for the "cutout". How can i create such curve in this case?

example:

Answer 1

Here's a very brief overview of one possible method using Inkscape, which is free and open source. Similar could be achieved with other software such as Illustrator.

1. Arrange two concentric circles and a rectangle as shown below, and do a Difference operation Ctrl+- on the rectangle and outer circle. This will cut out a circular arc from the rectangle.

2. Delete the extra node in the outer arc

3. Edit the Bézier handle of the bottom node of the outer arc while holding down Ctrl as you click and drag the handle to constrain it horizontally

4. Select the rectangle shape with the cut out arc, and in the Path Effects panel Ctrl+& add a Mirror Symmetry live path effect

5. Add a Corner (Fillet/Chamfer) live path effect. Select the two corner controls and click and drag to round the corners

6. Do Object to Path Shift+Ctrl+C, and Union Ctrl++. This will convert the path effects to actual paths and then unite the two mirrored pieces as one path