0

I have a SVG path that I'm trying to animate to "draw" itself, using the stroke-dasharray/stroke-dashoffset combination trick (see this article for more info). However, that trick does not work on this path, despite (as far as I can tell) everything being correctly implemented. So, my question is, what have I done wrong here?

This is the path in question:

<path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"></path>

And the CSS (simplified for example) I'm using:

path {
  stroke-dasharray: 415.9850769042969;
  stroke-dashoffset: 415.9850769042969;
  animation: letterB 5s linear infinite;
}

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

I have tried:

  • Adjusting the length of the dashoffset/dasharray
  • Testing in other browsers (Safari 11.0.3, Firefox 57.0.4)

Not really sure what to do, or what's up, so any guidance on why this animation isn't working would be greatly appreciated.

Also, I created a reduced case on JSFiddle.

Primary environment: Chrome v64.0.3282.140

Aeolingamenfel
  • 2,399
  • 1
  • 15
  • 22

1 Answers1

1

You will need to set the fill:none to the svg to aniamtion take place...also a stroke and stroke-width...

...actually the idea is here to animate your stroke

Stack Snippet

svg {
  padding: 20px;
}

path {
  stroke-dasharray: 415.9850769042969;
  stroke-dashoffset: 415.9850769042969;
  animation: letterB 5s linear forwards infinite;
  -webkit-animation: letterB 5s linear forwards infinite;
}

@keyframes letterB {
  0% {
    stroke-dashoffset: 415.9850769042969;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes letterB {
  0% {
    stroke-dashoffset: 415.9850769042969;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.67 67.06">
  <path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"
  fill="none" stroke-width="2" stroke="#000000"></path>
</svg>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • 1
    Yup, thanks so much for the explanation, you're totally right. I completely spaced on the fact that I'm animating the *outline* of the SVG, not the path itself. – Aeolingamenfel Feb 14 '18 at 19:54