How To Animate SVGs

SVG’s With One Path Attribute

  1. Download an SVG File
    1. I like to use these websites, however there are many out there.
      1. https://sandify.org/ (most of the SVG’s in the repository came from here)
      2. https://drawingbots.net/knowledge/tools a nice collections of tools
    2. Be sure to download the file as an SVG

drawing

  1. Open the SVG in a text editor
    1. In the text editor make the background black
    2. Adjust the path attributes
      1. class=”path”
      2. stroke=”white”
      3. stroke-width=”0.2mm”
      4. fill=”none”
      5. pathLength=”1”

    drawing

</p>

  1. Add in the Style Tag to force the animation magic
    1. You want to add the animation in the style tag in order to avoid having to use any javascript
 <style>
        path {

            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            animation: draw 60s linear forwards;
          }
          
          @keyframes draw {
            from {
              stroke-dashoffset: 1;
            }
          
            to {
              stroke-dashoffset: 0;
            }
          }

          @-webkit-keyframes draw {
              to {
                  stroke-dashoffset: 0;
              }
          }          
          
    </style>
     
 

drawing

  1. Save your edits and your newly minted SVG to your mirror’s SVG folder

SVG’s With Multiple Path Attributes

But wait, Jason, the SVG I downloaded has multiple paths in it… See a video here where I walk through the process of animating an SVG of a map that has many path elements. The final results look like the city is being drawn(see below).

  1. Update all the Path attributes to have a pathLength=”1”. I use ctr+f replace
  2. Note how many path attributes there are in the file for step 3
  3. Input the number of paths in the file into the generate_style.py file
  4. Save the output from generate_style.py and paste it into a new style tag
  5. Check that the Fill is either none or black, and that the stroke is white.

drawing

Published on March 26, 2023