Create a very neat animation using svg, css and Javascript - Kodhus

Create a very neat animation using svg, css and Javascript

Like & share to be notified of the new tips & tutorials:

In this tutorial, we are going to create a super neat success animation using svg, css and a bit of javascript. The reason why we are using svg and javascript is because the effect that we want to make can not be made purely using css transforms and animation. For those of you who don’t know what svg is, it is Scalable Vector Graphics, which is a vector format based on XML. This means that we can interact with it using css and javascript, the same way we do with elements in html, which is cool, nah?


In order to create vector graphics we have different options. for this tutorial I just searched for online svg editor and found this awesome tool: It might be that this link goes away but in any way, you can create svg using any svg editor the most famous one is Adobe illustrator. Then you can get the svg code and paste it into your html and start playing with it.

So following is the svg code for this tutorial:

<svg width="580" height="400" xmlns="">

    <circle id="circle" r="80" id="svg_1" cy="191.5" cx="294" stroke-width="10" stroke="#fff" fill="none"/>
    <g id="popGroup">
      <line stroke="#fff" stroke-linecap="butt" stroke-linejoin="null" id="svg_2" y2="77.981489" x2="291.5" y1="98" x1="291.5" fill-opacity="null" stroke-opacity="null" stroke-width="5" fill="none"/>

Basically we are using circle and line tags in this example. g tag is there as the parent tag to its children tags. It is used to group some elements. You don’t need to worry about the above code. You just create your svg in an editor. save the file. Open the file in a text editor and copy the svg tag and paste it into your html page.


What we want to do is to animate the path of the shapes we have in an orderly fashion. For this we want to play with 2 styles of the svg elements, stroke-dasharray and stroke-dashoffset. The syntax is as follow:

.class-on-svg-element {
  stroke-dasharray: 10, 5;
  stroke-dashoffset: 10;

this basically says that I want my element stroke to have 10px dash and 4px gap. the offset basically specifies the distance into the dash pattern to start the dash. Following is how it looks. enter image description here

We have developed a javascript library to animate the path of the svg using the concept that mentioned above. It is open source so you can use it anywhere you want without any charge. Link here: Move it library

Following is the snapshot of the code. You basically include the library’s js file and set and animate your path.

Moveit.put(circle, {
  start: '0%',
  end: '0%',
  visibility: 0

Moveit.animate(circle, {
  visibility: 1,
  start: '0%',
  end: '100%',
  duration: 1,
  delay: 0,
  timing: 'ease-out'

Please take a look at the demo, download the code and browse. Feel free to comment if you had any questions or reach me at if you had any questions

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *