Components/SVG Draw3 / 25

SVG Draw

Code

<AnimeDraw draw={['0 0', '0 1', '1 1']} delay={index * 100} duration={2000} ease="inOutQuad" loop autoplay>
  <path d={svgPath} stroke="currentColor" strokeWidth={2} />
</AnimeDraw>

Animate SVG path drawing with stroke-dashoffset.

Live preview

SVG DrawStaged stroke draw via AnimeDraw

Props

Name	Type	Default	Description
draw	string[]	-	Draw range keyframes
duration	number	1000	Draw duration in ms
ease	string	'inOutQuad'	Easing function
delay	number	0	Start delay (use index * N to stagger)
loop	boolean	false	Loop the draw

Related components

✦

ClipPath Reveal

Circle, diamond, star, and wipe clipPath reveal animations

SVG Morph

Morph between different SVG path shapes smoothly

SVG Motion Path

Move elements along an SVG motion path

SVG Morph SVG Motion Path

1	<AnimeDraw draw={['0 0', '0 1', '1 1']} delay={index * 100} duration={2000} ease="inOutQuad" loop autoplay>
2	<path d={svgPath} stroke="currentColor" strokeWidth={2} />
3	</AnimeDraw>