:root {
  --background-color: #131018;
  --text-color: #fff;

  background-color: var(--background-color);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

svg {
  --circumference: 564px;
  --item-gap: 12px;
  --bar-count: 4;
  --available-width: calc(var(--circumference) - var(--item-gap) * var(--bar-count));
}

circle {
  stroke-dasharray: calc(var(--percentage) * var(--available-width)), var(--available-width);
  stroke-dashoffset: calc(var(--offset, 0) * (var(--available-width) * -1) - calc(var(--index, 1) * var(--item-gap)));
  fill: transparent;
  stroke-width: 10px;
}

circle:nth-child(1) {
  --index: 1;
  --percentage: 0.05;
  stroke: red;
}

circle:nth-child(2) {
  --index: 2;
  --percentage: 0.10;
  --offset: 0.05;
  stroke: yellow;
}

circle:nth-child(3) {
  --index: 3;
  --percentage: 0.30;
  --offset: 0.15;
  stroke: green;
}

circle:nth-child(4) {
  --index:4;
  --percentage: 0.55;
  --offset: 0.45;
  stroke: orange;
}