Comm 333 Web Design II

Skip to navigation

Lazy Line Painter Instructions

You can use the JavaScript plugin Lazy Line Painter to easily create sophisticated SVG line animations. This plugin is great to use because it allows you to simply upload an SVG line drawing and it will create the necessary JavaScript for you.

  1. Lazy Line Painter is a jQuery plugin, so you must include jQuery on your page before any Lazy Line JavaScript. Use the Google CDN link to jQuery.

  2. Download the Lazy Line Painter code from the GitHub website. Unzip the file and find the minified version of the Lazy Line Painter script. It should be named something similar to jquery.lazylinepainter-1.7.0.min.js. The version number could be slightly different.

    Include the script on your page below where you include jQuery.

  3. Export your SVG drawing from Illustrator:
    • Make sure you're using line paths (no shapes)
    • None of your paths should close
    • No fills
    • Crop your artboard to your artwork bounds

  4. Drop your exported SVG file into the Svg to Lazy Line Converter on the Lazy Line Painter website. It's about 3/4 to the end of the page.

  5. Copy the generated code and paste it into a new file. Save it as a JavaScript file and include that file in your web page below the two other JavaScript links.

  6. Open the JavaScript file you just saved. Find the section at the top and look for something similar to your SVG filename. In the example below, the SVG file we uploaded was called "sloppy-bear.svg".

    var pathObj = {
  "slopppy-bear": {
    "strokepath": [

    Make note of the name.

  7. Scroll to the bottom of the JavaScript file and find the following section:

    /* 
  Setup and Paint your lazyline! 
*/ 

$(document).ready(function(){ 
  $('#undefined').lazylinepainter(

    Change the text undefined to the name you found above. In our demo, it's sloppy-bear

    /* 
 Setup and Paint your lazyline! 
 */ 

 $(document).ready(function(){ 
 $('#sloppy-bear').lazylinepainter(

  8. Open your HTML file and add an element with an id of the name above. This is where your SVG animation will be drawn. A div element is probably fine in this case. In our example, we just use an empty div with an id of sloppy-bear.

    <div id="sloppy-bear"></div>

Configuring Options to Your Animation

Lazy Line Painter allows you to configure some options for your animation. You can either do this for the entire animation or for each path.

In the example below, we changed the stroke width and color for each path. The first path is the donut and the second is the frosting. The options get added below each path in object literal syntax.

var pathObj = {
  "donut": {
    "strokepath": [
      {
        "path": "m194,71c0,-1 0.14728,-2.1731 -1,-3c-1.814,-1.30745 -2.88153,-2.19028 -6,-4c-1.93399,-1.12234 -3.70267,-2.54136 -7,-4c-3.77063,-1.66801 -7.70267,-3.54136 -11,-5c-3.77065,-1.66801 -6.97734,-2.09544 -11,-3c-4.97479,-1.11866 -11.01691,-1.9034 -17,-3c-5.01547,-0.91926 -11,-2 -15,-2c-4,0 -9,0 -14,1c-5,1 -9.07689,2.73145 -13,4c-5.12395,1.65685 -9.3054,4.36167 -14,7c-4.35883,2.44962 -7.79488,6.22021 -11,9c-3.77727,3.27601 -7.21005,7.85076 -10,12c-3.2536,4.83881 -6,11 -8,16c-2,5 -3.9034,10.01691 -5,16c-0.91925,5.01547 -2.49829,11.93796 -3,18c-0.49489,5.97955 -1,10 -1,14c0,6 -0.61092,10.03746 0,15c0.50377,4.09221 1.34518,9.17697 3,14c1.45137,4.23007 4.60703,9.17572 7,14c2.59106,5.22363 5.72398,9.22273 9,13c2.77979,3.20512 5.79488,7.22021 9,10c3.77727,3.27602 7.19577,5.64886 11,8c4.25325,2.62866 9.06134,5.82462 15,8c5.05659,1.85226 11,5 17,7c6,2 14.04184,3.70856 22,5c10.06636,1.63354 17,2 26,2c7,0 15.08441,0.4747 22,-1c7.12003,-1.51831 15.09116,-4.79568 22,-8c6.08554,-2.82245 11.54358,-5.40215 16,-10c3.47989,-3.59033 5.11835,-7.94298 7,-12c3.20432,-6.90886 4.73145,-11.07689 6,-15c1.65686,-5.12395 3.36096,-12.14223 5,-18c1.45105,-5.18599 3,-11 4,-17c1,-6 1.49756,-10.9258 2,-16c0.49268,-4.97566 0.8009,-10.06456 0,-15c-0.50653,-3.12144 -1.33197,-7.22935 -3,-11c-1.45865,-3.29733 -3.28857,-6.86829 -5,-11c-1.21014,-2.92157 -2.33749,-6.31001 -4,-9c-1.487,-2.40601 -4,-5 -6,-8c-2,-3 -3.71411,-5.21168 -6,-8c-1.79318,-2.18734 -3.59399,-5.51301 -6,-7c-2.69,-1.66251 -4,-2 -6,-4c-1,-1 -1.29291,-2.29289 -2,-3c-0.70709,-0.70711 -2.29291,-0.29289 -3,-1c-0.70709,-0.70711 -1.07611,-0.61732 -2,-1c-1.30655,-0.5412 -1.82376,-1.48626 -4,-2c-0.97324,-0.22975 -1.69345,-0.4588 -3,-1c-0.92389,-0.38268 -1.69345,-0.4588 -3,-1c-0.92389,-0.38268 -1.29291,-0.29289 -2,-1c-1.41422,-1.41422 -3,0 -5,0c-2,0 -3,0 -5,0c-1,0 -2,0 -3,0c-1,0 -2,0 -2,-1l-1,0l-1,0l-1,0",
        "duration": 900,
        "strokeWidth": 90,
        "strokeColor": "#894F3F"
      },
      {
        "path": "m189,57c0,-1 -1,-1 -2,-2c-1,-1 -2,-1 -4,-2c-2,-1 -3.15225,-1.23463 -5,-2c-1.30655,-0.54119 -1.69345,-1.45881 -3,-2c-0.92389,-0.38268 -2,-1 -3,-1c-1,0 -3.03873,-0.51945 -6,-1c-3.12144,-0.50654 -6.03874,-1.51945 -9,-2c-3.12144,-0.50654 -5.87856,-2.49346 -9,-3c-1.97418,-0.32037 -5,-1 -7,-1c-2,0 -4,0 -5,0c-2,0 -4,0 -7,0c-2,0 -4,1 -7,1c-2,0 -5.0535,0.54049 -7,1c-2.17625,0.51374 -2.85274,1.1731 -4,2c-1.814,1.30745 -3,1 -5,2c-2,1 -4,2 -6,3c-2,1 -4,3 -8,5c-2,1 -4.70546,2.34619 -7,4c-1.814,1.30745 -5,3 -6,4c-1,1 -2.41885,1.41886 -4,3c-1.58115,1.58114 -3.1731,2.85273 -4,4c-1.30745,1.814 -2.69255,4.186 -4,6c-0.8269,1.14727 -3,4 -4,6c-1,2 -2.87766,5.066 -4,7c-1.80972,3.11848 -2.78986,5.07844 -4,8c-0.85571,2.06586 -1.78986,4.07844 -3,7c-0.85571,2.06586 -1.4588,3.69344 -2,5c-0.76537,1.84776 -1,4 -1,6c0,1 -1,3 -1,4c0,2 -1,3 -1,5c0,1 0,3 0,4c0,1 0,3 0,4c0,1 0,2 0,4c0,1 0,2 0,4c0,3 0,5 0,7c0,3 1,5 1,8c0,3 0.31075,5.08025 1,8c0.51375,2.17625 1.48625,3.82375 2,6c0.4595,1.9465 0.77025,4.02675 1,5c0.51375,2.17625 1.48625,2.82375 2,5c0.4595,1.9465 0.5405,3.0535 1,5c0.51375,2.17625 2,4 3,6c1,2 2,4 4,6c1,1 2.1731,2.85274 3,4c1.30745,1.814 1.69255,3.186 3,5c0.8269,1.14726 1,3 2,4c2,2 2.70546,3.34619 5,5c1.814,1.30745 3.41885,2.41885 5,4c1.58115,1.58115 2.85274,2.1731 4,3c1.814,1.30745 3.82375,2.48625 6,3c0.97325,0.22975 4,1 6,2c2,1 4.93414,2.14429 7,3c2.92157,1.21014 5.07843,0.78986 8,2c2.06586,0.85571 3.87856,1.49345 7,2c1.97418,0.32036 4.82375,1.48625 7,2c1.9465,0.4595 4.08025,0.31075 7,1c2.17625,0.51375 4.87856,1.49345 8,2c3.94835,0.64073 6.90779,0.49623 11,1c2.97752,0.36655 7,1 10,1c3,0 5,0 8,0c2,0 4,0 6,0c3,0 5,0 7,0c2,0 4,-1 7,-2c3,-1 6.07181,-1.69124 11,-3c3.05634,-0.81166 6.86829,-3.28859 11,-5c2.92157,-1.21014 7.133,-2.5695 11,-4c4.19434,-1.55159 7.186,-3.69255 9,-5c2.29453,-1.65381 4,-5 6,-7c2,-2 3.71411,-5.21167 6,-8c1.79318,-2.18735 3.60645,-4.5387 5,-7c2.03146,-3.58792 2,-6 3,-9c1,-3 2,-6 3,-9c1,-3 1.49347,-4.87856 2,-8c0.48056,-2.96126 1,-6 1,-9c0,-3 1,-6 1,-9c0,-3 0.48056,-6.03874 0,-9c-0.50653,-3.12144 -1.31073,-6.08025 -2,-9c-0.51373,-2.17625 -2.11588,-4.96384 -3,-8c-1.15277,-3.95868 -3.11588,-6.96384 -4,-10c-1.15277,-3.95868 -2.33197,-7.22936 -4,-11c-1.45865,-3.29733 -3,-7 -5,-10c-2,-3 -4,-6 -6,-8c-2,-2 -3.34619,-3.70546 -5,-6c-1.30746,-1.814 -1.69254,-3.186 -3,-5c-0.8269,-1.14727 -3.1731,-2.85273 -4,-4c-1.30746,-1.814 -2,-4 -4,-6c-1,-1 -1.70547,-3.34619 -4,-5c-1.814,-1.30745 -3,-3 -5,-4c-2,-1 -3.82376,-2.48626 -6,-3c-0.97324,-0.22975 -2.07611,-0.61732 -3,-1c-1.30655,-0.54119 -2.29291,-0.29289 -3,-1c-0.70709,-0.70711 -1,-1 -2,-1c-2,0 -5,0 -9,0c-3,0 -5.87857,-1.49346 -9,-2c-1.97418,-0.32037 -4,-1 -5,-1l-1,-1l-1,0",
        "duration": 450,
        "strokeWidth": 63,
        "strokeColor": "#4B252D"
      }
      ],
        "dimensions": {
          "width": 297,
          "height": 288
        }
      }
};

When the code is initialized we also set some options that will change the delay of the animation and the stroke cap. The options affect the entire drawing.

 $(document).ready(function(){ 
  $('#donut').lazylinepainter( 
    {
      'svgData': pathObj,
      'strokeWidth': 3,
      'strokeCap': 'round',
      'delay': 500,
    }).lazylinepainter('paint'); 
  });

If you look in the example source code, you'll see a lot more paths. These are the sprinkles on the donut. Each of them has a different color set and a shorter duration.

Multiple Animations

It is possible to have multiple animations on a page.

Upload all of your SVG files seperately and add the code to the same JavaScript file. Include the path objects at the top of the file and the initialization chunks at the bottom. You can combine all of the initialization chunks into one jQuery ready block.

Below is an example of two blocks together.

/* 
  Setup and Paint your lazyline! 
*/ 
 
$(document).ready(function(){ 
  $('#sloppy-bear').lazylinepainter( 
    {
      "svgData": pathObj,
      "strokeWidth": 2,
      "strokeColor": "#e09b99"
    }).lazylinepainter('paint'); 
	
  $('#donut').lazylinepainter( 
    {
      "svgData": pathObj2,
      "strokeWidth": 60,
      'delay': 8600
    }).lazylinepainter('paint'); 
});

You'll want to ensure that there are no duplicate objects. Each of the code blocks from lazy line painter will start with a pathObj. You want to change this to make sure that each of them are unique. Adding a number after pathObj is fine.

So, the first svg animation block would start like this:

var pathObj = {
  "bear": {
    "strokepath": [

I'd make sure to change the name of the next one to something else, like pathObj2.

var pathObj2 = {
  "donut": {
    "strokepath": [

You also have to update the initialization block to reflect the changes.

$(document).ready(function(){ 
  $('#bear').lazylinepainter( 
    {
      "svgData": pathObj,
    }).lazylinepainter('paint'); 

  $('#donut').lazylinepainter( 
    {
      "svgData": pathObj2,
    }).lazylinepainter('paint'); 
});

Look at the source of the demo to see this in action.