CODEWITHSUNDEEP
svg
whytheq
whytheq

Reputation: 35577

SVG path to create triangle with rounded corners

I'm trying to create a simple svg path in the shape of a triangle with rounded corners.

I've started from this triangle:

<svg width="440" height="440">
  <path d="M5,100 L70,5 L135,100 z" fill="none" stroke="black" stroke-width="3" />
</svg>

But I'm struggling to add in the corners - this is as far as I've got:

<svg width="440" height="440">
  <path d="M5,100 a10,10 1 0 1 -5,-10 L70,5 L135,90 a10,10 1 0 1 5,10  z" fill="none" stroke="black" stroke-width="3" />
</svg>

What is the correct path coordinates to create the triangle with three smooth corners? Do I need to do some geometry to calculate the correct strart and end points or is there a tool I can use to configure the shape which will give me the coordinates the shape is made up of?

Upvotes: 6

Views: 8138

Answers (1)

ccprog
ccprog

Reputation: 21836

Inkscape has an option to convert the stroke of a path to a filled object. With that you can:

  1. Draw a simple triangle and set fill to none.
  2. Define a stroke with a width that is double the radius of the corner rounding you want to achieve.
  3. Set stroke-linejoin:round (Fill and Stroke dialog -> Stroke style -> Round join).
  4. Select from menu Path -> Stroke to Path.

  5. Set to node selection mode. Now you can remove all nodes on the inner side. enter image description here

  6. Set fill to none again and select a stroke to your liking.

Upvotes: 6

Related Questions