SVG Morphing Playground – Online Smooth Path Transformation

SVG morphing is the smooth transformation of one vector shape into another by interpolating their path data. This tool samples both paths into an equal number of points, then uses Catmull-Rom spline interpolation to generate smooth intermediate frames. The result is a fluid animation that transitions seamlessly between any two shapes — regardless of their original path structure.

Sample points determine how precisely the morphing captures each shape's contour. More points (150-300) preserve fine details like star tips or sharp corners. Fewer points (20-60) create abstract, geometric transitions that can be visually striking. We recommend 80-120 for most use cases — balancing performance and fidelity.

Yes! Paste any valid SVG path d attribute into the Custom Path textarea. The tool automatically normalizes both paths to have the same number of sample points. For best results, ensure your paths use absolute coordinates and fit within a 200×200 viewBox, or adjust coordinates proportionally. Complex paths with many subpaths (multiple M commands) will be sampled as a single continuous contour.

We support 8 easing curves: Linear (mechanical, constant speed), Ease In-Out (natural acceleration and deceleration — default), Ease In (slow start), Ease Out (slow end), Back variants (overshoot effect), Elastic Out (spring-like bounce), and Bounce Out (ball-drop feel). Choose based on the emotional tone of your animation.

Click Export SVG to download a standalone SVG file with embedded SMIL animation that plays in any modern browser. The exported file includes both source and target paths with the morphing animation configured to your current settings. You can also use Copy Current Path to grab the interpolated path at any frame for use in other tools.

Loop mode restarts the animation from the source shape after reaching the target, creating a repetitive A→B→A→B cycle. Ping-Pong mode smoothly reverses direction at each endpoint, producing an A→B→A→B back-and-forth motion without abrupt resets. Ping-Pong is ideal for breathing or pulsing effects.

Distortion usually occurs when the source and target paths have drastically different structures (e.g., open vs. closed, or very different scales). The tool normalizes both to the same number of points, but extreme structural differences can cause intermediate frames to self-intersect. Try increasing sample points or ensuring both paths are closed (end with Z) for cleaner results.