Components/SVG Morph2 / 25

SVG Morph

Code

<AnimeMorph target={targetRef} duration={800} ease="inOutQuad" alternate loop autoplay deps={[shape]}>
  <polygon points={shapeA} />
</AnimeMorph>

Morph between different SVG path shapes smoothly.

Live preview

SVG MorphPolygon path morphing via AnimeMorph

Props

Name	Type	Default	Description
target	RefObject	-	Target polygon/path ref
duration	number	1000	Morph duration in ms
ease	string	'inOutQuad'	Easing function
alternate	boolean	false	Reverse direction each iteration
loop	boolean	false	Loop the morph
deps	unknown[]	[]	Re-run when the shape changes

Move elements along an SVG motion path

Circle, diamond, star, and wipe clipPath reveal animations

Animate SVG path drawing with stroke-dashoffset

1	<AnimeMorph target={targetRef} duration={800} ease="inOutQuad" alternate loop autoplay deps={[shape]}>
2	<polygon points={shapeA} />
3	</AnimeMorph>