Как сделать такой круг состоящий из разных дуг сделать с помощью css?

Question

[Denis9999]

Как сделать такой круг состоящий из разных дуг сделать с помощью css?

Comments

[Ankhena]

conical-gradient Если устраивает поддержка https://caniuse.com/?search=conical-gradient

Но я бы делала это с помощью SVG

[Denis9999]

а как сделать чтобы цифры были выровнены по центру в зависимости от длины дуги?

Answer 1

[ThunderCat]

jsfiddle.net/jonathansampson/7PtEm
+ прозрачность, + белый круг поверху

Comments

[Denis9999]

а как сделать чтобы цифры были выровнены по центру в зависимости от длины дуги?

[ThunderCat]

Denis9999, подозреваю что нужно высчитывать смещение, тут уже скорее всего через жс высчитывать и выставлять цифры в каком-то блоке с абсолютным позиционированием...

Answer 2

[Александр Смирнов]

Я думаю, что вам нужно использовать библиотеку для построения графиков, например chart.js. Вкратце, необходимо ввести ваши данные, а библиотека сама отрисует SVG. Возможно настраивать label для фрагментов графика, цвета, размер