How do I add an SVG path morph animation?

Paste two elements (from and to), set Duration, and click Add morph. SMIL is inserted on the first path and loops.

How is path morph different from the SVG Animation Editor?

The animation editor is the full timeline hub. This page only writes a d morph between two paths — no gradient, no motion along a track, no text fill animation.

Do the two paths need the same number of commands?

Yes for a smooth tween. Matching M/C/L structure interpolates; mismatched commands jump. Convert Smooth Curves to Lines if you need equal polylines first.

Does morph convert paths to CSS keyframes?

No. Output is SMIL on the path element, which browsers play in the live preview. Animated SVG Text Gradient is the CSS/gradient loop, not a d tween.

SVG Path Morph Animation — Free Tool

FAQ

Quick answers

How do I add an SVG path morph animation?: Paste two <path> elements (from and to), set Duration, and click Add morph. SMIL <animate attributeName="d"> is inserted on the first path and loops.
How is path morph different from the SVG Animation Editor?: The animation editor is the full timeline hub. This page only writes a d morph between two paths — no gradient, no motion along a track, no text fill animation.
Do the two paths need the same number of commands?: Yes for a smooth tween. Matching M/C/L structure interpolates; mismatched commands jump. Convert Smooth Curves to Lines if you need equal polylines first.
Does morph convert paths to CSS keyframes?: No. Output is SMIL on the path element, which browsers play in the live preview. Animated SVG Text Gradient is the CSS/gradient loop, not a d tween.

Animation editor → Animated text gradient → Curves → lines → Bake transforms →

Privacy Terms

Source

Duration

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

SVG Path Morph Animation

Live preview