Breaking News: Grepper is joining You.com. Read the official announcement!

how do I stroke an animated circle svg from 0 to 100 with css

Tony Harris answered on February 17, 2023 Popularity 3/10 Helpfulness 2/10

answer how do I stroke an animated circle svg from 0 to 100 with css

how do I stroke an animated circle svg from 0 to 100 with css

Comment

<svg width="150" height="150">
  <circle cx="75" cy="75" r="60" stroke="#007bff" stroke-width="10" fill="none" />
</svg>

svg circle {
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  animation: stroke-circle 2s ease-in-out forwards;
  animation-delay: 1s;
}

@keyframes stroke-circle {
  0% {
    stroke-dashoffset: 377;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

In this example, we use the circle element to create a circle with a stroke but no fill. We use the stroke property to set the color of the stroke, the stroke-width property to set the thickness of the stroke, and the fill property to set the fill color to none.

Popularity 3/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: animated css stroke svg whatever

Link to this answer
Share Copy Link

Contributed on Feb 17 2023

Tony Harris

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

how do I stroke an animated circle svg from 0 to 100 with css

Contents

More Related Answers

how do I stroke an animated circle svg from 0 to 100 with css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.