D3.js Quick Start Guide

Cubic Bezier curves

There are two types of Bezier curves:

• Bezier curves (http://blogs.sitepointstatic.com/examples/tech/svg-curves/cubic-curve.html)
• Quadratic Bezier curves (http://math.hws.edu/eck/cs424/notes2013/canvas/bezier.html)

Each curve is made up of four points:

• Start point
• End point
• Starting control point
• Ending control point

The start/end points are where the curve starts and ends. The control points define the shape of the curve. It's easiest to conceptualize it with the following diagram:

As we manipulate the control points, we can see how the shape of the curve is affected:

You can even join multiple Bezier curves together, ...