PathMorph Plugin

The PathMorph plugin is used to smoothly animate one SVG <path> into another. It automatically handles matching up the number of points and converting different SVG commands (like Arcs, Quadratic Beziers, Lines) so that the morph is always clean and seamless.

1. Basic Usage

To morph a shape, simply provide the target path data to the morphPath property. You can use a raw SVG path string (like M10...) or you can pass in a CSS selector of an existing <path> on the page!

Use the playback controls below

60 FPS

---

2. Concurrent Properties

Because PathMorph evaluates entirely within the core AnimX rendering loop, it is just a standard tween property. This means you can concurrently animate any other CSS property (like fill, rotate, scale, or stroke-dashoffset) in the exact same tween config, and AnimX will orchestrate them perfectly together.

Use the playback controls below

60 FPS

---

3. Sequence Chaining

Since PathMorph produces a standard Tween instance, you can simply push them onto an timeline() to sequence complex shapes together.

Use the playback controls below

60 FPS

4. Native SVG Primitives

PathMorph natively supports animating SVG primitive shapes (<circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line>). When passed to the morphPath property, these shapes are automatically converted into paths. To animate a primitive target directly, use the PathMorph.convertToPath() utility to transform the DOM element into a <path> before morphing.

60 FPS

---

5. Media Controls

A common UI pattern is morphing a "Play" button into a "Stop" or "Pause" icon smoothly.

Click the buttons below

60 FPS

---

6. Status Indicators

Smoothly transition between validation states without loading multiple distinct icons.

Change validation state

60 FPS

---

7. Emotive Feedback

Since PathMorph handles Quadratic and Cubic beziers smoothly, you can create dynamic expressions.

Make a face

60 FPS

---

8. Complex Geometry Interpolation

PathMorph intelligently interpolates the difference in vertex counts. Here we map a 3-sided Triangle to a 6-sided Hexagon to a 12-sided Plus symbol.

60 FPS

9. Organic to Structured

Morph between an organic, curved shape and a structured, straight-edged block.

60 FPS

---

10. Loading States

PathMorph supports stroked, unfilled paths. This example demonstrates morphing a loading circle into a checkmark stroke.

60 FPS

---

11. Weather & Nature

Morphing shapes like weather icons can effectively communicate state changes in UI widgets.

60 FPS

---

12. Audio Visualizer Waves

PathMorph supports open paths. This example morphs between a flatline, a smooth sine wave, and a jagged wave.

60 FPS

---

13. Directional Arrows

A path can be morphed to change its visual direction without relying on CSS transforms.

60 FPS

---

14. Data Visualization

Morphing between chart types provides a seamless transition when switching data views on a dashboard.

60 FPS

---

15. Responsive Devices

Visually transition between mobile, tablet, and desktop viewport representations.

60 FPS

---

16. Gaming Elements

Demonstrates complex SVG transitions, such as morphing a heart into a shield or sword.

60 FPS

---

17. Programmatic Morphing

Raw JavaScript objects can be morphed independently of the DOM, which is useful for rendering SVG data to a <canvas>, WebGL context, or a reactive frontend framework. The from and to paths can be explicitly declared using an object syntax.

Animate in memory

M 10 50 L 50 10 L 90 50 L 50 90 Z

60 FPS

---

API Reference

Tween Properties

The morphPath property is simple to configure.

Property	Type	Default	Description
morphPath	string|Element|Object	null	The target path. Can be a raw SVG string, a CSS selector, a DOM element, or an explicit object: { from: 'M...', to: 'M...' } to force starting and ending paths.

---

Supported Callbacks

Because PathMorph runs natively within the AnimX engine, it inherently supports all standard tween lifecycle callbacks.

Callback	Description
onStart	Fires when the morphing animation begins.
onUpdate	Fires every frame during the morph. Perfect for programmatic rendering (Canvas/WebGL) using the newly interpolated d string.
onComplete	Fires when the target shape is fully reached.
onRepeat / onReverseComplete	Fires during looping and reversing.

---

Note: PathMorph automatically reads and converts native SVG primitives (<rect>, <circle>, <ellipse>, <line>, <polygon>, <polyline>) into path data for the morphPath property! If your target animation element is a primitive, you can use the PathMorph.convertToPath(element) utility to quickly swap it into a <path> in the DOM before animating.

Utility Functions

The PathMorph module also exports its powerful internal geometry parser and rendering engine for manual usage:

Function	Arguments	Returns	Description
parsePath(d)	d (String): Raw SVG path data	Object: { startX, startY, beziers, isClosed }	Converts any raw SVG path string into an array of pure cubic beziers. beziers is a flat array: [cp1X, cp1Y, cp2X, cp2Y, endX, endY, ...].
renderPath(start, beziers, isClosed)	start (Array): [x, y] beziers (Array): Flat bezier coordinates isClosed (Boolean): Append Z command?	String: Compiled d attribute string	Recompiles a parsed bezier array back into an optimized SVG path string.