Skip to main content
Commonmark migration
Origen Enlace

###Actualización:

Actualización:

###Actualización:

Actualización:

se añadieron 1595 caracteres en el cuerpo
Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21
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>
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;overflow:visible}
path{fill:none; stroke:black;}
<svg viewBox="100 0 600 600"></svg>
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;height:90vh;}
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>
Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

Si necesitas solo el svg lo puedes copiar del inspector. Espero que esto sea lo que necesites.

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;overflow:visible}
path{fill:none; stroke:black;}
<svg viewBox="100 0 600 600"></svg>