Rounded corners of a triangle in SVG

Question

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

The bottom left corner is the only one that seems pretty simple, mainly because it's a 90-degree turn. This move is performed using the Q command in SVG with the following parameters:

Q x,y + height, x, y + height - RADIUS starting from the right bit of the arc that I create.

However, other angles are variable, depending on the size of the triangle. I can calculate their angles using the atan() functions, but I don't know how to implement them. I would like it to keep track of the RADIUS variable (5 in this case).

Any ideas?

Answer 1

I assume that you only need this for right-angled triangles with sides parallel to the main axes, which makes things a little easier.

As you said, the right angle is easy.

For other angles, you need to calculate the centers of the circles. Say w and h are the width and height of the triangle. Let it also be said that x, y are the coordinates of the rightmost node. Center of the rightmost triangle: x - r * h / w, y - r . The angle that is covered by the arc to be drawn is π - α , where α is the angle you calculated using atan .

The top corner will be processed in the same way.

This should help you get started.

Answer 2

Using the a command, I can make very detailed angles with specific rX and rY . I would call the function as follows:

a 5 5 0 0 1 0 5 5 and he will make a circle with a radius of 5 and dX = 5 and dY = 5 . It's fine.

The radius is ideal at 90 degrees, so when I have an angle of 50 degrees, I just use (50 / 90) * RADIUS for the values, and it is ideal.