Can this also be done with a calligraphic pen? (I.e., pen with a slanted stroke). I'm asking because this is a style that is used a lot in cartoons.
Actually doing this in a project I'm working on right now. The solution is to use the pen vector as a clipPath over an underlying line which is animated to fill the calligraphy.
You could create stroke-width-ratios by applying SVG transformations to each path element, or groups of it. Then you have to compensate for the introduced transformation in the stroke path geometry itself. Example: http://codepen.io/mxfh/pen/RopMvr Kind of hacky, but this could be automated by evaluating the stroke transforms and applying the reverse transforms to source path geometry for compensation.
Wow, looks useful! I didn't realize that it could actually be that simple :) But of course applying the inverse transform to arbitrary paths could still be a tricky mathematical operation.
If you’re willing to use the canvas instead of SVG, it’s even easier. You can draw the path in one coordinate system, then change the coordinate system for the action of stroking the path, which will not change the location of the path on screen but will let you effectively make the stroke into an arbitrary ellipse.