SVG Path Generator & Bezier Curve Visualizer

Stop guessing coordinates. Visually build cubic bezier curves and instantly copy exact<path d="..."> strings or GSAP MotionPath snippets for your web animations.

Raw SVG Path

<path d="M 50 250 C 150 50, 350 50, 450 250" />

GSAP MotionPath

gsap.to(".element", {
  motionPath: {
    path: "M 50 250 C 150 50, 350 50, 450 250"
  },
  duration: 2
});

How to Use the SVG Path Visualizer

Creating complex vector shapes by hand-coding SVG d attributes is tedious. This tool provides a drag-and-drop canvas to make math visual:

  1. Drag the Anchor Points: Move the start and end nodes to set the boundaries of your curve.
  2. Adjust the Handles: Drag the control points (the handles connected by dashed lines) to manipulate the cubic bezier curve's tension and direction.
  3. Copy the Code: The exact coordinates (M, C) are calculated in real-time. Copy the raw SVG path or the pre-formatted GSAP object directly into your project.

Perfect for GSAP Animations

If you are using the GreenSock Animation Platform (GSAP), getting elements to move along a custom trajectory requires the MotionPathPlugin. This generator outputs code specifically formatted for GSAP timelines, saving you from formatting errors.

Understanding the SVG "d" Attribute

The output string uses standard SVG path commands. M (Move To) establishes the starting coordinate. C (Curve To) defines a cubic bezier curve using two control points and a final destination point.