An arc that vanishes half-way, and the tween that fixes it
The left gauge shows the string interpolation frozen at t = 0.5: nothing is drawn, and the browser prints no error. The right one is the finished tween: 315 of 320 bikes docked, 98.4%, a nearly full ring.
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
docked: 315 of 320 = 98.4%
start : M0,-70A70,70,0,0,1,6.988,-69.65L4.992,-49.75A50,50,0,0,0,0,-50Z
end : M0,-70A70,70,0,1,1,-6.861,-69.663L-4.901,-49.759A50,50,0,1,0,0,-50Z
naive t=0.5: M0,-70A70,70,0,0.5,1,0.06350000000000033,-69.6565L0.045500000000000096,-49.7545A50,50,0,0.5,0,0,-50Z
naive halfway draws something: false
tween t=0.5: M0,-70A70,70,0,1,1,-0.064,70L-0.046,50A50,50,0,1,0,0,-50Z
tween halfway draws something: true
after the transition the arc is exactly the final shape