SVG Circle Graph using Sass mixin

by Spencer Smith

HTML

<svg width="100" height="100" viewBox="0 0 120 120" class="circle-graph per88">
  <circle class="color" fill="none"></circle>
  <text>88%</text>
</svg>

SCSS

body{
  background-color: lightgray;
}
svg {
  margin: 10px;
}
.circle-graph{
  transform: rotate(-90deg);
  text{
    transform: translate(57px, 60px) rotate(90deg);
    alignment-baseline: middle;
    text-anchor: middle;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    fill: #444;
  }
}

.per88 .color {
  r: 50;
  stroke: steelblue;
  cx: 50 + 20 / 2;
  cy: 50 + 20 / 2;
  stroke-linecap: round;
  stroke-dasharray: calc(6.28318 * 50 * (88 / 100)) calc(6.28318 * 50);
  stroke-width: 15;
}