Lazy Line Painter for jQuery Animates SVG Onto Your Website

Thanks to the canvas element and the drawing capabilities of JavaScript we can calculate and present graphics inside the browser. That way drawings can be animated onto a website. The downside is, that you would have to do a lot of programming to achieve this. If you are not into programming or simply want to save some time, the jQuery plugin Lazy Line Painter might come in handy. It promises to perform this tedious task for you. Lazy Line Painter

Lazy Line Painter: Convert An SVG And Animate It Onto The Canvas

That's the way the tool works: If you want to transform an image into an animation, Lazy Line Painter requires it to be an SVG. Applications such as Illustrator offer export functionality for this format. Images are not allowed to consist of closed paths. Shapes and gradients are off-limits. Other closed paths, foremost circles and rectangles have to prepared in advance. It is sufficient to open them at one point. Optically you will not notice any difference. But for the plugin, the difference is essential. It uses the gap in the path for the definition of start and end. How the plugin works Color and contour of the path are ignored, instead defined inside the plugin. As the SVG cannot be handed over to the plugin directly, it has to be converted into a JavaScript variable. The website accompanying the plugin allows you to upload SVG files and convert them to variables. The resulting variables with all its paths and coordinates can be handed over to the plugin looking similar to this:

var svgData = {
  "demo": {
    "strokepath": [{
      …
    }],
  "dimensions": {
    "width": 349,
    "height":277
  }
}

The following call is accepted by the jQuery plugin:

$("#drawing").lazylinepainter({
  "svgData": svgData,
  "strokeWidth": 7,  
  "strokeColor": "#de8f8f"
})

Contour size and color are defined alongside the variable. The last step consists of starting the animated drawing:

$("#drawing").lazylinepainter("paint");

Lazy Line Painter Requires jQuery and Raphaël

You will need to integratejQuery for the plugin to run. The Raphaël library is also required, as it provides special functions for the drawing of SVG. Conclusion: It only takes very little effort to have Lazy Line Painter draw complex graphics inside a browser without requiring changes to the image to be animated. (dpe)