SVG Circle Line Animation

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.

<svg xml:space="<span class="orange">preserve</span>" xmlns="<span class="orange">http://www.w3.org/2000/svg</span>"></svg>

Next we will add the width and height attributes to our SVG that will help us define our circle.

<svg viewBox="<span class="orange">0 0 220 220</span>" xml:space="<span class="orange">preserve</span>" xmlns="<span class="orange">http://www.w3.org/2000/svg</span>"
width="<span class="orange">220</span>" height="<span class="orange">220</span>">
</svg>

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.

<circle id="<span class="orange">path</span>" cx="<span class="orange">110</span>" cy="<span class="orange">110</span>" r="<span class="orange">100</span>"></circle>

Now we can start styling the circle. For our example, we need a stroke and we will set a stroke-width of 10 for the circle.

<circle id="<span class="orange">path</span>" class="" cx="<span class="orange">110</span>" cy="<span class="orange">110</span>" r="<span class="orange">100</span>" stroke="<span class="orange">#000000</span>" fill="<span class="orange">none</span>" stroke-width="<span class="orange">10</span>"></circle>

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.

// collect our radius value
<span class="pink">var</span> radius = document.<span class="blue">getElementById</span>('<span class="orange">path</span>').<span class="blue">getAttribute</span>("<span class="orange">r</span>");
// collect circle length value using basic math
<span class="pink">var</span> circleLength = 2 * Math.PI * radius;
// output length some where we can see it
document.<span class="blue">getElementById</span>("<span class="orange">length-container</span>").innerHTML = circleLength;

Now we should have something like this

See the Pen SVG DRAW CIRCLE step 1 by Adrian Eufracio (@adrianeufracio) on CodePen.

Now we use css3 to create our animation. As I mentioned before we needed to create a dash that is long enough to hide and reveal our stroke. We can set the dash length equal to the circle length.

<span class="pink">#path</span> {
  stroke-dasharray: <span class="orange">628.3185307179587</span>;
}

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 .

<span class="pink">@keyframes dash</span> {
  <span class="pink">from</span> {
    stroke-dashoffset: <span class="orange">628.3185307179587</span>;
  }
  <span class="pink">to</span> {
    stroke-dashoffset: <span class="orange">0</span>;
  }
}

Now to finish up we add this keyframe animation to our #path.

<span class="pink">#path</span> {
  stroke-dasharray: <span class="orange">628.3185307179587</span>;
  animation: <span class="orange">dash 5s linear forwards</span>;
}

Our final product

See the Pen SVG DRAW CIRCLE step 2 by Adrian Eufracio (@adrianeufracio) on CodePen.

This is a cool little element you can use on a website and extend to your requirements. Here is the same element with some added functionality.

See the Pen SVG DRAW CIRCLE by Adrian Eufracio (@adrianeufracio) on CodePen.

SVG Animation Resources