Animating stroke-dashoffset gives a reasonable approximation to drawing a curve:
Figure 20.1: Animating stroke-dashoffset
You need to know the length of the curve to determine how long the stroke and blank parts of the curve are to be.
It gets more difficult if other effects other than a simple thick line is required. It seemed worthwhile having a transformation that took a cubic curve and expanded it to an area using offset curves and then animating the filling of the area that included the offset curves. This transformation is more a template to be modified to suit a particular application when the need arises. The main part of the transformation is defining the offset curves which is not straightforward.
This is a simple algorithm that animates the line drawing of a cubic. First the cubic is split into 16 sections which should make most cubics quite smooth. An offset from the endpoints perpendicular to the tangent is made both inside and out. Lines are drawn starting at the first outer to the last outer across to the inner and back to first inner and then join up with first outer. The animation consists initially of all points being put at first outer or first inner Then each step expands the next line until all 16 inner and outer are expanded More complicated algorithms exist that match a circle to the cubic segment and then approximate the offset circle by a cubic.
java -jar library/saxon6.jar -o t5.xml t4.xml library/break_cubic.xsl java -jar library/saxon6.jar -o t6.xml t5.xml library/break_cubic.xsl java -jar library/saxon6.jar -o t7.xml t6.xml library/break_cubic.xsl java -jar library/saxon6.jar -o t8.xml t7.xml library/break_cubic.xsl java -jar library/saxon6.jar -o t9.xml t8.xml library/thicken_cubic.xsl thick=5
The parameter thick defines the distance between the curve and the offset curve.
Figure 20.2: Animating a thickened cubic