animate-vector

A React component that animates SVG paths by drawing them sequentially. It supports loading SVGs from a string or a URL and allows for customizable animation timings.

Installation

npm install animate-vector

Usage

import React from 'react';
import SVGPathAnimator from 'animate-vector';

const App = () => {
  return (
    <div>
      {/* Load from URL */}
      <SVGPathAnimator 
        src="/path/to/image.svg" 
        duration={3000} 
        stagger={100} 
        strokeWidth={2}
        className="my-svg-class"
      />

      {/* Or using an SVG string */}
      <SVGPathAnimator 
        svgString="<svg>...</svg>" 
      />
    </div>
  );
};

Props

| Prop | Type | Default | Description | |:------------------|:---------------------|:--------|:-----------------------------------------------------------------| | src | string | - | URL to the SVG file. | | svgString | string | - | Raw SVG content string. | | duration | number | 2000 | Duration of the drawing animation per path (ms). | | fillDelay | number | 250 | Delay before the fill animation starts after drawing (ms). | | reverseDuration | number | 300 | Duration of the reverse (undraw) animation (ms). | | stagger | number | 0.25 | Delay between starting animation for each path (ms). | | enableReverse | boolean | true | Enables double-click/touch interaction to reverse the animation. | | strokeWidth | number | string | - | Overrides the stroke width for all paths. | | className | string | - | CSS class(es) to apply to the root SVG element. |

SVG Data Attributes

You can also embed configuration directly into your SVG file using data- attributes on the root <svg> element. These values override the props passed to the component.

<svg 
  viewBox="0 0 100 100" 
  data-duration="3000" 
  data-stagger="100"
  data-fill-delay="500"
  data-enable-reverse="false"
  data-stroke-width="2"
>
  ...
</svg>

Features

• Automatic Path Detection: Finds and animates all paths in the SVG.
• Interaction: Double-click or touch to reverse and restart the animation (configurable).
• Reduced Motion: Respects the user's prefers-reduced-motion setting.

Author

Oliver R. Fox
https://ofox.co.uk