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>