CODEWITHSUNDEEP
csssvgstroke
Kalreg
Kalreg

Reputation: 1012

stroke-dashoffset doesnt work for me

While working with animating svg i discovered strange issue that stroke-dashoffset doesnt work for me. I want to make acheckmark to draw itself.

I created a pen so you can watch it here: https://codepen.io/kalreg/pen/yorQaV

<svg>
  <path stroke="red" fill="none" stroke-width=10 stroke-dashoffset=6530  d="M5,50 L60,105 L150,5"></path>
</svg>

Both changing css or attribute of path from negative, through 0 to positive values doesnt change appearance of checkmark

I am not sure what am i doing wrong, so any advice would be more than appreciated. Thank you.

Upvotes: 1

Views: 2199

Answers (1)

Dekel
Dekel

Reputation: 62536

The animation of stroke-dashoffset works together with stroke-dasharray and you are also missing the @keyframes to actual have the animation:

path {
  stroke-dasharray: 6630;
  stroke-dashoffset: 6630;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Here is the update to your codepen:
https://codepen.io/anon/pen/mMgQMY

Upvotes: 2

Related Questions