Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

How to animate a SVG – SVG animation

How to animate a SVG – SVG animation

There are few ways to animate a svg. The easiest way to animate a svg is with css. So, the first thing we will do is build the svg, then we will create a keyframe to animate the way how the svg is writed.

<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
  <path class="path" d="M10 70 L 70 70, 90 30, 110 90, 120 50, 130 70, 190 70" stroke="white" fill="transparent"></path>


The M command from path comes from "move to", so we move to 10 left and 70 top. L comes from "line", and now we start to construct our lines.


Now we have to create our keyframe to animate the svg. 

This is the keyframe for our animation:

@keyframes dash {
  from {
    stroke-dashoffset: 290;
  to {
    stroke-dashoffset: 0;


After we will add few line of css for the svg we are done with it. You can just copy/paste this code and then change the svg path to understand better how it's working. 




.path {
  stroke-dasharray: 290;
  stroke-dashoffset: 130;
  animation: dash 1.5s 0s forwards infinite;


We used animation dash (our animation from keyframe), 1.5s is the the operating time of our animation, then 0s comes from 0 delay. Inifite is used to run the animation infinitely.

A little below you can see our animation how it works.

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x