css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

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 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.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.