Animate the d attribute itself: if two paths share the same command structure, you can linearly interpolate every coordinate and the shape morphs. Scrub it by hand, then play.
Both shapes here have the same number of points in the same order — the golden rule of morphing. The midpoint of each pair traces the in-between shape.
// same structure → interpolate each number
function lerpPath(a, b, t) {
return a.map((n, i) => n + (b[i] - n) * t);
}
// then rebuild the d string from the blended numbers
When structures differ (a circle's arcs vs a star's lines), naive interpolation fails — that's when libraries like flubber resample both paths to a common point count first.