How to move elements on svg/canvas background after mouse hover?

Question

JavaScript

Hello. I'm trying to make animation for svg elements. That's what is now - jsfiddle .

The problem is that svg photos can be different (from 100-500 lines of code, or from a thousand lines) and occur several times on the page. For the animation we have now, we need to have the svg directly in the DOM. And if the svg file consists of several thousand lines of code, then the animation will load the system and will not work smoothly ( jsfiddle ).

I think the svg needs to be turned into a canvas and then worked on. If these were ordinary primitive shapes (circle, triangle, square) and they met once on the page, I could draw them on the canvas. But the problem is that these can be different forms of drawing (I can’t know which ones). From which I thought it would be great if we could load a specific svg mask and display dots in it, which would be animated after mouseover (as it is now with SVG on the first link). Such a mask could be made as a single path( mask ). However, to be honest, I don't know how to do it and if it's possible to do it. If I'm wrong, please correct me so that I understand in which direction to at least look for information.

I would be very grateful for any help, hints and examples. Thank you.

Answer 1