SVG Drawing Animation - VivusJS

There are two good ways to make an SVG animate as if it was being drawn. One way is to use VivusJS like we did on the Baystate 202 Annual Report.

SVG Drawing Animation - CSS

Another great way to accomplish this is to add CSS in the .svg file itself like we did with the hero on the Westfield Gas + Electric Stories site. Use this CSS Tricks page as reference.

## Within the .svg file itself, add the 'stroke-dasharray', 'stroke-dashoffset' and 'animation' lines to the element's style as well as the '@keyframe' animation.
<style type="text/css">
	.st0{
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
		animation: dash 40s linear forwards;
	}
	@keyframes dash {
		to {
			stroke-dashoffset: 0;
		}
	}
</style>