CSS Animated Radial Graph overflow after animation SVG-CodePudding

I've encountered a problem when using the css disarray function. The "front" circle clips over after animation has finished and doesnt "Start" at origin point of the animation. After the animation has completed, the filled stroke clips back past the origin point. Can someone Please help me out - I've tried reading up on SVG elements and have fiddled with the code for a few hours now and I still cant get it to animate properly.

Thank you so much for your support. Here is the code I am working with.

.radial-graph-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 2.4rem;
}

.radial-graph-container .chart-container .back {
  stroke: #101114;
  stroke-width: 10;
}

.radial-graph-container .chart-container .front {
  stroke: #94d82d;
  stroke-width: 15;
  stroke-dasharray: 210;
  /* Works fine with values above 300 */
  transform: rotate(-90deg);
  transform-origin: center;
}

.front {
  animation: fill 1s reverse;
}

<div >
  <svg width="200" height="200" >
      <circle cx="100" cy="100" r="90"  fill="none" />
      <circle cx="100" cy="100" r="90"  fill="none" />
      <g >
        <text
        x="100"
        y="100"
          alignment-baseline="central"
          text-anchor="middle"
          id="percentage-social-media-usage"
        >
          42%
        </text>
      </g>
    </svg>
  <p >
    Description Text Here
  </p>
</div>

CodePudding user response：

Your animation part was missing: (the @keyframes section)

.radial-graph-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 2.4rem;
}

.radial-graph-container .chart-container .back {
  stroke: #101114;
  stroke-width: 10;
}

.radial-graph-container .chart-container .front {
  stroke: #94d82d;
  stroke-width: 15;
  stroke-dasharray: 210;
  /* Works fine with values above 300 */
  transform: rotate(-90deg);
  transform-origin: center;
}

.front {
  animation: fill 1s reverse;
}

@keyframes fill {
  0% {
    r: 90;
  }
  100% {
    r: 0;
  }
}

<div >
  <svg width="200" height="200" >
      <circle cx="100" cy="100" r="90"  fill="none" />
      <circle cx="100" cy="100" r="90"  fill="none" />
      <g >
        <text
        x="100"
        y="100"
          alignment-baseline="central"
          text-anchor="middle"
          id="percentage-social-media-usage"
        >
          42%
        </text>
      </g>
    </svg>
  <p >
    Description Text Here
  </p>
</div>