JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<html>
    <style>
        #canvas
        {
        border-style:solid;
        border-width:1px;
        }
    </style>
    <div id="canvas"> 
        <p>Hover over me</p>        
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</html>

JavaScript

$(function() {

    animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
        $('#' + hoverDivName).hover(

        function() {
            var line = canvas.path(pathString).attr({
                stroke: colorNumber
            });
            var length = line.getTotalLength();

            $('path[fill*="none"]').animate({
                'to': 1
            }, {
                duration: 5000,
                step: function(pos, fx) {
                    var offset = length * fx.pos;
                    var subpath = line.getSubpath(0, offset);
                    canvas.clear();
                    canvas.path(subpath).attr({
                        'stroke-width': 3,
                        stroke: colorNumber
                    });

                },
            });
        }, function() {
            $('path[fill*="none"]').stop(true, false).fadeOut();
        });
    };

    var canvas = Raphael('canvas', '337.533', '113.265');
    var pathString = "M0,1.417h207.023c7.109,0,12.875,5.765,12.875,12.876v84.68 c0,7.112,5.766,12.875,12.876,12.875h90.467c7.111,0,12.875-5.763,12.875-12.875V38.886c0-7.111-5.764-12.876-12.875-12.876h-61.533 c-7.11,0-12.876,5.765-12.876,12.876v46.585c0,7.112,5.766,12.875,12.876,12.875h40.315c7.111,0,12.876-5.763,12.876-12.875V62.999 c0-7.111-5.765-12.875-12.876-12.875h-22.954c-7.111,0-12.877,5.764-12.877,12.875v5.11c0,7.112,5.766,12.875,12.877,12.875h10.415 c7.111,0,12.877-3.238,12.877-7.232c0-3.993-5.766-7.232-12.877-7.232H118.629";

  
  
    animateLine(canvas, "canvas", "#000", pathString);

});