maxwellito/vivus

Vivus is a small JavaScript library that makes an SVG image appear as if it is being drawn by an invisible pen. An SVG is an image file built from mathematical descriptions of lines and shapes rather than pixels, which is what makes the trick possible, Vivus can trace those lines one stroke at a time and reveal the picture as the strokes are drawn. The library has no dependencies, so you only need to include the script in your page. There are several built-in animation styles. The default, "delayed", starts every line at almost the same moment but with a small offset. "Sync" starts and finishes every line at the same time. "OneByOne" draws each line in turn, with a length-based duration so the pen moves at a constant speed and the effect looks closest to live handwriting. Under the hood Vivus relies on a CSS property called strokeDashoffset that controls how much of a path's outline is visible, a JavaScript loop changes that value over time to produce the drawing effect. Because strokeDashoffset only works on path elements, the library ships with a class called "pathformer" that converts other SVG shapes, circles, rectangles, lines, polylines, into paths so they can be animated. Your SVG paths need a stroke and no fill, and hidden paths or text elements should be removed first. You would use Vivus to add a hand-drawn flourish to a logo, illustration, icon, or any decorative SVG on a website, common touches for landing pages and intros. It can be installed via npm, Bower, or popular CDNs, and a companion tool called Vivus Instant lets you export a CSS-only animated SVG without writing JavaScript. The full README is longer than what was provided.