Как сделать изогнутые прямоугольники (bent rectangle) в SVG

1,00
р.
У меня есть проект, над которым я работаю. Необходимо сделать круговую навигацию с кнопками, которые выглядят как сегменты вокруг Iron Man, изображенной ниже.
Я могу рисовать простые фигуры, но я затрудняюсь нарисовать эти полосы с изогнутой формой, как на рисунке ниже.
Я включил пример clip path, и я думаю, что SVG - это то, что мне нужно.
HTML

CSS
.button { background: radial-gradient(circle at 50% 160%,transparent 45%,red 44.5%,red 85%,transparent 85%) -webkit-clip-path: polygon(5% 0, 100% 0, 65% 90%, 35% 90%) clip-path: polygon(20% 0, 80% 0, 65% 90%, 35% 90%) }

Ответ
Дополнительные примеры сегментов
6 сегментов
Подставляем в скрипт, количество сегментов и
черта- dash=0.8 пробел - gap = 0.2


const SVG_NS = 'http://www.w3.org/2000vg'
let R = 40

let perimeter = 2*Math.PI*R
let dash = .8*perimeter/6
let gap = .2*perimeter/6


let dasharray = document.createElementNS(SVG_NS, 'circle')
dasharray.setAttributeNS(null, "r", R)
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`)

svg.appendChild(dasharray) circle{stroke-width:20px stroke:purple fill:none }

6 сегментов
черта- dash=0.2 пробел - gap = 0.8


const SVG_NS = 'http://www.w3.org/2000vg'
let R = 40

let perimeter = 2*Math.PI*R
let dash = .2*perimeter/6
let gap = .8*perimeter/6


let dasharray = document.createElementNS(SVG_NS, 'circle')
dasharray.setAttributeNS(null, "r", R)
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`)

svg.appendChild(dasharray) circle{stroke-width:20px stroke:yellowgreen fill:none }

12 сегментов
черта- dash=0.2 пробел - gap = 0.8


const SVG_NS = 'http://www.w3.org/2000vg'
let R = 40

let perimeter = 2*Math.PI*R
let dash = .2*perimeter/12
let gap = .8*perimeter/12


let dasharray = document.createElementNS(SVG_NS, 'circle')
dasharray.setAttributeNS(null, "r", R)
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`)

svg.appendChild(dasharray) circle{stroke-width:20px stroke:purple fill:none }

10 сегментов + background
черта- dash=0.9 пробел - gap = 0.1


const SVG_NS = 'http://www.w3.org/2000vg'
let R = 40

let perimeter = 2*Math.PI*R
let dash = .9*perimeter/10
let gap = .1*perimeter/10


let dasharray = document.createElementNS(SVG_NS, 'circle')
dasharray.setAttributeNS(null, "r", R)
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`)

svg.appendChild(dasharray) circle{stroke-width:20px stroke:greenyellow fill:gold }

Шестеренка


const SVG_NS = 'http://www.w3.org/2000vg'
let R = 30

let perimeter = 2*Math.PI*R
let dash = .5*perimeter/20
let gap = .5*perimeter/20


let dasharray = document.createElementNS(SVG_NS, 'circle')
dasharray.setAttributeNS(null, "r", R)
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`)

svg.appendChild(dasharray) circle{stroke-width:14px stroke:gray fill:gray }

Update
Благодарю за идею @UModeL
Подсолнух


const SVG_NS = 'http://www.w3.org/2000vg'
let R = 30

let perimeter = 2*Math.PI*R
let dash = .7*perimeter/35
let gap = .3*perimeter/35


let dasharray = document.createElementNS(SVG_NS, 'circle')
dasharray.setAttributeNS(null, "r", R)
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`)

svg.appendChild(dasharray) circle{stroke-width:22px stroke:#FFEB3B fill:#4d4d4d }