html,body,svg { height:100% }

by jorgeluis

HTML

<div class="doughnut-chart">
  <svg width="100%" height="100%" viewBox="0 0 42 42" 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" r="45" cx="50" cy="50" class="value-circle"></circle> 
    <g class="text-group">
      <text font-size="26" x="50%" y="50%" 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 {
  font-weight: 400;
  letter-spacing: -0.036em;
}
.text-unit {
  font-weight: 600;
}

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

.doughnut-chart {

  width: 100%;
  height: 100%;


  .base-circle, .value-circle {
    fill: none;
  }
  .base-circle {
    stroke: #ddd
  }
  .value-circle {
    transition: opacity 1s;
    opacity: 1;
  }
  .text-group {
  }
  .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%;
}