Как реализовать пунктирный полу нимб на css?

Question

[Алексей Королёв]

Ребят подскажите, как на практике можно реализовать пунктирный полу нимб над аватаром как в примере, с возможностью кастомизации (изменения цвета каждой риски)?

Comments

[Сергей delphinpro]

Самый простой вариант - svg дуга со штриховой заливкой.

Answer 1

[Артем]

Если нет времени разбираться с svg, можно и на border такое сделать, но получается не очень красиво, конечно же

Answer 2

[lukoie]

свг маской и радиальным градиентом
если гуглить, то пошуршите на предмет svg gauge
например вот такой(пятый) результат https://codepen.io/naikus/pen/BzkoLL