How to make a "bent rectangle" in SVG?

Question

I have a project I am working on that requires me to make a circular navigation with buttons that look like the bars around the Iron Man thing pictured below. I can draw simple shapes and follow tutorials well enough, but I am lost on how to draw these bars with the curved shape as in the picture below.

I have included a clip path example, but I think SVG is what I need to do.

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

enxaneta · Answer 1 · 2018-10-20T19:00:43.130

First I'm creating one segment (path). Then I'm reusing it with use rotating it.

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
const deg = 180 / Math.PI;
let R = 50;// the outer radius
let r = 35;// the inner radius
let A = 2*Math.PI/7;// the angle for the segment + space
let a = 2*A/3; // the angle for the segment


let path = document.createElementNS(SVG_NS, 'path');
let p1 = {x:0,y:-R}
let p2 = {
  x : R*Math.cos(a - Math.PI/2),
  y : R*Math.sin(a - Math.PI/2)
}
let p3 = {
  x : r*Math.cos(a - Math.PI/2),
  y : r*Math.sin(a - Math.PI/2)
}
let p4 = {
  x : 0,
  y : -r
}
let d = `M${p1.x},${p1.y}
         A${R},${R} 0 0,1,${p2.x},${p2.y}
         L${p3.x},${p3.y}
         A${r},${r} 0 0,0,${p4.x},${p4.y}
         L${p1.x},${p1.y}Z
`;
path.setAttributeNS(null, "d", d);
path.setAttributeNS(null, "id", "arc");
defs.appendChild(path);




for(let i = 0; i < 7; i++){
 let use = document.createElementNS(SVG_NS, 'use');
  use.setAttributeNS(SVG_XLINK, "xlink:href", "#arc")
  use.setAttributeNS(null, "fill", "gold");
  use.setAttributeNS(null, "transform", `rotate(${i*A*deg})`);
  svg.appendChild(use); 
  
}

<svg id="svg" viewBox= "-100 -55 200 110">
  
  <defs id="defs"></defs>
  
  <circle r="25" fill="gold" />
  
  
</svg>

Or even simpler: this time I'm using stroke-dasharray and I'm calculating the size for the stroke and the gaps

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

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


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:black;fill:none;}

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

Wow, thank you for the extended explanation! I will study and pick apart the code you provided; I do best by reverse-engineering things for improving my understanding. Thanks again! — James Hammond, Oct 09 '18 at 19:53
@enxaneta Perfect answer. Your code can be used as a generator of any number of segments. You can also change the length of the stroke and gap to obtain geometrically exact segments — Alexandr_TT, Dec 06 '18 at 19:14

score 4 · Accepted Answer · answered Oct 09 '18 at 18:59

4

Yeah SVG is the answer here. The base shape:

<svg version="1.1" baseProfile="full" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 0 A 50 50 0 0 0 14.6 14.6 L 28.79 28.79 A 30 30 0 0 1 50 20 Z"></path>
</svg>

This builds the shape using a path element as described here https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths and a little trigonometry.

answered Oct 09 '18 at 18:59

Tiedye

544
1
4
7

Thank you very much for you input, that is exactly what I was looking to do! – James Hammond Oct 09 '18 at 19:54

How to make a "bent rectangle" in SVG?

2 Answers2

Linked