Blog

what's on my mind

Simple SVG Path Animation plugin

/ / Animation / Front-End / Web Design / Web Development / 0 comments

I was looking for a simple way to have a handwriting animation for fonts. My use case was for animating a simple text based logo and adding a bit of a cool factor to a website. After some research, I found a jQuery plugin that was easiest to use:

http://lazylinepainter.info/

It’s more of a path outliner tool than a handwriting tool, but still a cool effect nonetheless.

See the Pen Handwriting SVG Test by Andre Madarang (@drehimself) on CodePen.

Preparing a SVG file

  1. Fire up Illustrator, write some text in your favourite font, and make it big!
  2. Right Click on the text and select “Create Outlines”
  3. Go to Object -> Artboards -> Fit to Artwork Bounds
  4. Go to File -> Save As and save your work as a .svg file

Drop your .svg file into the JS converter

  1. Go to: http://lazylinepainter.info/ and drop your saved svg file into the indicated section. After a few moments, it will show a preview as well as some JavaScript code you can copy.

Putting it all together

I recommend using CodePen here to follow along!

  1. Make sure the two JavaScript dependencies are included: JQuery, and the lazy line painter library.
  2. Paste the JavaScript code in the JavaScript portion of CodePen
  3. The pathObj object should have a field name that matches your filename. So if your svg file was named andre.svg, there should be a “andre” field name.
  4. In the HTML portion of CodePen, add:
    <div id="andre"></div>
  5. Within the document ready function make sure you replace the appropriate selector. For example:
    $('#andre').lazylinepainter( 
     {
        "svgData": pathObj,
        "strokeWidth": 2,
        "strokeColor": "#e09b99"
    }).lazylinepainter('paint'); 

    That’s it! Here’s what we end up with:

    See the Pen Lazy Line Painter Example by Andre Madarang (@drehimself) on CodePen.

  6. Feel free to change the strokeWidth or strokeColor. Furthermore, each “path” object corresponds to each letter and has a duration value. Change it to speed up or slow down the animation to your liking.

Filling in the text

Unfortunately, this plugin only outlines the paths and cannot fill in the text with colour. However, we can sort of trick it into doing so. There exists an option called “onComplete” that fires when the animation completes. At that point, we can load the actual svg and hide the animated “outlined” one. For example:

$('#andre').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99",
    "onComplete": function() {
      $('#andre-filled').fadeIn();
      $('#andre').lazylinepainter('erase');
}).lazylinepainter('paint'); 

Here is the original example again, where you can see it in action:

See the Pen Handwriting SVG Test by Andre Madarang (@drehimself) on CodePen.

Works great with normal vector images as well

See the Pen Lazy Line Painter Example 2 by Andre Madarang (@drehimself) on CodePen.

Leave a Comment

Comment *
Name *
Email * (will not be visible)
Website