Vector Morph Editor
Pair anchors with the same numbers on two closed outlines, then interpolate their coordinates over time. Drag each anchor or move it with the keyboard and numeric fields; rotate the end shape's point order to change its correspondence. Inspect in-between frames and self-intersection warnings, then save a selected frame, a contact sheet or a back-and-forth SVG animation. This editor handles one closed outline with 3–16 paired points. It does not automatically match arbitrary SVG files, holes, multiple subpaths or complex curves.
Key features
- Edit 3–16 paired anchors by dragging, arrow keys or numeric coordinates
- Insert or remove matching point pairs and rotate or reverse end-point correspondence
- Paste one closed M/L/H/V/Z SVG polygon path into either shape
- Reproduce exact endpoints, inspect 2–24 frames and warn about self intersections
- Download a selected frame, a contact sheet, a reversing animation SVG or settings JSON
How to use
- Compare the example's start and end outlines and note how equal point numbers correspond.
- Drag points or enter coordinates for both shapes. Add paired points or adjust end-point order where needed.
- Set the frame count and curve smoothness, then use the slider or numbered frames to inspect the transition.
- If a self-intersection warning appears, review the listed frames and revise point positions or correspondence.
- Download the current frame SVG, a sheet of all frames or a reversing animated SVG.
Use cases
- Draft a simple transition from one icon outline to another
- Check whether paired logo outlines fold through themselves
- Create a sheet of interpolation steps for design teaching
Frequently asked questions
Why must both outlines have the same number of points?
An interpolated SVG path needs a matching command and point topology. This tool pairs points by number, so additions and removals affect both outlines together.
Can I upload an entire SVG file?
No. You can paste the path d value for one closed polygon using M, L, H, V and Z commands, including their relative forms. Curves, holes and multiple subpaths need simplification first.
What does the self-intersection warning mean?
It indicates that non-neighboring edges of an interpolated outline cross. Intentional star shapes may trigger it, and it does not block export. Curved paths are tested by segment sampling, so very tiny crossings may be missed.
How does the exported SVG animate?
Matching path d commands use SVG animate to travel start→end→start. Viewer support varies. When reduced motion is requested, the SVG displays a static start shape instead.
Can I import the settings JSON later?
This version downloads JSON for reference or backup but does not import the whole JSON file. You can paste a path d value to continue shape editing.
Privacy
Shape coordinates and SVG generation stay in browser memory. This tool does not send the design to its server API.
Comments & questions