Как сверстать такие кругляшки?
SVG<svg width="108" height="108">
<circle r="46" cx="54" cy="54" />
<circle style="stroke-dasharray:60% 140%" r="46" cx="54" cy="54" />
</svg>svg {
  display: block;
  margin: 100px auto;
  width: 200px;
}
circle {
  fill: rgba(0,0,0,0);
  stroke: #eee;
  stroke-width: 16;
}
circle:nth-child(2n) {
  fill: rgba(0,0,0,0);
  stroke: #30bae7;
}
Лучше классы расставить, тем более, что диаграмм несколько.
https://jsfiddle.net/ry8aj50c/
SVG<svg width="108" height="108">
<circle r="46" cx="54" cy="54" />
<circle style="stroke-dasharray:60% 140%" r="46" cx="54" cy="54" />
</svg>svg {
  display: block;
  margin: 100px auto;
  width: 200px;
}
circle {
  fill: rgba(0,0,0,0);
  stroke: #eee;
  stroke-width: 16;
}
circle:nth-child(2n) {
  fill: rgba(0,0,0,0);
  stroke: #30bae7;
}
Лучше классы расставить, тем более, что диаграмм несколько.
https://jsfiddle.net/ry8aj50c/