SVG stroke animation test

by Jayson Buquia

HTML

<svg id="draw1" width="100%" height="350px">
    
    <defs>
        <style>
           
        </style>
    </defs>
    
    <path id="path1" d="m196.5,193.5c-31,22 -86,-2 -21,-61c65,-59 45,-12 11,78c-34,90 -98,68 -10,-5c88,-73 48,-24 47.5,-24.5c0.5,0.5 22.5,-34.5 -16.5,1.5c-39,36 12,2 25,-9c-9,15 -16,25 -5,19c11,-6 54,-52 44,-24c5,-9 -8,-11 -20,5c-12,16 -13,31 10,20c23,-11 56,-30 48,-33c-8,-3 -18,5 -32,21c-14,16 -2,23 19,11c21,-12 75,-55 44,-58c-31,-3 -104,5 -153,41c-49,36 -39,65 61,57c100,-8 149,-37 148,-57c-1,-20 -42,-6 -79,17c-37,23 -83,54 -110,68c-27,14 -74,-23 54,-21    " opacity="0.5" fill-opacity="null" stroke-opacity="null" fill="#fff"/>
</svg>

CSS

@keyframes strokeAnimate { 
    from {
        stroke-dashoffset:2500;
    }
    to {
        stroke-dashoffset:0;
    }
}

#path1 {
    stroke-width:1.5;
    stroke:#000;
    stroke-dasharray:2500;      
    animation-name : strokeAnimate;
    animation-duration : 5s;
    animation-direction: forwards;
    animation-timing-function : cubic-bezier(.31,.87,.44,1);
}

JavaScript

console.log('#path1');