Подтолкните на верный путь в создание «Графика» без использования сторонних библиотек?

Question

[Семен Борисов]

Ребята, доброго времени суток! Возник вопрос, с какой стороны подходить к созданию подобного, простого псевдографика (на самом деле не знаю, как это можно назвать), используя html, css и js, желательно без canvas.



Один из вариантов, который сразу пришел в голову, это два круга, один внешний, а другой внутренний.
Во внутренним круге находится какой-то элемент, который окрашивается в определенный цвет и имеет определенную форму.
При этом расчёт % исходит из того, что
полный круг - это 2pi - 360 градусов, следовательно
1% - 3,6 градуса. Тупик, как нарисовать фигуру я так и не понял.

Ваши варианты, как бы вы это реализовали?

Answer 1

[Alexander Sydorenko]

Нашел!!! :)

stackoverflow.com/questions/14222138/css-progress-...

о том как https://medium.com/@andsens/radial-progress-indica...

пример jsfiddle.net/andsens/mLA7X

но точно должно быть что то проще.. хотя возможно этот пример более кроссбраузерен..

Вот, кстати и он, тот что попроще codepen.io/geedmo/pen/InFfd

Answer 2

[konishua]

3 дива - нижний целый круг, над ним две полуокружности другого цвета, вращающиеся вокруг центра нижнего круга (вернее одна неподвижна - закрывает половину нижнего круга, а друга накладывается сверху и поворачивается докрашивая нужную часть второй половины). Цвета всех элементов меняются в зависимости от того какого цвета нужно больше получить на диаграмме.