What is the best way to draw a path on a map with cities?

[Poylar]

Hi.

I want to create an effect where a path line is drawn and city names appear as the line passes through the points.
What is the best way to do this in this case:
1. Make svg only path line and points, and make cities separate divs
2. Make the names of cities, lines and points in one svg file and draw them simultaneously, tied to the animation time of the line itself (Or is it impossible?)

Also in theory I would also like to use morphSVG here to redraw the path, is that possible?
Maybe there are some ready-made examples or additional tips?

See the Pen ExpPejL by poylar (@poylar) on CodePen

[Cassie]

Hi Poylar!

 

I'd probably put everything in one SVG, nice and tidy and easy to scale.

To tie the 'dots' in to the line animation is very doable - basically what GSAP excels at - sequencing! You'll need to look into a timeline and the position parameter 

 

And yes, that's what morphSVG is for, morphing SVG elements ☺️

This all sounds very acheivable.

[Poylar]

33 minutes ago, Cassie said:

Hi Poylar!

 

I'd probably put everything in one SVG, nice and tidy and easy to scale.

To tie the 'dots' in to the line animation is very doable - basically what GSAP excels at - sequencing! You'll need to look into a timeline and the position parameter 

 

And yes, that's what morphSVG is for, morphing SVG elements ☺️

This all sounds very acheivable.

MorhphSVG working good with <TEXT> in svg?

[Cassie]

Are you asking if you can morph text elements? If so, no I'm afraid not, morphSVG morphs SVG paths by animating the data inside the 'd' attribute

There's also a utility function, MorphSVGPlugin.convertToPath() that converts shapes like <circle> or <rect> to paths that you can morph.