Recently, I needed to create some animated diagrams and discovered that it’s possible to animate SVG images directly within the SVG element itself. However, the process isn’t exactly straightforward. To simplify it, I decided to write this blog post to share my findings. I even developed a tool to make building SVG animations easier, which I’ll introduce as well.

Diagram Examples

SVG animated diagram

SVG animated graph

How it works

If you download the example SVG diagram, you’ll be able to see all the elements that I designed in Figma and the animations that I added manually. Since Figma doesn’t natively support SVG animations, you’ll need to manually add additional elements to animate the parts you want.

Let’s begin by animating the red circle in the Diagram:

  1. In Figma, create the path along which you want the circle to move:
    pathpath 
    1
    		 
    <path d="M108 205.5L340 205.5L572 205.5" stroke="#393939" stroke-width="2"/>
  2. Next, generate the animation:
    pathpath 
    1
    2
    3
    		 
    <circle r="5" fill="yellow">
<animateMotion dur="3s" repeatCount="indefinite" path="M108.001 53.4254L190.845 53.4254C201.891 53.4254 210.845 62.3797 210.845 73.4254L210.845 205.425L339.845 205.425L572.001 205.425"/>
</circle>
    Since this element needs to be created manually, copy the path you created earlier, then set the animation’s duration (dur).

For the dynamic red path in the Diagram:

  1. Use the previously Step 1. as the foundation for Step 2.
    pathpath 
    1
    		 
    <path d="M108 205.5L340 205.5L572 205.5" stroke="#393939" stroke-width="2"/>
  2. Generate the animation:
    pathpath 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    <path class="line" d="M108 205.5L340 205.5L572 205.5" stroke="red" stroke-width="4" stroke-opacity="50%" fill="none">
    <animate 
    attributeName="stroke-dasharray" 
    from="0, 464" 
    to="464, 0" 
    dur="3s" 
    fill="freeze"
    repeatCount="indefinite"
    />
</path>
    Since this element needs to be created manually, copy the path you created earlier, then set the animation’s duration (dur). You will also need to set the variables from and to, for that use the following tool to calculate the length of an svg path (in this example is 464 for the path M108 205.5L340 205.5L572 205.5)

Measure the length of an svg path

Visit the Online tool to measure the length of an svg path

 

You’re now ready to create your own images and use these examples as a guide to build the animations you need.