See the Code - See it Full Page - See Details
Updated 10/27/2017: Chrome Canary (64) supports this now. According to [Chrome Status](https://www.chromestatus.com/feature/5198375053950976) 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 `path()` value). 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.
This Pen uses: HTML, CSS, JavaScript, and