Chapter 263: MorphSVGPlugin (Overview)

Core Idea

Morphs one SVG <path> shape into another by animating the d attribute data, letting a shape smoothly reshape into a completely different one.

Code Examples

gsap.registerPlugin(MorphSVGPlugin);
gsap.to("#circle", { duration: 1, morphSVG: "#lightning" });

Key Takeaways

1. Technically only <path> (and <polyline>/<polygon>) can be morphed directly — use convertToPath() first for <circle>/<rect>/<ellipse>/<line>.

Connects To

• MorphSVGPlugin.convertToPath(): converts basic shapes into morphable paths.
• DrawSVG: a related SVG plugin for revealing strokes rather than reshaping them.