Rounded corners on triangle in SVG

Question

I'm trying to make a triangle that has rounded corners. The triangle will look like this:

The bottom left corner is the only one that seems fairly easy to make, mostly because that is a 90 degree 'turn'. That turn is made using the Q command in SVG with the following parameters:

Q x,y + height, x, y + height - RADIUS starting at the right bit of the arc I'm creating.

However, the other corners are variable, depending on the triangle size. I can calculate their angles using atan() functions, but I have no clue how to implement them. I would like it to follow the RADIUS variable (5 in this case).

Any ideas?

Answer 1

I assume you only need this for right angle triangles with sides parallel to basic axes, this makes things a bit easier.

As you've said, the right angle is easy.

For other angles, you need to calculate centers of the circles. Let's say w and h are width and height of the triangle. Let's also say x, y are the coordinates of the rightmost node. The center of the rightmost triangle is: x - r * h / w, y - r. The angle that's covered by the arc you need to draw is π - α, where α is the corner angle you've calculated with atan.

Topmost corner will be handled similarly.

This should get you started.

Answer 2

Using the a command I can make very detailed corners with a certain rX and rY. I would call the function like:

a 5 5 0 0 1 0 5 5, and it will make a circle with radius 5 and dX = 5 and dY = 5. Which is perfect.

The radius is ideal at 90 degrees, so when I have a 50 degree corner I just use (50 / 90) * RADIUS for the values, and it's perfect.