SVG Circle Line Animation

Jan 29, 2016

SVG is an incredibly useful web element that can take many forms and sizes. Whether you want to create a complex chart or a simple shape. SVG can also be animated! Today I will show you how to do exactly that by drawing a circle using a little CSS and some JavaScript to help us out.

Lets make a circle!

We will start off by creating an SVG element within our HTML document. The code below will create an SVG that is compatible with most modern browsers.

With the svg out of our way we can go ahead and create our circle element within the SVG.

<circle></circle>

Lets start spicing up the circle with some additional attributes. We will add an id name for styling purposes and for some JavaScript we will use later on. We will also add cx and cy values. These will set the coordinates of the circle within the SVG. To center the circle within the SVG I divided the width and height by 2 and placed the value within the cx and cy attributes, which in this case is 110. Finally, we will add a radius of 100 using the r attribute.

Draw it

We finally have our complete circle but now comes the tricky part. Chris Coyier has a great article on how line animation works so I suggest you go read that but for now I will give you a brief explanation. What we need is to animate the stroke on circle element. To do this we need to create a dash that is long enough to hide and reveal our stroke. To figure out the dash length we need to figure out the stroke length of our circle. This is where JavaScript will help us.

This will hide our circle completely. To reveal it we need to animiate the position of our dash. We do this by creating a keyframe that changes the dash position from its original position of 628.3185307179587 to .