Matching filled strokes aligned vertically
+
-
Two different paths: Nothing
Eventually the filled strokes will be misaligned because the jagged line has greater length
Twin paths: pathLength
The straight one is actually a flatten jagged line which has the same amount of nodes
Uses
pathLength
svg attribute. The pathLength value for both paths are set to 73.
Two different paths: pathLength
Uses
pathLength
svg attribute. The pathLength value for both paths are set to 73.
Two different paths:
SVGGeometryElement.getPointAtLength()
Jagged line uses
SVGGeometryElement.getPointAtLength()
to match straight line
Not very dynamic. For instance it assumes the animation only goes on x axis