SVG で描画してみる

SVG で描画してみる

<code>
  <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" id="hoge">
  </svg>
</code>

<script>
const
  doc = document,
  svg = document.querySelector ('#hoge'),
  { PI, sin, cos } = Math,
  cx = 400, cy = 400,
  polyline = doc.createElementNS ("http://www.w3.org/2000/svg", 'polyline'),
  style = 'fill:none; stroke: red; stroke-width: 1;';

const
  N = 3
  STEP = 4;

polyline.setAttribute ('style', style);

for (let r = 0; r < 400; r += STEP) {
  let
    point = [ ],
    poly  = polyline.cloneNode (true);

  for (let p = r; p < 360 + r; p += 360 / N) {
    let a = p * PI / 180;
    point.push ([cx + sin (a) * r, cy - cos (a) * r]);
  }
  point.push (point[0]);
  
  poly.setAttribute ('points', point.map (([x, y]) => `${x},${y}`).join (' '));
  svg.appendChild (poly);
}

</script>