Circle chart in SCSS

I am trying to make 3 circle charts using scss and html

I have Posted the actual scss and html in the JS Fiddle but for you to preview there is a compiled version below.

The problem is when the value radius of the middle chart (.circle2) is 50 it works fine, but when 40 at start of animation a wierd trailing animation starts any idea why? Rather a math problem I guess.

JS Fiddle

.body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#svg .circle {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  fill: none;
  stroke: coral;
  stroke-width: 10px;
  stroke-dasharray: 113.09734 188.49556;
  stroke-linecap: round;
  -webkit-animation: circleinchart 2s ease-in-out;
  animation: circleinchart 2s ease-in-out;
}

@-webkit-keyframes circleinchart {
  0% {
    stroke-dasharray: 0 188.49556;
  }
}

@keyframes circleinchart {
  0% {
    stroke-dasharray: 0 188.49556;
  }
}

#svg .circle2 {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  fill: none;
  stroke: #b530c9;
  stroke-width: 10px;
  stroke-dasharray: 157.07963 314.15927;
  stroke-linecap: round;
  -webkit-animation: circleinchart 2s ease-in-out;
  animation: circleinchart 2s ease-in-out;
}

@keyframes circleinchart {
  0% {
    stroke-dasharray: 0 314.15927;
  }
}

#svg .circle3 {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  fill: none;
  stroke: #59e629;
  stroke-width: 10px;
  stroke-dasharray: 62.83185 251.32741;
  stroke-linecap: round;
  -webkit-animation: circleinchart 2s ease-in-out;
  animation: circleinchart 2s ease-in-out;
}

@keyframes circleinchart {
  0% {
    stroke-dasharray: 0 251.32741;
  }
}
/* This is the css compiled version of the scss*/

/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle Chart</title>
  <link rel="stylesheet" href="style.css">
</head>

<body class="body">
  <svg id="svg" height="100" width="100">
    <circle class="circle" cx = "50" cy = "50" r="30"/>
  </svg>
  <svg id="svg" height="200" width="200">
    <circle class="circle2" cx="100" cy="100" r="50" />
  </svg>
  <svg id="svg" height="200" width="200">
    <circle class="circle3" cx="100" cy="100" r="40" />
  </svg>
</body>

</html>

Content Attribution

This content was originally published by Manukrishnan P at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.