animate SVG stroke

HTML

<svg width="77" height="89" viewBox="0 0 77 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M57 35.9643L65 29.9643L57 23.9643" stroke="#ACACAC" stroke-linecap="square"/>
<path d="M2 86.962C42.7437 88.7557 19.1245 26.3673 65 30.1668" stroke="#ACACAC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 89C3.10457 89 4 88.1046 4 87C4 85.8954 3.10457 85 2 85C0.89543 85 0 85.8954 0 87C0 88.1046 0.89543 89 2 89Z" fill="#ACACAC"/>
</svg>

CSS

path {
  stroke-dasharray: 400;
  animation: animateMe linear 4s normal forwards;
  animation-iteration-count: infinite;
}

@keyframes animateMe {
 0% { stroke-dashoffset: 400; }
 100% { stroke-dashoffset: 0; }
}

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

All ads in the editor and listing pages are turned completely off.
Use pre-released features

You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections

Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles

You can make as many Private Fiddles, and Private Collections as you wish!
Console

Debug your Fiddle with a minimal built-in JavaScript console.

animate SVG stroke

HTML

CSS

Please Whitelist JSFiddle in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console