Simple SVG Pie Chart

svg-pie-chart.css

svg {
  width: 100px;
  border-radius: 50%;
  background:yellowgreen; 
  transform: rotate(-90deg);
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: deeppink;
}
 
circle.second {
  stroke: #fb3;
}
  
circle.third {
  stroke: black;
}

svg-pie-chart.html

<svg viewBox="0 0 32 32">
  <circle class='first' stroke-dasharray="75 100"></circle>
  <circle class='second' stroke-dasharray="50 100"></circle>
  <circle class='third' stroke-dasharray="24 100"></circle>
</svg>

Thanks for this. Nice and simple for what I was looking to do

How to dynamically create for percentages (40,35,25)

@udayratan you can replace stroke-dasharray with the percentage values that you need.

it doesn't work for FF

it doesn't work for FF

It perfect work in FF! Only add PX in rule.

<div class="svg_wrap">
         <svg viewBox="0 0 32 32">
                  <circle class='svg_background'></circle>
                  <circle class='svg_calc' stroke-dasharray="50 100"></circle>
          </svg>
          <div class="svg_value">50</div>
  </div>

and CSS
`

/*pie charts*/

.svg_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg_wrap svg {
    width: 100px;
    border-radius: 50%;
    transform: rotate(-90deg);
}

.svg_wrap svg circle {
    fill: none;
    r: 16px;
    cx: 16px;
    cy: 16px;
    stroke-width: 8;
}

.svg_wrap svg circle.svg_background {
    stroke: rgb(225, 225, 225);
}

.svg_wrap svg circle.svg_calc {
    stroke: #296fca;
}

.svg_wrap .svg_value {
    position: absolute;
    font-weight: 500;
}

.svg_wrap .svg_value:after {
    content: "%";
}