The wiggle: six points into twelve
The example evaluates the interpolator at t = 0.5, so the pictures are the same on every run. The naive halfway line crosses itself in a small tangle just right of the middle.
A line can be drawn on with one dash trick. A path whose number of points changes needs a tween that you write, or it wiggles. And a shape such as an arc must be rebuilt from an interpolated angle at every frame, never interpolated as text.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write reveal(path, ms) that draws a path on, returns a promise, does nothing when the length is 0, and clears the dash even when the transition is interrupted.
Write padTo(values, n) that repeats the last value until the array has n items, and use it so that a 6-month line can animate into a 12-month line.
Explain it without notes
Explain how stroke-dasharray and stroke-dashoffset draw a line on.
Why does a transition between two lines with a different number of points look wrong?
Why does an arc disappear in the middle of transition.attr("d", ...), and what is the fix?
Preview
Console
Nothing logged yet.Expected console output
A has 6 points, B has 12
points at t=0 naive: 12 padded: 12
A's last point: 414,11.939 | naive(0) still has it: true | padded(0) ends at it: true