Search code examples
javascriptjquerycsssvgvivus

svg animation letter by letter fill vivus.js

I'm aiming for an attempt to make this handwriting look as natural as possible as if written with a pen.

I think the best option is filling each letter after they've been written but so far all I have managed to do is filling after the entire animation is finished using:

      $('path').attr('style', 'fill:white');

How would I achieve this after each letter has finished animating, or does anyone have a better option? Here's the unfilled state:

https://codepen.io/anon/pen/WjBeWG

Solution

  • This took me a while to get but I finally have the answer...
    1 ) Remove all the fill:none hard coded into the SVG code
    2 ) In the CSS, add:

    path {
  transition: 1s fill;
  fill: transparent;//transparent is animatable, "none" isn't
}

    3 ) Add this to the jQuery:

    //Target each of the paths
$("svg path").each(function(i){
  var path = $(this);//Store the element (setTimeout doesn't have access to $(this)...
  setTimeout(function(){
    path.css("fill", "white");
  }, 400 + 400*i);//Add a delay based on the path's index

});
//The following is only necessary to reset on the "click" event...
$(document).click(function(){
  $("path").css({"fill":"black"});
  $("svg path").each(function(i){
  var path = $(this);
  setTimeout(function(){
    path.css("fill", "white");
  }, 400 + 400*i);

});

    Here's an example on my CodePen:
    https://codepen.io/jacob_124/pen/aWrbQg?editors=0010