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"/>
    
    <path fill="none" d="M30.5408 4.61323L30.5569 4.62995L30.5738 4.64591C31.0518 5.09678 31.3358 5.71539 31.3358 6.43969V21.5669C31.3358 22.2464 31.0312 22.9083 30.5571 23.3768L30.5488 23.385L30.5408 23.3933C30.0845 23.8657 29.453 24.1512 28.7088 24.1512H3.62702C2.92798 24.1512 2.25281 23.8453 1.77872 23.3768L1.77046 23.3686L1.762 23.3606C1.28404 22.9098 1 22.2912 1 21.5669V6.43969C1 5.76015 1.30462 5.0983 1.77872 4.62977L1.78699 4.62159L1.79507 4.61323C2.25138 4.14082 2.88284 3.85533 3.62702 3.85533H8.69871H9.69871V2.85533V2.79458C9.69871 2.31192 9.89226 1.86671 10.2315 1.53143C10.567 1.19994 11.0214 1 11.5573 1H20.7785C21.278 1 21.734 1.19588 22.0736 1.53143L22.0843 1.54207L22.0954 1.55238C22.4013 1.83692 22.6064 2.29439 22.6064 2.79458V2.85533V3.85533H23.6064H28.7088C29.453 3.85533 30.0845 4.14082 30.5408 4.61323Z" stroke="black" stroke-width="2"/>
<circle fill="none" cx="16.5" cy="13.5" r="5.5" stroke="black" stroke-width="2"/>
</svg>

CSS

path {
  stroke-dasharray: 5;
  animation: animateMe linear 3s infinite;
}

@keyframes animateMe {
  0% { stroke-dashoffset: 50; }
  25% { stroke-dashoffset: 40; }
  50% { stroke-dashoffset: 30; }
  75% { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 10; }
}