How to make svg animation like gif? Help..

GIF image

PNG Image

svg link : https://codepen.io/ysw/pen/OJvQXGz

CodePudding user response：

Need to use svg path fill animation using CSS like

.line {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}

<svg>
  <path  d="M 10,75 L 290,75" stroke="green" stroke-width="50"/>
</svg>

ref