<div 
       class='donut'
       style='--y1:    15;
              --y2:    25;
              --y3:    30;
              --y4:    10;
              --size:  5rem;
              --thick: 0.7rem;
              --gap:   1.5;'
       >
    <div>👤</div>
    <svg xmlns='http://www.w3.org/2000/svg'>
      <circle stroke='#A800B7' />
      <circle stroke='#0064B7' />
      <circle stroke='#1EB700' />
      <circle stroke='#B79500' />
      <circle stroke=rgba(0,0,0,0.1) />
    </svg>
  </div>
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut {
  width: var(--size);
  height: var(--size);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut div {
  position: absolute;
}

.donut svg {
  --pi: 3.14159265359;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut circle {
  transform-origin: center center;
  stroke-dashoffset: 0;
  cx: calc(var(--size) / 2);
  cy: calc(var(--size) / 2);
  r: calc((var(--size) - var(--thick)) / 2);
  stroke-width: var(--thick);
  fill: none;
}

.donut circle:nth-child(1) {
  stroke-width: var(--thick);
  transform: rotateZ(
    calc(-90deg + (var(--gap) / 2 * 360deg / 100)));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y1) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y1) + var(--gap)) / 100);
}

.donut circle:nth-child(2) {
  stroke-width: var(--thick);
  transform: rotateZ(
    calc(-90deg  + (var(--y1) + var(--gap) / 2) * 360deg / 100));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y2) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y2) + var(--gap)) / 100);
}

.donut circle:nth-child(3) {
  stroke-width: var(--thick);
  transform: rotateZ(
    calc(-90deg  + (var(--y1) + var(--y2) + var(--gap) / 2) * 360deg / 100));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y3) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y3) + var(--gap)) / 100);
}

.donut circle:nth-child(4) {
  stroke-width: var(--thick);
  transform: rotateZ(
    calc(-90deg  + (var(--y1) + var(--y2) + var(--y3) + var(--gap) / 2) * 360deg / 100));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y4) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y4) + var(--gap)) / 100);
}

.donut circle:nth-child(5) {
  stroke-width: calc(var(--thick) / 3);
  transform: rotateZ(
    calc(-90deg  + (var(--y1) + var(--y2) + var(--y3) + var(--y4) + var(--gap) / 2) * 360deg / 100));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y4) - var(--y3) - var(--y2) - var(--y1) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y4) + var(--y3) + var(--y2) + var(--y1) + var(--gap)) / 100);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.