Masking SVG Animations
Nathan Gordon
2638

Hi Nathan Gordon,

Not knowing any vector graphics software, and being a complete noob with svg, and svg animations, I’m trying to find a way, in which good old text object is converted into svg (in a graphics editor say, because according to many resources like this (http://graphicdesign.stackexchange.com/a/40990/78375) it is really difficult to do it programmatically), and they are animated over, in which this calligraphic / handwriting like style is generated. I started with CSS Tricks article that you mentioned and also Jake Archibald’s Article (jakearchibald.com/2013/animated-line-drawing-svg/).

The problem with doing what Jake/Chris (in his similar article on css tricks) have taught in their articles, is that if text object is converted into svg, in for example (inkscape, I tried only that), only the stroke is animated, but on exporting text object in say inkscape into svg, the outlines are the paths that are animated, and they are filled with color, like this:

http://codepen.io/netsi1964/pen/iyglK

How could one do a “stroke only” export of text without outline paths (filled with color) it in Illustrator / Inkscape ?