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?