7.6 Cubic Beziér Curves

The commant C is used to define cubic Bézier curve.

The difference between the quadratic and cubic curves is that the cubic curve has two control points one for each endpoint

If you want to guarantee a smooth join between curves, you can use the S command (or s if you want to use relative coordinates). In a manner analogous to that of the T command for quadratic curves, the new curve will take the previous curve's endpoint as its starting point, and the first control point will be the reflection of the previous ending control point.

Example 1. C Cubic Beziér Curve given by starting point A control points B and C, ending point D
$M\; x_A\; y_A\; C\; x_B\; y_B\; x_C\; y_C\; x_D\; y_D$

A B C D 
  <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
       <g id="cubic_bezier_base">
            <text x="40" y="100">A</text>
            <circle cx="40" cy="100" r="2" style="fill:#000"/>
            <text x="100" y="20">B</text>
            <circle cx="100" cy="20" r="2" style="fill:#000"/>
            <text x="160" y="150">C</text>
            <circle cx="160" cy="150" r="2" style="fill:#000"/>
            <text x="190" y="130">D</text>
            <circle cx="190" cy="130" r="2" style="fill:#000"/>
            <!-- tangent AB at A-->
            <line x1="40" y1="100" x2="100" y2="20" style="stroke:#999; stroke-dasharray:2 2"/>
            <!-- tangent CD at D-->
            <line x1="160" y1="150" x2="190" y2="130" style="stroke:#999; stroke-dasharray:2 2"/>
       </g>
    </defs>
     <use xlink:href="#cubic_bezier_base"/>
    <path d="M 40 100 C 100 20 160 150 190 130" 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_q_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_q_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>

Example 4. C Cubic Beziér Curve given by starting point A control points B and C, ending point D
$M\; x_A\; y_A\; C\; x_B\; y_B\; x_C\; y_C\; x_D\; y_D$

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M 0 0 C 0 200 200 0 200 200" style="fill: none; stroke: red"/>
</svg>