Hello 👋

I'm Alejandro

A Web Engineer from Málaga, Spain based in London, UK

Animate SVGs with CSS

I recently had to work around animating an SVG in a project I'm working on, and you know what? I really liked it, so I thought I would share it with you all.

In the future, I will post the actual page where I worked on the animation, but at the moment it's secret 🤫.

Let's start!

If you are reading this is because you are looking for how to do a nice SVG animation with CSS, so I'm going to show you how I did it.

1. Pick an SVG.

I normally get them from Flaticon.com.

For this example I'm going to pick this one.

2. Put it on the page you are working on.

Simply add the SVG tag to the HTML.

<html lang="en">
  <head>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      svg {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 -10 511.99143 511" xmlns="http://www.w3.org/2000/svg">
      <path
        d="m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657"
      />
    </svg>
  </body>
</html>

3. The interesting bit (Playing with CSS).

Make the fill (the color inside) of the SVG transparent and add a stroke (border).

svg path {
  fill: transparent;
  stroke: black;
  stroke-width: 10px;
}

NOTE: Normally, when you add a stroke, you need to increase/fix the viewBox property of the SVG, because the stroke is out of the boundaries.

<svg viewBox="0 -10 515.99143 525" xmlns="http://www.w3.org/2000/svg">
  <path
    d="m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657"
  />
</svg>

Your SVG should be transparent on the inside and have a border at this point.

Now, there are two CSS properties you need to add, stroke-dasharray and stroke-dashoffset.

svg path {
  fill: transparent;
  stroke: black;
  stroke-width: 10px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

You will notice that it hides the border a bit, you need to increase them both until you don't see the border at all.

When you find the number that hides the border, leave stroke-dasharray with that number, and make stroke-dashoffset 0.

svg path {
  fill: transparent;
  stroke: black;
  stroke-width: 10px;
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
}

Animation time!

Now, it's time to create the animation.

svg path {
  fill: transparent;
  stroke: black;
  stroke-width: 10px;
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
  animation: animate-star 2s infinite;
}

@keyframes animate-star {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 1800;
  }
  80% {
    stroke-dashoffset: 3600;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 3600;
    fill: black;
  }
}

Create a keyframes and modify the stroke-dashoffset along the duration of the animation to make it like it's being drawn.

NOTE: The 80% value is the number you found multiplied by 2.

And your SVG will animate!

Look! isn't it nice?

From here, you can play with the animation to make it even nicer. Have fun!

Share this post

Read more about