Create Regular Polygons with SVG Path Lineto Commands

Regular Polygons with Line Commands

A regular polygon has all sides equal and all angles equal. The vertices lie on a circle, evenly spaced at angular intervals of 360 / n degrees.

Vertex Formula

For an n-sided polygon centered at (cx, cy) with radius r:

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

The -PI/2 offset starts the first vertex at the top.

Triangle (n=3)

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

Pentagon (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

Hexagon (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

Octagon (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

Programmatic Generation

In 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";
}

Rounded Polygons

Replace sharp corners with small arc commands for a rounded polygon effect:

# Instead of: L x2,y2
# Use: L (point slightly before corner) A r,r 0 0,1 (point slightly after corner)

This requires calculating offset points along each edge.