Cubic Bezier Curve

Path commands can create three types of curves. Let's start with the first type - Cubic Beizer Curve.

Cubic bezier curve has two commands:

Command	Parameters	Description
C/c (curveTo)	x1, y1 x2, y2 x, y	Draw a cubic Beizer curve from the current point to (x,y) using (x1, y1) as the control point at the beginning of the curve and (x2, y2) as the control point at the end of the curve.
S/s (shorthand/smooth CurveTo)	x2,y2 x, y	Draw a cubic Beizer curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point (x2, y2) on the previous command relative to the current point.

Here shows how a cubic bezier curve is drawn:

1. A curved path is defined from the current position (mx,my) (either established by a Move command or a previous line or curve command) to the end point (x, y) defined in the cubic bezier.

2. The first two points (x1,y1 x2,y2) define the bezier control points that give the shape of the curve. The positioning of the control points change the shape of the curve under the user's control as can be seen in example below.

Code Example	SVG Image
<?xml version="1.0" standalone="no"?>	Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150" height="250">
<!-- Curve 1 --> <path d="M10,55 C10,5 100,5 100,55" style="fill:none; stroke:blue"/>
<!-- Curve 2 --> <path d="M10,105 C50,50 130,50 80,105" style="fill:none; stroke:red"/>
<!-- Curve 3 --> <path d="<path d="M10,150 C10,110 50,110 50,150 S80,160 80,120" style="fill:none; stroke:green"/>
<!-- A Smiling Face --> <path d="M20,196 C22,180 32,180 34,196" style="fill:none; stroke:purple"/> <path d="M44,196 C46,180 56,180 58,196" style="fill:none; stroke:purple"/> <path d="M23,205 C32,220 47,220 56,205" style="fill:none; stroke:red"/>
</svg>