Setup Drawl.js
1. Link and activate Drawl
A. Link to local copy of Drawl
<script src="path/to/drawl.js"></script>
<script>
new Drawl();
</script>
Or (quicker - without downloading anything)
B. Use Drawl hosted CDN:
<script src="https://cdn.rawgit.com/brennan-v/drawl/master/drawl.min.js"></script>
<script>
new Drawl();
</script>
2. Setup your SVG
Add an inline SVG to your page and add the 'drawl' class:
<svg class="drawl"...
The inside paths must have a fill, stroke, and stroke-width defined.
In order for the plugin to work properly, please convert all shapes to paths.
<path fill="#color" stroke="#color" stroke-width="px"...
Example of how an SVG using Drawl looks:
<svg class="drawl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="#000" stroke="#000" stroke-width="10px" d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z">
</path>
</svg>
This code will produce a pencil SVG. Copy & paste this SVG to do a quick test.
3. Drawl.js Options
A new Drawl:
<script>
new Drawl();
</script>
runs with the following defaults:
<script>
new Drawl({
drawlClass: "drawl", // HTML class for SVG tags
replayClass: null, // HTML Class you can assign to an element to replay animation.
initialDelay: 0 // delay animation start. Time in milliseconds (1000ms = 1s)
});
</script>
So, lets say that you wanted to do the following:
1. Change the drawlClass to "animated-svg".
2. Add a button to replay the animation.
3. Initially delay (on page load) the SVG from animating by 3 seconds (3000ms):
Your Drawl init script would be:
<script>
new Drawl({
drawlClass: "animated-svg",
replayClass: "drawl-again",
initialDelay: 3000
});
</script>
and the HTML for your SVG and replay button would look something like this:
<svg class="animated-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="#000" stroke="#000" stroke-width="10px" d="..."></path>
</svg>
<button class="drawl-again">Replay</button>