donut example

HTML

<svg viewBox="0 0 50 50">
  <circle class="background" r="15.96" cx="25" cy="25" />
  <circle class="foo" r="15.96" cx="25" cy="25" />
  <circle class="bar" r="15.96" cx="25" cy="25" transform="rotate(72, 25, 25)" />
  <circle class="another" r="15.96" cx="25" cy="25" transform="rotate(144, 25, 25)"/>
</svg>

CSS

svg {
  border: solid 2px black;
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}

.background {

  fill: transparent;
  stroke: green;
  stroke-width: 10;
  stroke-dasharray: 100 100;
 
}

.foo {
  fill: transparent;
  stroke: yellow;
  stroke-width: 10;
  stroke-dasharray: 20 100;
}
.bar {
  fill: transparent;
  stroke: red;
  stroke-width: 10;
  stroke-dasharray: 20 100;
}
.another {
  fill: transparent;
  stroke: blue;
  stroke-width: 10;
  stroke-dasharray: 20 100;

}