Cubic Bezier Mouse

The picture below is a draggable cubic bezier curve. It is drawn using the SVG path element. The 'd' attribute of this element uses the M and C commands:

1. M: Move: one (x, y) pair, the current point is moved to the start point.
2. C: Curveto: two (x, y) pairs which are the control points, then another (x, y) pair which is the end point.

The initial position of the curve is given by a path element with: d=M100,200 C100,100 250,100 250,200.

The circles can be dragged using the mouse. They are coloured as follows:

• The start point is green
• Control point one is blue
• Control point two is brown
• The end point is red.