css - How to draw a fill svg?

Question

I want to animate my logo like drawing it for reveal it, it is looking like that:

is it possible to draw only with a fill? every tutorials i looked showed only the possibility to draw with strokes. but i actually want the same drawing effect with my fill:

.st1{fill:black;}

Answer 1

With a nice and simple logo like that, you can easily fake it by using strokes:

1. Add a couple of "fake" lines to your SVG with stroke-width wide enough to cover the logo.
2. Use the original logo path (.st1) as a clipPath on those lines to hide the parts that are outside the logo.
3. Animate the "fake" lines. (How SVG Line Animation Works)

Updated fiddle: https://jsfiddle.net/b4dn44kL/1/