Select Page

Here is a simple method to animate SVG path strokes

 <path id="line1" fill-rule="evenodd" clip-rule="evenodd" stroke="#000000" stroke-width="2" d="M340.637 221.93H418.837V224.676H341.774L302.854 263.596V350.72H300.108V262.459L340.637 221.93Z" fill="black"/>
@keyframes lineanim {
  from{
    stroke-dasharray:1000;
  }
  to{
    stroke-dasharray: 500;
  }
}
#aitoml1 #line1{
    animation: lineanim 6s ease-in-out infinite;
    stroke-dasharray:1000;
    stroke-dashoffset: 1000;
}