Updated 10/27/2017: Chrome Canary (64) supports this now.
According to Chrome Status the ability to animate the
offset-path (in addition to the
offset-distance) for Motion Path is coming to Chrome. Chrome can already animate the
d property via CSS (interpolating the points if it sees the same number of control points), but a future version of Chrome will be able to do a similar animation on the
offset-path as well (when using a
As of 3/30/2017 animating the
offset-path: path() value is not yet in Chrome Canary, so this demo will only have an animating SVG path, but the offset path animation will jump between the two
offset-path values at the 50% mark of the animation.
The assumption is when this becomes supported the animation will show a path the changes shape, and the blue shape will move along the path from end to end AND follow the curve as it changes.