SVG animation

Hi friends, In our previous SVG post you learnt that, what is SVG (Scalable Vector Graphics). In this post you will learn something interesting about SVG graphics. As you know we used SVG (Scalable Vector Graphics) in our web pages for better quality graphics and animations. Let's learn how to create a SVG path and how to animate it.

by TrickyUI

HTML

<svg height="200" width="500">
  <path class="path" d="M0 0 L75 200 L150 0 L225 200 L300 0 L375 200 "/>
</svg>

CSS

.path {
   fill:#fff;
   stroke-width: 5px;
   stroke: #ff0000;
   stroke-dasharray: 10;
   animation: animstroke 20s linear;
   animation-direction: reverse;
}

@keyframes animstroke {
   to {
     stroke-dashoffset: 1000;
   }
}
@-webkit-keyframes animstroke {
   to {
     stroke-dashoffset: 1000;
   }
}