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.
https://walkkumano.com/koyabound/
I thought this was so compelling that I ended up walking the trail myself. Incredible experience.
[1]https://tympanus.net/Development/StorytellingMap/
I agree - beautifully implemented, and great content too.
https://walkkumano.com/iseji/
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
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.
Surprised it still mostly works fine many years later
That's the one :) Thank you so much for finding it!
Odd.
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.
What sort of JS library would you recommend for a similar effect to this? PixiJs, D3, Paper, P5.js, good old vanilla canvas?
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
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 :)
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.
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.
It's a small world.
I didn't write a tutorial but you can check the code here https://github.com/matallo/matall.in