Ask HN: Do you know travel blogs that have animated SVG maps of their travels?

198 points · trebeljahr · 13 days ago

I'm searching for a travel blog that wrote a tutorial on how they created custom SVG animations for the routes he took along his trips.

I've been banging my head against Google for a solid 3-4 hours at this point but it is pointless to try to search something there these days so I come here.

I remember that the blogger in question was into photography and photographed the Te Whanganui-A-Hei (Cathedral Cove) in New Zealand during early morning with no people there and wrote a post about the process. And of course they had these small SVG animations of their trips at the top of their posts, with a map displaying the route they took, animating the path.

They wrote a pretty in-depth article about how they accomplished this with the help of some custom JS and SVG animations too and I am after that article.

If you know the name of the blog that would absolutely make my day!

Please also feel free to answer if you know anything similar to the title of the blog where somebody has created stylized animated SVG maps of their trips and documented the process they used to create those.


59 comments
peterldowns · 11 days ago
Craig Mod's "Koya Bound" website has beautiful photos and custom SVG maps.

https://walkkumano.com/koyabound/

I thought this was so compelling that I ended up walking the trail myself. Incredible experience.

Show replies

rvrs · 12 days ago

Show replies

illwrks · 11 days ago
So.. I don't know what you're talking about but I work in a corporate environment where we can't use JS but we can use SVG images... As a consequence I end up creating graphics in illustrator, exporting to SVG and then hand animating them with CSS animations.

I wouldn't recommend doing it my way, but for path animations they are likely animating the stroke length. Here is an example that might help, but use an animation tool if you can.

https://css-tricks.com/svg-line-animation-works/

One thing of note with stroke animations.. if you transition to/from negative numbers the animation breaks in Safari (negative numbers are out of spec aparently). There is a work around but I can't remember it at the moment, it results in the stroke animation playing in reverse though.

As mentioned above, if you can use a JS library, use one.

Show replies

sflanker · 13 days ago

Show replies

bazzargh · 10 days ago
Not animated or svg, but along the same lines, some years ago I wrote https://bazzargh.github.io/stripmap/ which automates generating stripmaps. The idea was to eventually use this for travelogues of my cycling trips; a map of the route would be a sidebar to the text.

Since then I learned about https://en.wikipedia.org/wiki/Dubins_path as a way to find the path segments; combined with Douglas-Puecker that's probably what I'd use today.