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

This is my full svg code:

https://jsfiddle.net/b4dn44kL/

Fill it with a linear gradient and animate the gradient stops. There are plenty of examples of that. — Robert Longson, Jan 29 '16 at 23:32
What kind of "drawing" effect are we talking about? Do you want it to fade in? grow from nothingness? have a look at https://daneden.github.io/animate.css/ and see if there is any effect you like — Aziz, Jan 29 '16 at 23:45
yes i want it growing from nothing like it http://tympanus.net/Development/SVGDrawingAnimation/ but this use the stroke i need the same line drawing effect but with fill — Thibaud, Jan 29 '16 at 23:46

score 8 · Accepted Answer · answered Jan 30 '16 at 20:35

8

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

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

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

answered Jan 30 '16 at 20:35

Sphinxxx

12,484
4
54
84

i get a solution with the garden but your solution is pretty good thank you – Thibaud Jan 31 '16 at 20:19

score 0 · Answer 2 · answered Jan 30 '16 at 11:43

The short answer is no. There is no easy way to have the "drawn line" effect for an arbitrary filled shape. You could use a mask of a linear fill to "fill" it from top to bottom, or bottom to top. But that obviously would follow the shape of the line around the loop etc.

You are pretty much stuck with using the traditional animation technique: draw a sequence of frames and show them one after the other.

score 0 · Answer 3 · answered Jan 31 '16 at 20:24

this is the gradient solution i found:

<defs>
    <lineargradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0">
   <animate attributeName="stop-opacity" values="0; 1" begin="middle1.end" dur="1s" fill="freeze" />
   </stop>
   <stop offset="40%" style="stop-color:rgb(255,255,255);stop-opacity:0">
    <animate attributeName="stop-opacity" values="0; 1" begin="2000ms" dur="1s" id="middle1" fill="freeze" /></stop>
    <stop offset="70%" style="stop-color:rgb(255,255,255);stop-opacity:0">
    <animate attributeName="stop-opacity" values="0; 1" begin="800ms" dur="2s" id="middle" fill="freeze" /></stop>
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0">
   <animate attributeName="stop-opacity" values="0; 1" dur="1s" id="down" fill="freeze" /></stop>
    </lineargradient>
  </defs>

https://jsfiddle.net/9mhxpbph/

How to draw a fill svg?

3 Answers3

Linked

Related