Fill SVG from bottom to top

Fill SVG from bottom to top,svg,Svg,I've got an SVG I'm trying to animate from bottom to top with a fill. I want it to start as color code #ddd and I want it to end as #ccc filling in from the bottom over a 1 second duration. I'm having problems getting this to work correctly as it seems to look a bit strange. This is what I've got so far. <svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Dashboard" stroke="none" st

I've got an SVG I'm trying to animate from bottom to top with a fill. I want it to start as color code

#ddd
and I want it to end as
#ccc
filling in from the bottom over a 1 second duration. I'm having problems getting this to work correctly as it seems to look a bit strange.

This is what I've got so far.

<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
                <stop offset="0%"  stop-color="#ddd"/>
                <stop offset="50%" stop-color="#ccc">
                  <animate attributeName="offset" values="0;1;0"  dur="1s" begin="0s"/>
                </stop>
                <stop offset="100%" stop-opacity="1" stop-color="#ccc">
                  <animate attributeName="offset" values="0;1;0"  dur="1s"  begin="0s"/>
                </stop> 
            </linearGradient>
        <g transform="translate(-1161.000000, -558.000000)" fill="url(#lg)" id="current-net-wealth">
            <g transform="translate(437.000000, 475.000000)">
                <g id="houses" transform="translate(340.000000, 83.000000)">
                    <g id="house" transform="translate(384.000000, 0.000000)">
                        <polygon id="Path" points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"></polygon>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Do I need to add an additional stop to the

linearGradiant
animation?


#1

Something like this.

  • If you want a duration of 1 second then that's what to write
  • Your values make the fill go up and down again
  • fill="freeze" makes the animated value remain after its duration is complete
  • Your colours don't match the ones you say you want

<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
                <stop offset="0%" stop-color="#ccc"/>
                <stop offset="0%" stop-color="#ccc">
                  <animate attributeName="offset" to="100%" dur="1s" begin="0s" fill="freeze"/>
                </stop>
                <stop offset="0%" stop-color="#ddd">
                  <animate attributeName="offset" to="100%" dur="1s" begin="0s" fill="freeze"/>                </stop> 
            </linearGradient>
        <g transform="translate(-1161.000000, -558.000000)" fill="url(#lg)" id="current-net-wealth">
            <g transform="translate(437.000000, 475.000000)">
                <g id="houses" transform="translate(340.000000, 83.000000)">
                    <g id="house" transform="translate(384.000000, 0.000000)">
                        <polygon id="Path" points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"></polygon>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

#2

Thanks, sorry I pasted the wrong version into the code box. I've updated the original post.