animate SVG stroke

by Nikolay Petrov

HTML

<svg>
    <path id="i1" fill="none" stroke="#000000" d="M72.205,38.702h6.552v5.148c0,0.48-0.156,0.895-0.468,1.242
    c-0.312,0.348-0.769,0.522-1.368,0.522h-4.716v12.708h-7.776V45.614h-21.96c-0.6,0-1.128-0.186-1.584-0.558
    c-0.456-0.372-0.744-0.833-0.864-1.386l-0.9-4.5l24.66-32.94h8.424V38.702z M64.429,21.674c0-0.768,0.023-1.596,0.072-2.484
    c0.048-0.888,0.132-1.812,0.252-2.772L48.589,38.702h15.84V21.674z"/>
</svg>

CSS

path {
  stroke-dasharray: 1000;
  animation: animateMe linear 10s normal forwards;
}

@keyframes animateMe {
 0% { stroke-dashoffset: 1000; }
 100% { stroke-dashoffset: 0; }
}