drawing path in svg with 90° arc between perpendicular lines

Question

I would like to draw two perpendicular segments between 2 points in space.

Instead of a visual effect of 90° between the two points, I would like to draw an arc (quarter of a circle) to visually smooth the angle.

I struggle to understand how path could be shaped, if using bezier of arcs - could you show a solution and explain what parameters do ?

I also wonder how drawing paths behave computationally - how much do they perform paths with only M H V parameters, respect drawing arc or bezier curves?

I read guides but did not achieved results that I want yet.

---

Example:

so far I have :

// draw two perpendicular segments between points (0,0) and (100, 100)
<svg viewBox="0 0 200 200">
        <path 
              d="
                M 0,0
                H 100 
                V 100
                 "
              />
    </svg> 

That visually appears like broken line made by two perpendicular segments between points A(0,0) and C(100,100), that cross at B(100,0).

Now, I would like to draw two perpendicular segments between points A and C, and place a quarter circle arc instead of point B, oriented in a way that the two segments form a continuos line - not a "broken line" (not English native, I hope you understood what I mean by "broken line").

This is the neatest solution I came up with, but still not working:

// attempt to draw a " curve " between 2 perpendicular segments > failed

<svg viewBox="0 0 200 200">
        <path 
              d="
                M 0,80
                H 80
                Q 100,100 100, 100
                V 200
                 "
              />
    </svg> 

Answer 1

Different people learn diferent ways, so take this as some general hints how to find out how path commands work:

• the primary source obviously is the specification
• Draw paths with a visual editor, and inspect the resulting code. Inkscape has a handy built-in XML editor that lets you see the rendered path and its definition side by side.

In your example I think the main problem was the use of the H and V commands. They are shorthands for the L commands, where either the x or y coordinate are left off and copied from the last control point. These two paths are equivalent:

M 0,80   L 90,80
M 0,80   H 90

as are these

M 100,90 L 100,200
M 100,90 V     200

For now, connect the two with a straight line segment:

M 0,80   L 90,80   L 100,90   L 100,200

Now, you have to exchange the straight line between (90,80) and (100,90) with a curve. It could be a quadratic bezier (second line is the shorthand form):

M 0,80   L 90,80   Q 100,80 100,90   L 100,200
M 0,80   H 90      Q 100,80 100,90   V 200

Thecurve starts at (90,80), the middle control point sits at (100,80), and the end is at (100,90).

Or you could use a true arc:

M 0,80   L 90,80   A 10 10 0 0 1 100,90   L 100,200
M 0,80   H 90      A 10 10 0 0 1 100,90   V 200

Start and end points remain the same. The rest of that command is a bit more complex:

• first two numbers are the horizontal and vertical radius of the arc
• the third number would rotate these two axes, 0 says no rotation
• the 0 in fourth place says the arc goes less than 180 degrees around the ellipse (1 would mean > 180)
• the 1 in fifth place says the arc runs clockwise (1 would be anti-clockwise)

Complicated? The spec has a nice grafic to explain it.

path {
    fill:none;
    stroke:black;
}

<svg viewBox="0 0 300 200">
    <path d="M   0,80   L  90,80   Q 100,80 100,90        L 100,200" />
    <path d="M 100,80   L 190,80   A 10 10 0 0 1 200,90   L 200,200" />
</svg>