There are a couple of options to give users a great experience on your website. The most comon would be text and images/illustrations. Work always and doesn't really need to be upgraded. But how about some more interaction? A good example would be this amazing Xbox One Review by Polygon. Looks way better, yet not too much. With this post I'd like to give you a short wrap up on how to create these kind of animations with SVG.

Get your SVG and we're ready to go. I have drawn this one. I know, some may call me the 2nd Picasso. Okay get back to work. Let's see what we've got here: The paths, obviously. (This also works with polygon, rect, text, etc...).

I asume that you all know what a SVG is and how it behaves. First of all we don't need the colors because the animation is based on the stroke. Turn the fill-opacity to zero or fill it transparent. Now think of each path of your SVG. Add a stroke with stroke-width: 1;. Now you should see the same as in my pen above (well, almost...). You may know about dashed borders in CSS. This is what we need. For SVG it's called stroke-dasharray. If we set it to 20px the stroke will be dashed every 20 pixels and each dash/space will be 20 pixels in width. Makes sense, right? Now increase the number until the first dash covers the whole path. The SVG should look like above again but in reality it's only the first dash you can see as the stroke. Am I clear so far?

The crazy part starts now. The second attribute we need is stroke-dashoffset. We can move the dashes back and forth with this. Set it the same size as stroke-dasharray. Stop! Don't freak out, it's okay if the SVG isn't visible anymore. All you've done is moved the stroke to the next dash, which is tranparent obviously. We're already done.

To achieve the "self drawing" effect we need to animate stroke-dashoffset back to zero. You can use CSS Keyframes or Javascript, either way will work. In this example I'm going to use CSS Keyframes:

  svg {
  #path123 {
    stroke: #000;
    stroke-width: 1;
    stroke-dasharray: 100px;
    stroke-dashoffset: 100px;
    animation-name: draw;
    animation-duration: 5s;
    animation-fill-mode: forwards; // Stay on the last frame
    animation-iteration-count: 1; // Run only once
    animation-timing-function: linear;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

That's all. Should look like this now:

Tip

If you're having trouble finding the total path length, you can use Javascript. There's a function for it:

  var path = document.querySelector("svg path");
var total_length = path.getTotalLength();

This will give you the total length of the selected path. You can either append it to the path styles or print it to your console and insert it manually into the CSS.

Examples

Press RETURN in the lower right corner of the pen to run them again.


I also wrote articles about this topic on my personal blog and my companies blog but I guess here could be good too. Feel free to follow me on Twitter or ask questions @MyXoToD

Related articles:


77,507 15 221