Cubic Bézier Curve

Home | Arc | Cubic Bézier | Quadratic Bézier
See Examples
100, 35070, 100380, 100350, 350
<svg width="450" height="450" >
  <path 
    d="M 100 350
Start Position
 C 70 100
Control Point 1
 380 100
Control Point 2
 350 350
End Position
 " 
    stroke="#fa3838" stroke-width="20" fill="none" 
  />
</svg>

Cubic Bézier Curve

A cubic Bézier curve is a complex curve that bends towards two points. In SVG we can use the <path> element with the C command to draw a curve.

Moving to the starting point

Like most path segments, the cubic Bézier curve command continues the previous segment. In this example we use the M command to move to the starting point and from there we start the curve.

Drawing a Cubic Bézier Curve

The C command requiers two control points and an end point.

  1. The first control point defines the curve’s initial direction.

  2. Then the second control point sets from which direction should the curve reach its endpoint.

  3. Finally, we set the endpoint of the curve.

Styling

Stroke Color

You can set any color value that is valid in CSS. This includes named colors, hex codes, the rgb function and more. Set it to none to hide.

Stroke Width

Set the thickness of the stroke. It can be set to any positive number.

Stroke Linecap

Set the shape to be used at the end of a line or open subpath.

Stroke Linejoin

Set the shape to be used at the corners of paths and basic shapes when they are stroked.

Fill Color

You can set any color value that is valid in CSS. This includes named colors, hex codes, the rgb function and more. Set it to none to hide.