SOURCE

console 命令行工具 X clear

                    
>
console
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <symbol id="path">
     <path  class="path1" stroke="#f2420b" fill="none" d="M67.94,55a2.31,2.31,0,0,1-2.06-3.36A32,32,0,0,0,69.37,37,32.38,32.38,0,0,0,19.68,9.64a2.31,2.31,0,1,1-2.48-3.9A37,37,0,0,1,74,37a36.61,36.61,0,0,1-4,16.74A2.32,2.32,0,0,1,67.94,55Z"/>
    <path  class="path2" stroke="#f2420b" fill="none"  d="M37,74A37,37,0,0,1,0,37,36.61,36.61,0,0,1,4,20.25a2.31,2.31,0,0,1,4.12,2.1A32,32,0,0,0,4.63,37,32.38,32.38,0,0,0,54.16,64.46a2.31,2.31,0,0,1,2.46,3.92A36.9,36.9,0,0,1,37,74Z"/>
    <path  class="path3" stroke="#f2420b" fill="none"  d=""/>
  </symbol>
  <use id="path1" xlink:href="#path"></use>
</svg>
#path1{
  stroke-dasharray:100% 0%;

  animation:move1 3s linear forwards;
}
 @keyframes move1{
   0%{
      stroke-dasharray:7% 200%;
   }
   100%{
     stroke-dasharray:100% 0%;
   }
}