What library can be used to animate SVG?

Question

SVG

The site has a lot of svg icons (for example, 6-12 icons on each page). They are inserted through the img tag. It is necessary that when hovering over the svg block, the icon is randomly drawn. I thought to use lazylinepainter, but there you need to enter each svg into js code, this will not be very convenient. Perhaps there is an easier way to make such an animation.

Answer 1

GSAP or Anime.js are great for this.

Answer 2

Raphael is quite old, Dmitry Baranovsky has a new library : snapsvg.io/about
inside an img, the SVG is only styled within the svg tag and cannot be targeted via img:hover.
If it's not a secret, why exactly img? If included directly as svg, you can do without a whole separate library. It is possible to write an animation in vanilla CSS for the path in the icon. For example, if :<svg class="icon">

.icon path {
  stroke-dasharray: 123123;
  stroke-dashoffset: 123123;
  animation: draw forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

Instead of 123123, you can choose the length by trial and error, or you can measure and set via JS:

const path = Array.from(document.querySelectorAll(".icon path"));

let length = 0;

const ls = path.map(p => {
  length = p.getTotalLength();
  p.style.strokeDasharray = length;
  p.style.strokeDashoffset = length;
  return length;
});

An example (where there is a lot of extra stuff :)) - https://codepen.io/penumbra1/pen/jaQqBb

Answer 3

svgjs.com
dmitrybaranovskiy.github.io/raphael

Answer 4

They are inserted through the img tag.

Animation will not work, only in some hellishly strange way, such as pulling the code by url and creating a copy, but already in the form of code, all using js. Perhaps there is such a lib, but this is a strange undertaking.
6-12 - it's great to put it in 1 svg in defs and use it through use so that html is more readable. and what to place at the end.
any , the taste and color of all felt-tip pens are different. I didn't find it ideal. Each is useful in one way or another. Depends on the nature of the animation. Would you describe. But in any case, it's best to do it yourself without libraries. I use SMIL but https://caniuse.com/#search=SMIL