Bézier Curve Playground

Drag control points to shape curves. See the math in action.

P0 (start) P1 (control) P2 (control) P3 (end)

SVG Path

Coordinates

P0 (start):
P1 (control):
P2 (control):
P3 (end):

Curve Type

Tips

  • • Drag any point to reshape
  • • Control points determine curve direction
  • • Click Animate to see how the curve is traced