SVGStrokeAnimation

A JavaScript SVG library for the modern web..

About

This is a study project. We are keen to receive feedback on it or ideas for new features.

The library is currently under development and functionality is limited.

Usage

Installation

To use SVGStrokeAnimation in your application, you need to install it first. You can do this via npm:

npm i svg-stroke-animation

Animation

SVGStrokeAnimation provides a simple API to enable animation for svg.

//Add your svg
<svg version="1.1" id="exemple"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 1115 700" enable-background="new 0 0 1115 700" xml:space="preserve">
      <polyline fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" points="594.25,223.5 699.375,249.5 713.438,285.5 739.469,291.5 752.484,316 773.492,320.5 775.746,328 824.5,339 824.5,372 1066.5,428.5 1072.5,456.5 "/>
    </svg>

<script>
    const exemple = new svgStrokeAnimation({
        //define the parameters
        selector: '#exemple',
        duration: 3500,
        easing: 'linear',
        strokeWidth:10,
        loop: true,
        replay : true,
        color : '#ff0000'
    });

    exemple.draw();
</script>

Parameters

This is the list of parameters available to custom your svg

// select the svg of the id
id= '#exemple'

//Boolean to enable the loop
loop=true

//Set the color
color="#0CB8E8"

//Set the time duration of the animation in ms
duration=4000

//Set the easing style of the animation based on https://gizma.com/easing/
ease="linear"

//Set the width of the stroke in the svg
strokeWidth=10

//Boolean to enable the replay on click
replay=true

License

MIT © Jonathan Boungnaseng and Pierre-Alexis Maerten