1

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:

tabbar

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

1
  • 1
    You should learn more about how bezier curves are created. Each point has "handles" that affect the smoothness of the curve. Side note: the example is kind of hard to see given the white on light gray Jan 31, 2023 at 22:01

1 Answer 1

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

enter image description here

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

enter image description here

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

enter image description here

  1. 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

enter image description here

1
  • thank you for such detailed response!
    – denistepp
    Feb 1, 2023 at 6:57

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.