8 ms·
Ask HN: Do you know travel blogs that have animated SVG maps of their travels?
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.
- sflanker 2y agohttps://tympanus.net/codrops/2015/12/16/animated-map-path-for-interactive-storytelling/ https://tympanus.net/codrops/2015/12/16/animated-map-path-fo... Not an exact match for your description, but in the same vein
- lbebber 2y agoOh, I made this! (almost a decade ago, huh)
- trebeljahr 2y agothis is one of the coolest things I've seen in a while and I'll take inspiration from the article. Also, funny how in the blog post it says the Github will come soon and now almost a decade later there is still no Github link :)
- sflanker 2y agoTangentially 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 2y agohaha, I just asked ChatGPT and it references this HN post. It's a small world.
- trebeljahr 2y agowhut?! this is unreal.
- datadrivenangel 2y agoLike when my googling solutions to a niche data integration interaction between two tools resulted in a first page result for one of my coworker's linkedin posts asking if anyone in her network knew the answer... The internet is shallow sometimes.
- jachee 2y agoThis is Dead Internet theory in action.
- trebeljahr 2y agohave you seen the Freya Holmer video on generative AI as a parasitic cancer? https://www.youtube.com/watch?v=-opBifFfsMY https://www.youtube.com/watch?v=-opBifFfsMY Also I love how the internet is "dead", yet here we are, on a website with a bunch of humans providing soooo much value that at least corners of the internet still seem very much alive. I wish there were more sites like HN.
- rvrs 2y agoIs it this one? https://photos.paulstamatiou.com/new-zealand/coromandel-peninsula/ 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
- yapyap 2y agoI also see it as posted an hour ago, and see the original thread post as 2 hours ago. Odd.
- mtmail 2y agoThere's something called a second-chance queue for overlooked submissions https://news.ycombinator.com/pool https://news.ycombinator.com/pool (listed on https://news.ycombinator.com/lists 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.
- PStamatiou 2y agoThat's my site! I did it for quite a few photosets, like this one https://photos.paulstamatiou.com/africa/southern-serengeti-tanzania/ https://photos.paulstamatiou.com/africa/southern-serengeti-t... Surprised it still mostly works fine many years later
- trebeljahr 2y agothanks for the great work :)
- slopdo 2y agoI'm not able to find the post that OP refers to about how you animated the SVGs. Maybe you could share the link? Thanks!
- trebeljahr 2y ago
- jfkrrorj 2y agoHeh, i just asked deepseek for fun. It gave me python script that takes photos, uses exif coordinates and OSM. 15 minutes
- anonzzzies 2y agoHow about at least put it in a gist?
- chewymouse 2y agowhat was the prompt?
- peterldowns 2y agoCraig Mod's "Koya Bound" website has beautiful photos and custom SVG maps. https://walkkumano.com/koyabound/ https://walkkumano.com/koyabound/ I thought this was so compelling that I ended up walking the trail myself. Incredible experience.
- exabrial 2y agoThis 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 2y agoThe 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.
- benabbott 2y agoThis is really well done.
- nicwolff 2y agoThat's just terrific!
- lbebber 2y agoOh, this was based off of a project I made for Codrops[1]. Let me know if you'd like some help or input! [1]https://tympanus.net/Development/StorytellingMap/ https://tympanus.net/Development/StorytellingMap/
- CharlesW 2y agoThat and your other projects at lbebber.github.io/public are stellar, Lucas!
- illwrks 2y agoSo.. 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/ 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.
- trebeljahr 2y agonice, thanks for the article. Never seen this trick before but it looks super neat. What sort of JS library would you recommend for a similar effect to this? PixiJs, D3, Paper, P5.js, good old vanilla canvas?
- illwrks 2y agoIt depends on what your overall goal is. GSAP is a great but I’m not sure it’s suitable for SVG as it’s been a long time since I’ve used it. If you have access to creative tools like illustrator and after effects then perhaps Lottie. There are other tools on my radar but I’ve never used them SVGGator
- chris_overseas 2y agoNot quite what you're asking for, but there was this discussion and website that you'll hopefully find relevant: https://news.ycombinator.com/item?id=42660255 https://news.ycombinator.com/item?id=42660255
- hipinspire 2y agohttps://momoadvisors.com/sourcing.php https://momoadvisors.com/sourcing.php by https://hipfolio.co https://hipfolio.co
- knowknowledge 2y agoHere’s one from a few months ago “HOW I ADDED MAPS TO MY TRAVEL POSTS” https://news.ycombinator.com/item?id=41532958 https://news.ycombinator.com/item?id=41532958
- deleted 2y ago[deleted]
- 1wheel 2y agohttps://www.lkk-store.com/lkk-map/ https://www.lkk-store.com/lkk-map/
- trebeljahr 2y agothis is super cool! Do you know how they achieve this effect?
- matallo 2y agoI built something similar for my blog https://matall.in/posts/vietnam/ https://matall.in/posts/vietnam/ I didn't write a tutorial but you can check the code here https://github.com/matallo/matall.in https://github.com/matallo/matall.in
- CharlieDigital 2y agoMight not be what you're looking for, but about 2 years back now I built a little tool that does something similar to this (not SVG) and no special coding/skills required Check out the sample story here: https://turas.app/s/japan-x-taiwan/BtEjycbA https://turas.app/s/japan-x-taiwan/BtEjycbA As you scroll down past the days, it will show the map and places for each day (on desktop). The front-end of this is a planning app for planning the itinerary and the "story" is one output of the planner.
- alanbernstein 2y agoI have been working, slowly, toward a way to do something like this, for years. My latest attempt (http://alanbernstein.net/galleries/2020-pecos/ http://alanbernstein.net/galleries/2020-pecos/) is not professional or polished, but it does work. IIRC it is canvas rather than SVG, and the "animation" is driven by the photo slideshow. Tangentially, I find that the bulk of the work is in compiling and prepping the assets, including multiple camera devices, incorrect timestamps, buggy rotation exif data, captions from multiple sources, GPS tracks from multiple sources... Thanks for asking here, I'm looking forward to finding a better way to do it.
- wonder_er 2y agoThis is a cool project! I tried to do something similar using the Strava API. Never could get precise-enough lat and long to place them nicely on a map. Some of my wild amount of data is visible here: https://joshs-mobility-data-54dab943ebba.herokuapp.com/?zoom=6&latlng=45.845457,%20-114.125977 https://joshs-mobility-data-54dab943ebba.herokuapp.com/?zoom...
- alanbernstein 2y agoCool. Looks like your tracks are lined up with streets, what's the precision problem?
- wonder_er 2y agoI cannot get lat/long for the photos. Strava obv stores it bc they render the images with pins showing exactly where the photo was taken. I could only put the photos at like the very beginning of the route or randomly distribute them along the route. I prob could/should do that. It would be vastly more information than I currently present on the map
- wkat4242 2y agoI remember Google had a really cool tool based on their maps that could animate journeys. It was pretty good but I haven't heard about it for years. I don't even remember the name. Probably killed anyway, knowing Google.
- kawsper 2y agoIs it this? https://cyberb.space/notes/2024/how-i-added-maps-to-my-travel-posts/ https://cyberb.space/notes/2024/how-i-added-maps-to-my-trave...
- bazzargh 2y agoNot animated or svg, but along the same lines, some years ago I wrote https://bazzargh.github.io/stripmap/ 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 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.
- benolivia 2y ago[dead]