block by rveciana 502db152b70cddfd554e9d48ee23e279

Animated path using canvas

Full Screen

Creating visualizations like this one but using canvas is possible.

The technique is the same as when using it with SVG with the problem that Canvas hasn’t got a method to get the whole length of a path. To do it, I’ve created a hidden SVG first. This other page has a nice explanation about how the SVG path animation work.

The path is the Trans Mongolian train route taken from here but redrawn, since the original is a multi line.

index.html

transsiberian.dbf

transsiberian.json

transsiberian.prj

transsiberian.qpj

transsiberian.shp

transsiberian.shx