To animate SVG drawings or create a sketch effect.
- The SVG drawing needs to be embedded on the page
- The path needs an ID for the style sheet and the path needs a stroke, which is the line.
- Set the begining CSS property for stroke-dasharray: and stroke-dashoffset: to a length longer than the line.
- Animate the stroke-dashoffset: to 0.
Javascript can be used to get the exact length of the path but both the offset and dash array can exceed the length. Setting multible .paths to the same length will make it easier to match the pen speed.
var path = document.querySelector('.path');
var length = path.getTotalLength();