Build a complete, working, single-file HTML tool for smoothly animating between SVG shapes.

Include all CSS and JavaScript in the HTML. It must run locally in a modern browser without a build process, server or external runtime dependencies.

**Core animation**

- Accept 2–5 SVG states through upload or drag and drop.
- Allow replacing, removing and reordering states.
- Morph corresponding paths using cubic Bézier interpolation.
- Reconcile different segment counts through curve subdivision that preserves their geometry.
- Provide path pairing, direction reversal and starting-anchor alignment controls.
- Clearly explain incompatible structures without silently dropping or distorting shapes.
- Include a working three-state example on first launch.

**SVG support**

Support paths, circles, ellipses, rectangles, lines, polygons, polylines, compound paths and transforms. Support safe local `<defs>`, `<use>`, basic SVG styles and linear/radial gradients.

Sanitize imported SVGs before displaying them. Remove scripts and event handlers, block external resources, detect circular references and limit excessive file complexity. Give actionable errors for unsupported features.

**Animation controls**

Include play/pause, restart, timeline scrubbing, previous/next state, continuous looping, play once and ping-pong.

Provide global and per-transition durations, hold duration, easing presets and an editable cubic Bézier easing curve.

Each state must have independent shape and background colours that interpolate during transitions.

**Per-shape strokes**

For every shape in every state, provide:

- Stroke colour and width.
- Solid, dashed and dotted styles.
- Dash length, gap and offset.
- Moving-dash animation with direction and speed controls.
- Reset to the imported stroke.

Animate stroke width, colour and dash settings between states. Preserve imported strokes until edited. Render dotted strokes as round dots and support seamless looping dash motion.

**Canvas and layout**

Keep the entire canvas fitted to the available preview area.

Dragging should move the artwork within the canvas. Mouse-wheel scrolling should scale the artwork around the pointer. Both actions must affect the exported composition.

Do not add camera panning, camera zoom, nudge arrows, nudge-step controls or padding controls.

Group these controls in one Layout section:

- Canvas ratio, width and height.
- Artwork X/Y position.
- Artwork scale.
- Reset layout.

Include square, 16:9, 9:16, 4:5, A4 portrait, A4 landscape and custom dimensions. Include no other A-series presets.

**Layers**

Support one uploaded image behind the morphing artwork and another in front. Both remain fixed throughout the animation.

Each image layer needs independent show/hide, opacity, fit and blend-mode controls. Hiding a layer must preserve its image and settings.

Give the shape layer independent opacity and blend-mode controls.

**Inspection**

Provide optional outline view, anchor points, Bézier handles, anchor coordinates and control-point coordinates.

Give every inspection item independent size and colour controls. Keep marks readable at different preview sizes. Allow including or excluding inspection overlays from exports.

**Undo and profiles**

Add undo/redo buttons and standard keyboard shortcuts. Cover control changes, strokes, layout, state operations, image changes and profile loading. Treat a continuous drag or slider gesture as one undoable action.

Allow saving and loading controls as JSON profiles, including per-state colours, per-shape strokes, timing, layout and layer settings. Clearly explain that profiles contain settings rather than uploaded assets. Validate profiles before applying changes.

**Export**

Export the current frame as SVG or PNG, animation as MP4 or WebM, and a PNG sequence packaged as a ZIP.

Support custom dimensions and resolutions up to a 4096-pixel longest edge.

Check actual encoder support at the requested dimensions and frame rate. Never silently switch MP4 to WebM, rename another format to `.mp4`, or reduce the selected resolution. If a configuration is unavailable, explain the limitation and offer alternatives.

Use the same composition and styling in preview and export. Include progress and cancellation for longer exports.

**Interface**

Use a minimal black-and-white design with light and dark modes.

Place the tool name, a simple vector logo, undo/redo, save/load profile controls and appearance toggle in a top header.

Arrange layout, motion and geometry controls in the left sidebar; the preview and state timeline in the centre; and stroke, inspection, layer and export controls in the right sidebar.

Use concise labels, avoid decorative annotations and make the interface adapt to narrower screens without overlapping controls.

**Delivery**

Deliver the finished HTML file. Test imports, interpolation, mouse controls, undo/redo, profile loading, layer visibility and exports. Verify that exported videos have the correct container, dimensions and changing frames.

Build the actual functioning tool, not a mockup.