html,body,svg { height:100% }

by jorgeluis

HTML

<div class="doughnut-chart">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" class="doughnut">
    <circle stroke-width="10" r="45" cx="50" cy="50" class="base-circle"></circle> 
    <circle stroke="#30343C" stroke-width="10" stroke-dasharray="282.735" stroke-dashoffset="194.804415" r="45" cx="50" cy="50" class="value-circle"></circle> 
    <g class="text-group">
      <text font-size="26" x="50%" y="50%" dy="" class="text-value">
        31.1
      </text> 
      <text font-size="12" x="50%" y="50%" dy="1em" class="text-unit">
        %
      </text>
    </g>
  </svg>
</div>

SCSS

.text-value {
  fill: var(--text-color, $grey-dark);
  font-weight: 400;
  letter-spacing: -0.036em;
}
.text-unit {
  fill: $grey;
  font-weight: 600;
}

.value-circle {
  stroke: var(--text-color, #333);
  transition: stroke-dashoffset 1s;
}

.doughnut-chart {

  width: 50%;
  
  .doughnut {
    transform: rotate(-90deg);
  }

  .base-circle, .value-circle {
    fill: none;
  }
  .base-circle {
    stroke: $white-bis
  }
  .value-circle {
    transition: opacity 1s;
    opacity: 1;
  }
  .text-group {
    transform: rotate(90deg);
    transform-origin: center;
  }
  .text-value, .text-unit {
    text-anchor: middle;
    cursor: default;
    transition: opacity 500ms;
  }
  .text-value {
    letter-spacing: -0.05em;
  }
}

.doughnut-chart:after {
  /* force a square */
  content: "";
  display: block;
  padding-bottom: 100%;
}