var SVG_NS = 'http://www.w3.org/2000/svg';
var SVG_XLINK = "http://www.w3.org/1999/xlink"
var svg = document.querySelector("svg");
let c={x:700,y:700}
let a1 = -Math.PI/2 -Math.PI/4;
let a2 = -Math.PI/2 - Math.PI/10;
for(let r = 300; r < 700; r+=10){
let x1 = c.x + r*Math.cos(a1);
let y1 = c.y + r*Math.sin(a1);
let x2 = c.x + r*Math.cos(a2);
let y2 = c.y + r*Math.sin(a2);
let o = {
d:`M${x1},${y1}A${r},${r} 0 0 1 ${x2},${y2}`
}
drawPath(o, svg)
}
function drawPath(o, parent) {
var path = document.createElementNS(SVG_NS, 'path');
for (var name in o) {
if (o.hasOwnProperty(name)) {
path.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(path);
return path;
}
svg{border:1px solid;overflowsolid;height:visible90vh;}
path{fill:none; stroke:black;}
<svg viewBox="100 0 600 600"></svg>
###Actualización:
El OP comenta: "Hubiera estado perfecto si dibujara el contorno y no las lineas". A continuación viene el código para dibujar solo el contorno.
var SVG_NS = "http://www.w3.org/2000/svg";
var SVG_XLINK = "http://www.w3.org/1999/xlink";
var svg = document.querySelector("svg");
let c = { x: 700, y: 700 };
let a1 = -Math.PI / 2 - Math.PI / 4;
let a2 = -Math.PI / 2 - Math.PI / 10;
// dibujar contorno
let x1 = c.x + 300 * Math.cos(a1);
let y1 = c.y + 300 * Math.sin(a1);
let x2 = c.x + 300 * Math.cos(a2);
let y2 = c.y + 300 * Math.sin(a2);
let x3 = c.x + 690 * Math.cos(a2);
let y3 = c.y + 690 * Math.sin(a2);
let x4 = c.x + 690 * Math.cos(a1);
let y4 = c.y + 690 * Math.sin(a1);
let o = {
style: "fill:hsla(110, 70% ,40%,.35)",
d: `M${x1},${y1}A${300},${300} 0 0 1 ${x2},${y2}L${x3},${y3}A${690},${690} 0 0 0 ${x4},${y4}L${x1},${y1}z`
};
drawPath(o, svg);
function drawPath(o, parent) {
var path = document.createElementNS(SVG_NS, "path");
for (var name in o) {
if (o.hasOwnProperty(name)) {
path.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(path);
return path;
}
svg{border:1px solid;width:90vh;}
path{fill:none; stroke:black;}
<svg viewBox="100 0 600 600"></svg>