React Vivus

This react component allows you to make drawing animation on SVG.

This component makes use of vivus.js plugin.

Installation

To install this component, run yarn add react-vivus or npm install react-vivus --save, Don't forget to install vivus by running yarn add vivus or npm install vivus --save.

Usage

To use the component, in your react application just do

import React from 'react';
import ReactVivus from 'react-vivus';
import svg from './example.svg';
 
const MyComponent = () => (
  <ReactVivus
    id="foo"
    option={{
      file: svg,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    style={{ height: '100px', width: '100px' }}
    callback={console.log}
  />
);
export default MyComponent;
 

Click here to download the sample svg

You can view all the different options to create a custom animation to draw your SVG in whatever way you like here https://github.com/maxwellito/vivus#option-list