javascript – How to make bent rectangles in SVG

Question:

I have a project that I am working on. We need to make a circular navigation with buttons that look like segments around the Iron Man shown below.

I can draw simple shapes, but I find it difficult to draw these curved stripes like in the picture below.

I've included a clip path example and I think SVG is what I need.

Html

<div class="button"></div>

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%);
}

Answer:

Additional segment examples

6 segments

We substitute in the script, the number of segments and

dash=0.8 space – gap = 0.2

const SVG_NS = 'http://www.w3.org/2000/svg';
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;}

<svg id="svg" viewBox= "-100 -55 200 110"></svg>

6 segments

dash=0.2 space – gap = 0.8

const SVG_NS = 'http://www.w3.org/2000/svg';
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;}

<svg id="svg" viewBox= "-100 -55 200 110"></svg>

12 segments

dash=0.2 space – gap = 0.8

const SVG_NS = 'http://www.w3.org/2000/svg';
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;}

<svg id="svg" viewBox= "-100 -55 200 110"></svg>

10 сегментов + background

dash=0.9 space – gap = 0.1

const SVG_NS = 'http://www.w3.org/2000/svg';
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;}

<svg id="svg" viewBox= "-100 -55 200 110"></svg>

Cogwheel

const SVG_NS = 'http://www.w3.org/2000/svg';
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;}

<svg id="svg" viewBox= "-100 -55 200 110"> </svg>

Update

Thanks for the idea @UModeL

Sunflower

const SVG_NS = 'http://www.w3.org/2000/svg';
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;}

<svg id="svg" viewBox= "-100 -55 200 110"> </svg>

Post Views: 0