Quadratic Bezier Mouse

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

1. M: Move: one (x, y) pair, the current point is moved to the start point.
2. Q: Curveto: one (x, y) pair which is the control point, 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,250 Q250,100 400,250"

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

• The start point is green
• The control point one is blue
• The end point is red.