SVGパスのLinetoコマンドで正多角形を作成する

ラインコマンドによる正多角形

正多角形はすべての辺が等しく、すべての角度が等しい多角形です。頂点は円上に均等に360 / n度の角度間隔で配置されます。

頂点の計算式

中心(cx, cy)、半径rのn辺の多角形の場合：

x_i = cx + r * cos(2 * PI * i / n - PI/2)
y_i = cy + r * sin(2 * PI * i / n - PI/2)

-PI/2のオフセットは最初の頂点を上部に配置します。

三角形（n=3）

M 50,5 L 93.3,75 L 6.7,75 Z

五角形（n=5）

M 50,5 L 97.6,34.5 L 79.4,90.5
L 20.6,90.5 L 2.4,34.5 Z

六角形（n=6）

M 50,5 L 93.3,27.5 L 93.3,72.5
L 50,95 L 6.7,72.5 L 6.7,27.5 Z

八角形（n=8）

M 50,5 L 81.8,18.2 L 95,50 L 81.8,81.8
L 50,95 L 18.2,81.8 L 5,50 L 18.2,18.2 Z

プログラムによる生成

JavaScriptの場合：

function polygon(n, cx, cy, r) {
  const pts = [];
  for (let i = 0; i < n; i++) {
    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
    const x = cx + r * Math.cos(angle);
    const y = cy + r * Math.sin(angle);
    pts.push(`${i === 0 ? "M" : "L"} ${x.toFixed(1)},${y.toFixed(1)}`);
  }
  return pts.join(" ") + " Z";
}

角丸多角形

鋭い角を小さな弧コマンドに置き換えて角丸多角形の効果を得ます：

# L x2,y2 の代わりに：
# L (コーナーの少し手前の点) A r,r 0 0,1 (コーナーの少し先の点)

これには各辺に沿ったオフセットポイントの計算が必要です。