CODEWITHSUNDEEP
cssanimationsvg
followthemadhat
followthemadhat

Reputation: 99

Animate SVG fill from left to right

I have this SVG that I want to smoothly fill from left to right. How can I do that using CSS?

I don't want the line to be moving, i want it filling smoothly from left to right while staying in the same place, that's why i'm using svg.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="25" viewBox="0 0 324 25">
<g id="btn_underline">
<path id="V" d="M88.029,0.613 C58.722,-0.156 29.992,3.400 1.839,11.183 C-1.140,12.047 0.205,16.660 3.184,15.795 C28.262,8.781 54.014,5.321 80.438,5.321 C83.801,5.321 86.203,5.321 87.836,5.417 C96.196,5.610 105.324,6.282 115.413,7.339 C125.503,8.396 133.958,9.453 140.588,10.510 C147.218,11.471 156.346,12.912 167.781,14.834 C182.098,17.236 194.397,19.158 204.582,20.599 C223.511,23.194 240.519,24.443 255.412,24.443 C259.256,24.443 262.138,24.443 264.060,24.347 C274.726,23.962 284.623,23.001 293.655,21.368 C303.936,19.542 313.449,17.044 322.385,13.873 C323.634,13.489 324.307,12.047 323.826,10.798 C323.250,9.357 322.193,8.877 320.751,9.357 C311.815,12.624 302.495,15.026 292.790,16.660 C283.758,18.197 274.149,19.158 263.868,19.542 C246.668,20.023 227.066,18.774 205.159,15.795 C195.742,14.546 183.539,12.624 168.549,10.126 C156.635,8.108 147.506,6.667 141.069,5.706 C134.631,4.745 126.271,3.688 115.990,2.631 C105.709,1.478 96.388,0.805 88.029,0.613 z" fill="#00363B" />
</g>
</svg>

http://codepen.io/anon/pen/GrQPvK

Upvotes: 2

Views: 10164

Answers (3)

Emeline Esteves
Emeline Esteves

Reputation: 44

You can indeed do this in CSS with the stroke property.

I'm sorry by advance, I can't use your SVG because it's a shape and in order to make your effect you only need a path without fill. So I take this SVG for the example (from this article : https://jakearchibald.com/2013/animated-line-drawing-svg/):

<svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">
   <path 
      class="path" 
      d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" 
      stroke="#000" 
      stroke-width="4.3" 
      fill="none">
   </path>
</svg>

Notice the stroke and stroke-width properties. It's the beginning of the trick ;). Then you need to add some CSS : 

.path {
   //we divide the line in multiple dashes (some full and other empty)
   //these dashes have 1000px in length
   //so there are one dash full of 1000px of length and then one dash empty of 1000px of length and so on and so forth
   stroke-dasharray: 1000;

   //we change the position of the dashes
   stroke-dashoffset: 1000;

   //now we animate the dashoffset
   //we reduce the offset of each dash so we have the impression that the dashes are moving
   animation: dash 5s linear forwards;
}

@keyframes dash {
   to {
      stroke-dashoffset: 0;
   }
}

And that's it !

For more information, you can read this article too : https://css-tricks.com/svg-line-animation-works/

Upvotes: 2

grinmax
grinmax

Reputation: 1855

Try this

.fadeIn {
  animation-name: fade-in-left;
  animation-duration: 1s;
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

Live demo - http://codepen.io/anon/pen/MJQLgG

Upvotes: -1

Web Dev Guy
Web Dev Guy

Reputation: 1789

You could work from this.

svg {
  left: -400px;
  position:absolute;
}

@keyframes example {
    from {left: -400px;}
    to {left: 200px;}
}

@-webkit-keyframes example {
    from {left: -400px;}
    to {left: 200px;}
}

svg {
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

ccodepen: http://codepen.io/anon/pen/egVbMV

Upvotes: -1

Related Questions