7.5 Quadratic Bezier Curves

Example 1. Quadratic Bezier Curve given by starting point S(x_s,y_s) control point C(x_c,y_c) and ending point E(x_e, y_e)
M x_s y_s Q x_c y_c x_e y_e

P C E 
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
       <g id="q_bezier_base">
            <text x="40" y="100">P</text>
            <circle cx="40" cy="100" r="2" style="fill:#000"/>
            <text x="100" y="20">C</text>
            <circle cx="100" cy="20" r="2" style="fill:#000"/>
            <text x="160" y="150">E</text>
            <circle cx="160" cy="150" r="2" style="fill:#000"/>
            <line x1="40" y1="100" x2="100" y2="20" style="stroke:#999; stroke-dasharray:2 2"/>
            <line x1="160" y1="150" x2="100" y2="20" style="stroke:#999; stroke-dasharray:2 2"/>
       </g>
    </defs>
    <use xlink:href="#q_bezier_base"/>
    <path d="M 40 100 Q 100 20 160 150" style="fill: none; stroke: red"/>
</svg>

Example 2. Two connected Bezier quadratic curves

P C E D F 
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://wwww3.org/2000/svg">
    <defs>
       <g id="two_quadratic_bezier_base" style="stroke:#999; stroke-dasharray:2 2">
            <text x="10" y="100">P</text>
            <circle cx="10" cy="100" r="2" style="fill:#000"/>
            <text x="80" y="20">C</text>
            <circle cx="80" cy="20" r="2" style="fill:#000"/>
            <text x="100" y="150">E</text>
            <circle cx="100" cy="150" r="2" style="fill:#000"/>
            <text x="130" y="40">D</text>
            <circle cx="130" cy="40" r="2" style="fill:#000"/>
            <text x="160" y="120">F</text>
            <circle cx="160" cy="120" r="2" style="fill:#000"/>
            <polyline points="10 100 80 20 100 150 130 40 160 120" style="stroke:#999; stroke-dasharray:2 2; fill:none"/>
       </g>
    </defs>
     <use xlink:href="#two_quadratic_bezier_base"/>
    <path d="M 10 100 Q 80 20 100 150 130 40 160 120" style="fill: none; stroke: red"/>
</svg>

Example 3. Use T or t to smoothly connect Bezier curves T or t

M $x_A \; y_A$ Q $x_B \; y_B$ $x_C \; y_C$ T $x_D \; y_D$

The command T creates a control point B' that is symmetrical to the control point B about the point C.
A B C B' D 
<svg width="200" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
       <g id="smoothly_q_bezier_base" style="stroke:#999; stroke-dasharray:2 2">
            <text x="10" y="100">A</text>
            <circle cx="10" cy="100" r="2" style="fill:#000"/>
            <text x="80" y="20">B</text>
            <circle cx="80" cy="20" r="2" style="fill:#000"/>
            <text x="100" y="150">C</text>
            <circle cx="100" cy="150" r="2" style="fill:#000"/>
            <text x="120" y="280">B'</text>
            <circle cx="120" cy="280" r="2" style="fill:#000"/>
            <text x="260" y="120">D</text>
            <circle cx="260" cy="120" r="2" style="fill:#000"/>
            <polyline points="10 100 80 20 120 280 260 120" style="stroke:#999; stroke-dasharray:2 2; fill:none"/>
       </g>
    </defs>
     <use xlink:href="#smoothly_q_bezier_base"/>
    <path d="M 10 100 Q 80 20 100 150 T 160 120" style="fill: none; stroke: red"/>
</svg>