Animation through svg

1. Get psd Format file , Select the corresponding layer , Right click replication svg Or export it as svg

2. Use svg Label rendering , Copy of the svg in width and height The unit is cm

<div class="svg-streamline">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="203" height="110.5">
      <path fill-rule="evenodd" stroke="rgb(124, 222, 121)" stroke-width="1px" stroke-linecap="butt"
            stroke-linejoin="miter" fill="none"
            d="M11.500,81.000 C14.814,81.000 17.500,83.686 17.500,87.000 C17.500,90.314 14.814,93.000 11.500,93.000 C8.186,93.000 5.500,90.314 5.500,87.000 C5.500,83.686 8.186,81.000 11.500,81.000 Z"/>
      <path fill-rule="evenodd" fill="rgb(255, 255, 255)"
            d="M11.500,84.600 C12.825,84.600 13.900,85.674 13.900,87.000 C13.900,88.325 12.825,89.400 11.500,89.400 C10.174,89.400 9.100,88.325 9.100,87.000 C9.100,85.674 10.174,84.600 11.500,84.600 Z"/>
      <path fill-rule="evenodd" stroke="rgb(124, 222, 121)" stroke-width="1px" stroke-linecap="butt"
            stroke-linejoin="miter" fill="none"
            d="M12.500,83.000 L53.500,11.000 L70.500,11.000 "/>
      <path fill-rule="evenodd" fill="rgb(255, 255, 255)"
            d="M71.500,5.000 L74.500,8.000 L74.500,15.000 L71.500,18.000 L71.500,13.000 L65.500,13.000 L65.500,10.000 L71.500,10.000 L71.500,5.000 Z"/>
    </svg>
  </div>

3. add to CSS style , animating

.svg-streamline {
    
          animation: lineMove 10s;
          width: 203px;
          overflow: hidden;
          height: 110.5px;
          pointer-events: none;
      }
      
@keyframes lineMove {
    
          0% {
    
              stroke-dasharray: 0, 2000;
          }
          30% {
    
              stroke-dasharray: 2000, 2000;
          }
          100% {
    
              stroke-dasharray: 2000, 2000;
          }
      }

4. Running effect