How to make svg animation like gif? Help..
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>