CSS Motion Path

...to animate an element moving along a path...

...only had animating translation, position, etc. at your disposal...

...only allowed for simple movements...

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path

https://danielcwilson.com/blog/2020/01/motion-path-quirks/

M 0,0 means move to the x, y coordinates of 0, 0 without drawing anything

L 10,10 means draw a line from the previous point to 10,10

Bezier Curves are handled with C and three sets of coordinates.

SVG Path Builder

https://codepen.io/anthonydugois/pen/mewdyZ

CSS Motion Path

By vladmilinovici

CSS Motion Path

418

vladmilinovici