I am not able to make a animation using stroke-dashoffset

Question

Here is the code for animation :

circle {
  stroke-width: 21;
  stroke-dashoffset: 400;
  stroke: url(#color);
  fill: none;
  animation: stroking 60s linear forwards infinite;
}

@keyframes stroking {
  from {
    stroke-dashoffset: 100%;
  }
  to {
    stroke-dashoffset: 0%;
  }
}

<svg height="500px" width="500px">
  <defs>
    <linearGradient id="color">
      <stop offset="0%" stop-color="#e91e63" />
      <stop offset="100%" stop-color="#673ab7" />
    </linearGradient>
  </defs>
  <circle cx="250px" cy="250px" r="210px" />
</svg>

Output:

enter image description here

The linear gradient should change but nothing seems to happen.

Please tell me how can I make this animation work.

You would need a stroke-dasharray for the circle. Please try stroke-dasharray:1320; Also you can read this: https://css-tricks.com/svg-line-animation-works/ — enxaneta, May 23 '23 at 09:51
`stroke-dashoffset: 100%` is [not what you expect it to be](https://stackoverflow.com/questions/45987713/svg-text-with-stroke-dashoffset-css-animation-not-working-in-firefox/45988354#45988354). — ccprog, May 23 '23 at 14:14

chrwahl · Answer 1 · 2023-05-23T17:18:20.670

I find it easier to control if I set the pathlength and stroke-dasharray attribute on the circle. So, instead of percentage, set a number. Here I also rotated the circle, so that it starts at 12 o'clock.

I don't know if CSS animation is the best approach in your case. Have a look at my answer here: How can I make a circle progress bar fluid? where I use the Web Animations API.

circle {
  stroke-width: 21;
  stroke-dashoffset: 100;
  stroke: url('#color');
  fill: none;
  animation: stroking 6s linear forwards infinite;
}

@keyframes stroking {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg height="500px" width="500px">
  <defs>
    <linearGradient id="color">
      <stop offset="0%" stop-color="#e91e63" />
      <stop offset="100%" stop-color="#673ab7" />
    </linearGradient>
  </defs>
  <circle cx="250px" cy="250px" r="210px" transform="rotate(-90 250 250)"
    stroke-dasharray="100 100" pathLength="100" />
</svg>

I am not able to make a animation using stroke-dashoffset

1 Answers1