Как сделать диаграмму полукругом?

Question

[TipTop89]

Подскажите пожалуйста как сделать диаграмму полукругом как тут ? Пока получается только диаграмма кругом
. Спасибо

Comments

[Stalker_RED]

А где код, который получается?

[Stalker_RED]

SVG рассмотриваете, или по хардкору, чисто блоки и css?

[TipTop89]

Stalker_RED, добавил

[Stalker_RED]

TipTop89, ну так дело за малым - отрезать половину и сделать вот эти закругления на концах линий.
Но на SVG как-то проще.
https://medium.com/@pppped/how-to-code-a-responsiv...

[TipTop89]

Stalker_RED, через svg не получится, нужно что-бы в html можно было менять значение закрашенной части. А как отрезать низ так что-бы можно было вывести значение закрашенной части?

[Максим]

TipTop89, это легко делается в svg

https://stackoverflow.com/a/66076805/6339052

[Ankhena]

TipTop89, меняйте кастомное свойство в разметке, применяйте в css

Answer 1

[Stalker_RED]

Простая дуга в SVG
Длина закрашенной части это радиус * π * проценты / 100.
Если "живое" поведение не нужно, то можно выбросить весь js код с обработчиком инпута, а заранее рассчитанное число захардкодить в свойство stroke-dasharray в атрибуте фигуры или в css.