JSFiddle - React, Tailwind, and code Playground
HTML
<div id="strategy"></div>
CSS
body {
background: black;
}
JavaScript
/*
* Lazy Line Painter
* SVG Stroke animation.
*
* https://github.com/camoconnell/lazy-line-painter
* http://www.camoconnell.com
*
* Licensed under the MIT license.
*
*/
(function($) {
'use strict';
var dataKey = 'lazyLinePainter';
var methods = {
/**
* init
* Public function responsible for caching user defined options,
* creating svg element and setting dimensions.
* @public
* @param {object} _options user defined options
*/
init: function(_options) {
return this.each(function() {
var $this = $(this);
var data = $this.data(dataKey);
$this.addClass('lazy-line');
// If the plugin hasn't been initialized yet
if (!data) {
// Collect settings, define defaults
var options = $.extend({
'width': null,
'height': null,
'strokeWidth': 2,
'strokeColor': '#000',
'strokeOverColor': null,
'strokeCap': 'round',
'strokeJoin': 'round',
'strokeOpacity': 1,
'arrowEnd': 'none',
'onComplete': null,
'onStart': null,
'delay': null,
'overrideKey': null,
'drawSequential': true,
'speedMultiplier': 1,
'reverse': false,
'responsive': false
}, _options);
// Set up path information
// if overrideKey has been defined - use overrideKey as key within the svgData object.
// else - use the elements id as key within the svgData object.
var target = options.overrideKey ?...