Route Animator by SWC

Upload map image

Colour tolerance 40

Glow colour Stroke width 8 Speed px per second 300 Background blur 0

Advanced controls

Mode Tail length px 220 Glow intensity 1.0 Head size px 12 Arrowhead Pulsing head Loop animation Loop delay ms Easing Path smoothing epsilon 1.5 Sampling step px 2 Dim background percent 0

Stroke colour A Stroke colour B Blend A to B

Scrub progress 0

How to use on your website

Click Upload map image and pick your map that already has a coloured route line.
Click Pick route colour then click the route colour on the map. Or type it with Manual colour.
Set Colour tolerance higher if the route on the map has shading or compression artefacts.
Click Choose start point then click the exact start of the route on the map.
Click Choose finish point then click the end of the route.
Click Trace route. The app uses A star to find a path through pixels matching your colour.
Tweak Stroke width, Glow colour, Speed and Background blur.
Click Animate. Use Reverse direction if needed.
Click Download animation video to save a WebM for socials or presentations.
Click Download embed package to get an HTML file and script that you can drop into your site.

Start Finish Traced path