Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw a fill svg?

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

enter image description here

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;}

This is my full svg code:

https://jsfiddle.net/b4dn44kL/

like image 303
Roshi Avatar asked Sep 01 '25 02:09

Roshi


1 Answers

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)

Fake fill with stroke

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

like image 176
Sphinxxx Avatar answered Sep 02 '25 17:09

Sphinxxx