Create a drawing SVG line animation

With an SVG and its shapes you can create cool animations. I wanna show you how you can animate the drawing of a line (a path in a SVG) with a small amount of CSS.

See this example of a tree that gets drawn

Create an SVG

Let's start by using a simple SVG which shows a simple rectangle shape that is created with the <path /> element.

Notice that the path element contains the pathLength property. This property contains a number which represents the (virtual) length of the path. This can be any number and will be used in length calculations. All path points will be normalized against this number. I use the value of 100 and this will be used later in CSS.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 50 50">
  <path
    fill="none"
    stroke="#000000"
    stroke-width="4"
    pathLength="100"
    d="M10,10 L40,10 L40,40 L10,40 z" />
</svg>

Path properties

To animate the shape, we need to use two SVG path properties in CSS:

• stroke-dasharray - Defines that the path should be shown as a pattern of dashes and gaps. See MSDN documentation
• stroke-dashoffset - Defines where on the path the dashed pattern begins. See MSDN documentation

CSS

We configure the dashed pattern of the path with stroke-dasharray: 100. This value is the same as the pathLength property.

In the @keyframes animation definition we update stroke-dashoffset: 100 to stroke-dashoffset: 0, which will result in an animation that will show the whole path over time.

The trick to show the path in a complete visible state, at the end of the animation, is by showing one of the dashed pattern item, by only updating the pattern offset. By using the pathLength property we can use this technique for a path of any length.

@keyframes my-animation {
  from { stroke-dashoffset: 100; } /* This could be removed because we set its initial value in the 'svg path' CSS rule. */
  to { stroke-dashoffset: 0; }
}

svg path {
  stroke-dasharray: 100; /* Same value as 'pathLength' property. Set a dashed-pattern dash length to same length of the path. */
  stroke-dashoffset: 100; /* Same value as 'pathLength' property. Use offset with same length of the path to hide it. */
  animation-name: my-animation; /* References the animation keyframes. This will result in showing the animation directly after page load. */
  animation-timing-function: linear; /* Use a consistent animation speed from start to end. */
  animation-duration: 4s; /* Duration of the animation. */
  animation-fill-mode: forwards; /* This keeps the styling when animation completes. */
}

Start the animation

The CSS is configured in a way that the animation starts directly after the page has been loaded.

We can update the code to trigger the animation 'manually'. Therefore we move the animation-name: my-animation line to a separate CSS selector. This selector allows us to start the animation only when a specified class (in this case 'animate') is added to the SVG element.

@keyframes my-animation {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* animation-name: my-animation; <-- Remove this line */
  animation-timing-function: linear;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

svg.animate path {
  animation-name: my-animation; /* <-- Add to this new selector */
}

Complete code example

This is an example of the path animation logic described above. The 'drawing path' animation will start when you click the button.