Как сверстать такие кругляшки?

Question

[HelpSophie]

Как сверстать такие круговые диаграммки, чтобы ими потом можно было управлять?

Comments

[sergey]

только svg

Answer 1

[Ankhena]

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/

Answer 2

[Иван]

thenewcode.com/1072/Radial-UI-Controls-with-HTML5-...

Answer 3

[Stalker_RED]

Можно и без SVG
https://codepen.io/jo-asakura/pen/stFHi
Но с SVG даже проще, пожалуй.