Svg fill animation for the given path

Question

I am trying to animate an arrow from left to right.The code of my arrow's path is given below:

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 
    <g transform = "translate(0,0)"> 
      <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1"> 
          <animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
      </path>
    </g>
</svg>

The above is the svg path content of my arrow.

Kindly anyone help me how to fill the path from left to right. Waiting for quick response

create a linearGradient that runs from left to right, apply it to your shape and animate the gradient stops. — Robert Longson, Mar 23 '17 at 08:01

Paul LeBeau · Accepted Answer · 2017-03-23T14:18:54.923

27

You can do this by just animating the <stop>s in a <linear gradient>.

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 

  <defs>
    <linearGradient id="left-to-right">
      <stop offset="0" stop-color="#4DAF4C">
        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="#fff">
        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      
    </linearGradient>
  </defs>

  <path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />
</svg>

How this works is that we have a linear gradient representing an abrupt change from green to white. The <animation> elements move the position, of that abrupt change, from the left of the arrow (offset=0) to the right (offset="1").

Note that SVG <animate> elements will not work in IE. If you need to support IE, you will need to use the FakeSmile library or use a different method (such as a JS animation library).

edited Mar 23 '17 at 14:18

answered Mar 23 '17 at 08:40

Paul LeBeau

97,474
9
154
181

can you make the arrow fill from top to bottom need help also from bottom to top – Ram Mar 23 '17 at 10:15
@Ram Sure he can, why don't you try figuring it out yourself though. Hint look into the x1, y1, x2 and y2 parameters on the linearGradient element. https://www.w3.org/TR/SVG/pservers.html#LinearGradients – Robert Longson Mar 23 '17 at 10:34
Understood what is x1,x2 but how could i acheive it – Ram Mar 23 '17 at 11:00
1

This is the point where you can do your own research. There are plenty of web sites that explain how linear gradients work. And you can [read the section on linearGradient](https://www.w3.org/TR/SVG/single-page.html#pservers-LinearGradients) in the SVG specification. – Paul LeBeau Mar 23 '17 at 11:03
The reason my example doesn't have `x1`, `y1` etc is because the default values for these attributes happen to be correct for a left to right horizontal gradient. – Paul LeBeau Mar 23 '17 at 11:05

andreas · Answer 2 · 2017-03-23T08:37:12.653

6

I don't think this is possible with the fill attribute. But instead, you can invert your SVG path to a rectangle with a triangle like hole. Now you just need a second element behind that path, where you can simply animate the scale in x-direction, to fill the hole from left to right.

Here is an image showing the technique:

An here is a working example:

<svg width="100%" height="100%" viewBox='0 0 450 400'>
  <rect x="0" y="0" width="1" height="22" style="fill: black;" >
    <animateTransform attributeName="transform" type="scale" from="1 1" to="50 1" begin="0s" dur="2s" repeatCount="indefinite" />
  </rect>
  <path fill="#ffffff" d="M0,0v29.8h86V0H0z M6.5,25V5.5L48.8,25H6.5z"/>
</svg>

Note: The answer was updated from triangle to arrow, I won't update my answer as the technique is the same for every shape.

edited Mar 23 '17 at 08:37

answered Mar 23 '17 at 08:13

andreas

16,357
12
72
76

bud can you help me in other thing, how do you create SVGs, means what tool to use. The values, numbers - how do you what to clip, what to fill ? Is there anything other than **PhotoShop/Illustrator** – Deepak Yadav Mar 23 '17 at 08:40
1

Yes you can simply use [Inkscape](https://inkscape.org) - it's open source and once you got familiar with the tools, it's very powerful! – andreas Mar 23 '17 at 08:41

score 6 · Answer 3 · edited May 23 '17 at 12:17

Building upon andreas' answer. You can cover your arrow with a shape that is animated to uncover it.

<svg id="svg_circle" width="450" height="400" viewBox='0 0 450 400'> 
  <path class="path" stroke="#F0F0F0" fill="#fff"
    stroke-width="1" opacity="1" id="svg_1"
    d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,
       -13.57138l34.2665,-0.47295l-0.0208,-7.14282
       l14.50618,14.42226l-14.95643,15.04345l-0.20382,
       -8.74944z"> 
   <animate id="project_anim1" attributeName="fill"
      from="#fff" to="#4DAF4C" begin="0s" dur="3s"
      fill="freeze" repeatCount="indefinite" />
  </path>
  <rect x="0" y="0" width="53" height="34" fill="#fff">
    <animate attributeType="XML" attributeName="x"
      from="0" to="53" begin="0s" dur="3s"
      repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="width"
      from="53" to="0" begin="0s" dur="3s"
      repeatCount="indefinite" />
  </rect>
</svg>

score 0 · Answer 4 · answered Jan 15 '23 at 11:15

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 

  <defs>
    <linearGradient id="left-to-right">
      <stop offset="0" stop-color="#4DAF4C">
        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="#fff">
        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      
    </linearGradient>
  </defs>

  <path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />
</svg>

Please provide supporting information to your answer. Take a look at https://stackoverflow.com/help/how-to-answer — jv-k, Jan 17 '23 at 04:33

Svg fill animation for the given path

4 Answers4

Linked

Related