Route draw map

Use it for

• Scheduling, delivery and travel products that show a trip
• Feature sections about routing, dispatch or arrival times
• Hero visuals where a map should feel live without a map SDK

Avoid

• Real navigation, use a map library with real tiles
• Long or winding routes, where the draw takes too long to read

How it works

The map is one SVG: blocks are the background, streets are wide strokes and a river runs under them so crossings read as bridges; streets run past the view box so any frame shape stays filled. The route is a rounded polyline drawn with stroke-dashoffset, then one requestAnimationFrame loop moves the marker with getPointAtLength and writes the ETA through a ref only when the shown minute changes. Reroute swaps which path is live and leaves the other as a dotted ghost.

Accessibility

The map is a labelled image naming the route, the ETA card is real text, and Reroute is a real button whose result is announced through a polite live region. The loop pauses off screen. Reduced motion shows the drawn route with the marker parked partway and no pulse.