No Login Data Private Local Save

SVG Morphing Playground – Online Smooth Path Transformation

2
0
0
0

SVG Morphing Playground

Smooth path transformation between any two SVG shapes — live preview, export ready.

Source Shape
Source Target
0%
100%
Target Shape
Frequently Asked Questions
What is SVG morphing and how does it work?

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.

Why do sample points matter for morphing quality?

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.

Can I use custom SVG paths from Illustrator or Figma?

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.

What easing functions are available and when should I use them?

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.

How do I export the morphing 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.

What's the difference between Loop and Ping-Pong modes?

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.

Why does my custom path look distorted after morphing?

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.