Neat responsive SVG pie charts (no javascript)

svg-pie-charts.html

<!-- 
Neat way to render responsive pie charts in HTML with SVGs and CSS from https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/ 
-->

<style>
  	svg.piechart {
    transform: rotate(-90deg);
    background: #B0233B;
    border-radius: 50%;
	}

  svg.piechart circle {
    fill: #B0233B;
    stroke: #5ABBA2;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 0 = 0% to be set inline on the circle attribute to change the %%*/
  }
</style>

    <!-- SVG Pie Chart: Adjust percentage by changing the first number of stroke-dasharray i.e. 37 100 = 37% -->
    <svg class="piechart" viewBox="0 0 32 32">
      <circle style="stroke-dasharray: 37 100;" r="16" cx="16" cy="16" />
    </svg>
    <!-- / SVG Pie Chart -->