Beginner
Draw the route
The route line is just there. Make it draw itself once on load, in 1000 ms, linear, using pathLength="1".
The finished line must be the resting state, and with reduced motion the line is simply drawn.
What Check tests
- The line has an animation of stroke-dashoffset
- Half way through, half of the line is drawn
- Without the animation the line is finished
- With reduced motion nothing draws
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.