Single metric animated SVG pie chart - variation

In this example below you will see how to do a Single metric animated SVG pie chart - variation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 13twelve, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 13twelve ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Single metric animated SVG pie chart - variation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg width="200px" height="200px" viewPort="0 0 200 200">
  <defs>
    <clipPath id="clip">
      <circle cx="100" cy="100" r="100"></circle>
    </clipPath>
  </defs>
  <circle class="progress" cx="100" cy="100" r="100" clip-path="url(#clip)"></circle>
  <rect x="99" y="0" width="2px" height="100"  clip-path="url(#clip)" />
  <rect x="99" y="0" width="2px" height="100" class="progress" clip-path="url(#clip)" />
</svg>
<br>
<br>
<br>
<button>Set</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/13twelve/single-metric-animated-svg-pie-chart-variation-Bxgmpy */
svg {
  margin-top: 40px;
  margin-left: 40px;
}

circle.progress {
  fill: #666;
  stroke: #000;
  transform-origin: center;
  transform: rotate(-90deg);
}

.s-ready circle.progress {
  opacity: 1;
  transition: stroke-dasharray .5s cubic-bezier(.5, -.3, .5, 1.3);
}

rect {
  fill: #fff;
  stroke: #fff;
  stroke-width: 2px;
  stroke-linecap: round;
  transform-origin: 50%;
}

.s-ready rect.progress {
  transition: transform .5s cubic-bezier(.5, -.3, .5, 1.3);
}

/*Downloaded from https://www.codeseek.co/13twelve/single-metric-animated-svg-pie-chart-variation-Bxgmpy */
function setCircle(percent,setup) {
  let $svg = document.querySelector('svg');
  let $circleProgress = document.querySelector('circle.progress');
  let $rectProgress = document.querySelector('rect.progress');
  let radius = $circleProgress.getAttribute('r');
  let circumference = 2 * Math.PI * radius;
  let circleProgress = (percent/100) * circumference;
  let rectProgress = 0;
  
  if (!setup) {
    $svg.classList.add('s-ready');
    rectProgress = (percent/100) * 360;
  } else {
    $circleProgress.style.strokeWidth = 2 * radius + 'px';
  }
  
  // draw the top the correct size
  $circleProgress.setAttribute('stroke-dasharray',circleProgress+','+circumference);
  $rectProgress.style.transform = 'rotate(' + rectProgress + 'deg)';
}

setCircle(0,true);

document.querySelector('button').addEventListener("click", function(){
  let num = Math.floor(Math.random() * 100) + 1;
  setCircle(num);
}, false);

Comments