Words by Colin GoodmanJune 12, 2019
Adding animation to SVGs has obviously become popular, and tools that can help you achieve this have become available. In this post, I will run through how to add animation to an SVG using a free online tool called Lazy Line Painter.
It is a free online tool that you can utilise to bring some life to your SVGs by simply following the set instructions either on the website or the GitHub page. Through their words “Lazy Line Painter can be set up with minimal effort as per the Quick Start instructions. However, if a GUI is more your thing, be sure to use the Lazy Line Composer“.
The Composer tool is really useful and is what I will be using to talk you through a quick example.
If you want your SVG to draw in a specific order then you must make sure your layers run in that order. The example I will run through follows this method which will be a simple SVG of the sun with the lines being drawn on load and sequentially.
By referring to the image above you can see I have labelled the layers indicating their order, this means the layer labeled 1 will be drawn first and so on. If you don’t want your SVG drawn in a specific order then this can be changed by using the Composer tool, along with the other various settings that I will touch on in the next step.
Once you have got your SVG all in order and ready to go, export the SVG and upload it to the Lazy Line Composer tool.
NOTE: during my export, the text fields were not part of the SVG as only paths work in SVG’s.
To start we need to upload the SVG to the composer tool, do this by visiting the website and follow the instructions in the Lazy Line Composer area, screenshot below.
Once you have followed the instructions your SVG should show along with various options to the side of it, which are editable and hopefully give you the desired effect you want. There are various options to choose from starting from stroke width to how many times you want to repeat the animation, so there are a lot of things you can customise to get your SVG looking the way you want. The settings I have set for this example are shown in the screenshot below:
Once you’re happy with all the settings go ahead and click “Download Zip”, this will download a Zip folder containing the necessary HTML and version of Lazy Line Painter. Whenever you plan on using your SVG drop the supplied code in and everything should work according to the example you previously seen in the Composer tool. A working example of my SVG can be viewed on CodePen.
There you have it, a really quick and simple way to get your SVGs doing more funky things by using the Lazy Line Painter tool.