How to animate SVG path via anime.js?

Question

Animation

Hello, I need to "draw" the logo so that it looks like it was drawn by hand.
I drew a logo in Photoshop, then translated it into svg in illustrator (here I think it’s a cant, don’t tell me the export instructions for the web ..)
I googled the library, it’s like a new one ..
I started using it, but I only animate the stroke and I understand why, that’s all it's logical, through CSS it's so indented and "drawn" ..
But the problem is that I need to draw the letters themselves, and not their stroke, how can I do this?
Here I threw an example: https://codepen.io/untca/pen/bYGXaB
Thanks in advance for the answers

Answer 1

the problem is that I need to draw the letters themselves, not their stroke, how do I do that?

You need to take a vector graphics editor and draw paths not along the contour of your lines that form the letters, but along them, in their middle (if you can say "middle" relative to the line), in the direction in which the letters are written. Then give the resulting paths a large stroke-width value and do what you already did with anime.js in your example. You get exactly what you want to see. It's also good to take a look at the stroke-linecap property to add roundness and make the line look more natural.
PS.: The obvious problem with this approach is that it is difficult to make exactly such roundings on the edges of the letters as you have drawn. So if you want to animate the "drawing" of what's there in the browser, the only way is to animate the background of the existing path elements. In fact, you will need to make all possible backgrounds for each letter as it is drawn. The initial request to Google is fill SVG path element with a background-image , followed by CSS animations. It is very long, difficult and will slow down a lot. In this case, I would be inclined to draw everything in Ae and insert it as a GIF.