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

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”

   
   

</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>
     
 

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.