Как сделать эффект наполовину заполненной обводки эллипса?

Question

[Tlegen Bayangali]

Нужно сделать эллипс, ширина обводки которого была бы примерно 5 пикселей, и к примеру была заполнена на 25%.

Что-то вроде этого

Comments

[Tlegen Bayangali]

вот моя основная задача... помогите реализовать это с помощью свг, чтобы потом можно было анимировать

[snap44]

https://htmlacademy.ru/courses/svg
https://codepen.io/search/pens?q=svg%20radial%20pr...

[Tlegen Bayangali]

snap44, спасибо! то что надо!

Answer 1

[Андрей]

Что то типа того:

<ellipse rx="" ry="" fill="none" stroke="#dadada" stroke-width="5" stroke-dasharray="100 100" stroke-dashoffset="25">

Циферки свои подставьте, это пример ))

Если точно повторять пример понадобятся три эллипса, зацентрованные на одну точку. Нижний белый толщиной 7рх с тенью, над ним серый уже на 5рх, ну и верхний как раз процентный. Эту шкалу можно и анимировать для показания процесса.