Motion path and SVG
Three things you can do with a path that you cannot do with x and y:
send an element along it, draw it stroke by stroke, and
morph it into another shape. All three are ordinary properties on
Bm.To - no separate SVG API, and the element you animate is the plain markup you
already wrote. A fourth needs no path at all: Bm.Arc curves the line between
wherever the element is and wherever it is going.
Curving the journey
Animating x and y together moves an element in a straight line,
which is exactly what nothing in the physical world does. Bm.Arc bends that
line: pass it as a transition's path and the two axes are driven together along
a curve instead of independently. There is no d string to write - the curve is
generated from the two endpoints, so it survives either of them moving.
strength sets how far it bends (as a fraction of the distance travelled), peak moves where it crests, direction picks the side, and rotate turns the element to follow the tangent - which is the difference between a box sliding along a curve and a card being thrown.
Travel along a path
Set offsetPath once and animate offsetDistance from
0% to 100%. Because both are real CSS properties, the browser owns
the curve - the motion stays smooth at any duration and needs no per-frame maths, which
hand-animating x and y along the same arc would.
Drawing a path
Animating pathLength from 0 to 1 draws a stroke
on, as though it were being written. It works by animating the dash pattern, and the
normalised 0..1 coordinate space that makes it readable comes from a
pathLength="1" attribute that Bmotion injects for you on
drawable SVG elements - so the same numbers mean the same thing whether the shape is 40
units long or 4000. pathOffset slides the visible run along the shape and
pathSpacing sets the gap between repeats, which together give you a chasing
dash without a keyframe in sight.
Morphing a shape
Animate the path's d attribute and the control points interpolate directly -
with one condition: the two paths need the same command structure. Both
shapes below are M plus four cubic segments, so every point has a counterpart
to travel to. Paths that do not line up snap to the target instead of morphing, which is a
good reason to author the two variants together rather than reach for a converter.