Drawing Lines Effect SVG and CSS Animation

by Wayne Smith Animations Narrate Attention Drawings communicate non-verbally Animations narrate a story Narrate key concepts Marketing is guided by empathy Design sets the first impression Your brand is not a template

To animate SVG drawings or create a sketch effect.

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();