Ask HN: Do you know travel blogs that have animated SVG maps of their travels?
23 comments
·February 4, 2025peterldowns
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.
exabrial
This is the first time for me where a website hijacked the scroll wheel, and it's actually _really really_ well done. This is amazing. Thanks for posting it.
daemonologist
The key is that it doesn't actually hijack the scroll wheel - the main content (header and text and photos on the left) all scrolls normally, controlled by the browser. The map just monitors the scroll position and element client rects and runs its own non-blocking visualization on the side.
I agree - beautifully implemented, and great content too.
kyleblarson
Doing a temple stay at Koyasan is by far my favorite lifetime travel experience.
lbebber
Oh, this was based off of a project I made for Codrops[1]. Let me know if you'd like some help or input!
nicwolff
That's just terrific!
benabbott
This is really well done.
rvrs
Is it this one? https://photos.paulstamatiou.com/new-zealand/coromandel-peni...
EDIT: Any HN mods/devs reading this -- there seems to be a display bug for comment creation time? On edit it says 20hrs (accurate), whereas viewing the comments otherwise shows that it was posted an hour ago. Not sure what's going on
mtmail
There's something called a second-chance queue for overlooked submissions https://news.ycombinator.com/pool (listed on https://news.ycombinator.com/lists)
Some older users (I think YC alumni) can nominate articles and moderators give them a boost. The timestamp doesn't change, I've seen 2 day old articles appearing. It's a bit confusing, I think it was hacked in years ago but works good enough.
yapyap
I also see it as posted an hour ago, and see the original thread post as 2 hours ago.
Odd.
knowknowledge
Here’s one from a few months ago “HOW I ADDED MAPS TO MY TRAVEL POSTS”
sflanker
https://tympanus.net/codrops/2015/12/16/animated-map-path-fo... Not an exact match for your description, but in the same vein
lbebber
Oh, I made this! (almost a decade ago, huh)
illwrks
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.
chris_overseas
Not quite what you're asking for, but there was this discussion and website that you'll hopefully find relevant:
sflanker
Tangentially interesting: while leveraging Perplexity to try and find the blog post in question this post and your StackOverflow question already pollute the results it draws from and causes it to abort any more detailed search for such a blog post. I find this mildly amusing.
throwaway519
haha, I just asked ChatGPT and it references this HN post.
It's a small world.
gryzzly
I built a travel blog a bit like that, also inspired by Craig Mod and so by Luke’s work by proxy. It uses a real leaflet map though and maybe is not as elegant - https://freetimemanagers.com/05-04-2019/
You can check the code here - https://github.com/gryzzly/photos-map/blob/master/components... - I cache photos scroll position and then draw a triangle from photo corners to the photo’s coordinate on the map.
jfkrrorj
Heh, i just asked deepseek for fun. It gave me python script that takes photos, uses exif coordinates and OSM. 15 minutes
anonzzzies
How about at least put it in a gist?
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.