animate SVG stroke

by Nikolay Petrov

HTML

<svg>
    <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: 1000;
  animation: animateMe linear 10s normal forwards;
}

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