Web Tools Lab

Raw SVG Path

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

CSS cubic-bezier Easing

transition-timing-function: cubic-bezier(0.25, 200, 0.75, 200);

GSAP MotionPath

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

How to Use the Cubic Bezier & SVG Path Visualizer

Hand-coding SVG d attributes or guessing CSS animation curves leads to constant trial and error. This interactive visualizer bridges geometry and animation easing in real-time:

Drag Control Handles: Move start/end points and handle control arms to adjust curve curvature, slope, and direction.
Paste Existing SVG Paths: Input any existing d="..." string into the importer to tweak handle coordinates on canvas.
Export Custom Code: Copy raw SVG path C-commands, standard CSS cubic-bezier() easing functions, or GSAP MotionPath objects in one click.

SVG Path Geometry vs CSS Easing Curves

SVG path cubic beziers (C x1 y1, x2 y2, x y) render visual coordinates in 2D vector space. CSS easing curves (cubic-bezier(x1, y1, x2, y2)) dictate animation progression over time. This tool provides instant conversion between spatial vectors and timing curves.

GSAP MotionPath Ready Output

For GreenSock users, moving elements along custom trajectories requires formatted path strings. Export clean cubic bezier arrays or SVG path strings tailored for direct integration into MotionPathPlugin timelines.

Frequently Asked Questions

What is the difference between an SVG cubic bezier path and CSS cubic-bezier()?

An SVG cubic bezier path command (C) defines actual spatial geometry coordinates on a 2D canvas, whereas CSS cubic-bezier(x1, y1, x2, y2) defines a timing easing function for CSS transitions and animations over time.

Can I paste an existing SVG d-string to edit cubic bezier control points?

Yes. You can paste any raw SVG path d-string into the editor to extract and visually manipulate its cubic bezier anchor and handle control points.

Can I use the output with GSAP MotionPathPlugin?

Yes. The path generator exports coordinates pre-formatted for direct usage inside GSAP MotionPath animations and timelines.

What export formats are supported?

The tool exports standard SVG path d-attributes (M, C commands), CSS transition cubic-bezier() functions, and GSAP MotionPath configuration objects.