What can be used to make an interactive diagram / map?

Question

Web development

Can you tell me how to do something like this?
https://adindex.ru/maps/advertisign/advertising-ma...

Answer 1

do something like this...

• We take an SVG picture with all these flowers, leaves and inscriptions.
  
• We embed directly into the page. Further, we can work with SVG elements as with ordinary HTML elements.
  
• On :hover we add some styles for the labels (we use CSS or JS to our liking).
  
• Wiggles and morphs can be done either using SMIL animations or scripts (the actions are all the same). In the case of scripts, it can be convenient to take Anime.js or something similar to think less.
  
• There's also dragging and zooming - you can either do it with translateX/Y and scale transforms to wrap all elements in the SVG, or you can change the viewBox. To make it all work with touchscreens and avoid cross-browser headaches, you can add Hammer.js.
  
• Oh, and by clicking on the inscriptions we make the transition to a new page, again according to taste and needs - either scripts or the standard "a" tag.
  

Here's how it's all done. You can read more about interactive plans in an article about them , about SMIL is described in detail here .