Animate SVG path tree

by Spycez

HTML

<svg width="350" height="366.878" viewBox="0 0 92.604 97.07" xmlns="http://www.w3.org/2000/svg">
    <path pathLength="100" style="fill:none;stroke:#000;stroke-width:.507075;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:7.7;stroke-opacity:1;paint-order:fill markers stroke" d="M101.06 261.813s12.955-25.129 7.594-37.97c-4.157-9.956-15.039-22.315-25.314-19.029-3.97 1.27-8.43 8.976-5.063 11.434 4.104 2.997 11.75-5.056 11.398-10.126-.527-7.589-13.29-17.692-18.992-12.656-2.829 2.497 1.299 10.393 5.063 10.125 2.661-.189.604-5.749 2.531-7.594 4.437-4.248 20.275.524 17.72-5.063-1.652-3.61-7.03-2.71-8.597 2.177-1.092 3.409.403 5.103 3.473 6.945 5.788 3.473 6.424 8.614 10.187 6.066 2.096-1.419 1.572-5.66-.927-6.066-2.634-.427-2.889 3.727-1.605 6.066 1.674 3.05 7.57 4.892 10.126 2.532 3.77-3.482-.183-10.625-2.532-15.188-2.184-4.245-5.881-7.942-10.125-10.126-4.564-2.349-7.776 1.587-12.657 0-3.589-1.167-6.288-1.493-5.063-5.063 1.396-4.07 4.625 5.645 7.594 2.532 2.401-2.518.945-9.992-2.531-10.126-2.667-.102-3.87 2.755-2.532 5.063 2.16 3.721 6.799 5.259 10.126 2.531 1.305-1.07-1.615-4.574 0-5.063 2.912-.881 2.7 5.678 5.063 7.595 3.528 2.863 9.195 8.006 12.657 5.062 2.958-2.515-2.843-7.5-2.532-11.371.183-2.27 1.77-4.914 0-6.348-2.363-1.916-4.466 2.08-5.062 5.062-.597 2.984 3.133 5.242 5.062 7.595 2.27 2.768 4.36 9.128 7.594 7.594 3.832-1.818-1.68-8.436-1.275-12.657.422-4.386 7.793-8.249 3.807-10.126-2.753-1.296-5.66 2.08-5.063 5.063.597 2.983 4.717 6.05 7.594 5.063 2.524-.866-2.666-5.165 0-5.063 3.477.134 4.98 4.116 5.063 7.594.102 4.302-6.106 10.263-2.531 12.657 2.527 1.693 5.942-2.508 7.594-5.063 2.787-4.31-2.586-14.786 2.531-15.188 2.66-.209 3.398 5.07 2.532 7.594-.988 2.878-8.185 2.078-7.595 5.063.835 4.22 16.59 6.298 10.802 10.928-5.93 4.744 1.743-7.65-.676-8.397-2.797-.863-10.952 9.196-12.057 13.028-.936 3.243-3.395 7.863-.6 9.755 3.763 2.547 9.05-2.299 12.657-5.063 3.349-2.566 5.78-6.316 7.594-10.125 1.495-3.142-.922-10.551 2.531-10.126 2.513.31-1.957 5.99...

CSS

@keyframes path-animation {
  to {
    stroke-dashoffset: 0;
  }
}

svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation-name: path-animation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}