Polygon SVG Generator

Fast, accurate and free online multi-angle svg generator tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Settings / Settings

Mode

Width 512

Height 512

Internal spacing (padding) 32

Precision 2

Number of sides 6

Rotation -90

Filling

Outline

Stroke width 8

Joining lines (linejoin)

Line ending (linecap)

Close the path Tool Option

Title

Description

Live Preview

Change parameters to generate SVG.

Result / Result SVG

Set parameters and click "Process" to see the result.

Rate this tool:

Related tools

Other tools you may find useful

SVG polygon generator – polygon and stars without editor

Polygons (polygon) and stars (star polygon) are basic SVG shapes used in iconography, UI decoration and infographics. The tool calculates the vertex coordinates of regular and irregular polygons and generates a finished elementor.

SVG polygon generator SVG polygon generator SVG shapes SVG star code

Types of generated shapes

Regular polygon: triangle (3), square (4), pentagon (5), hexagon (6)... up to 20+ vertices. Star (star polygon): N external vertices and N internal vertices (r1/r2 ratio). Irregular shape: manual positioning of each vertex. Rounded polygons: smooth corners by cubic bezier.

Polygon parameters

Number of vertices (N): 3-20. Outer radius (R): size of the figure. Inner radius (r, stars only): depth of the pits. Rotation: 0-360°. Center (cx, cy): position on canvas. Fill, stroke, line thickness (stroke-width).

SVG polygon vs path

: simpler, only straight edges.: full flexibility, supports bezier curves. The tool generates both variants - polygon for simple shapes, path for rounded ones.

UI/UX Applications

Shape icons (rating stars, badges). Decorative backgrounds (honeycomb made of hexagons). Radar charts (spider/web chart). Arrows and direction indicators. Image masking (clip-path). SVG animations (morph between shapes).

Frequently asked questions

How to calculate the coordinates of a regular polygon?

x[i] = cx + R × cos(2π×i/N - π/2), y[i] = cy + R × sin(2π×i/N - π/2). For N=6 (hexagon): 6 points spaced every 60°. Subtracting π/2 rotates the shape so that the vertex is at the top.

How to make a morphing animation between polygons?

CSS: shape shape in clip-path + transition. SMIL:between two paths (works when they have the same number of vertices). GSAP MorphSVG plugin: morphing between arbitrary SVG paths.

Why doesn't SVG polygon have rounded corners?

The rx/ry attribute only works for. Fillets for polygon require the use ofwith cubic Bezier curves. The tool offers a "smooth corners" option that generates a path instead of a polygon.

How to use a polygon as a mask (clip-path) in CSS?

.element { clip-path: polygon(50% 0%, 100% 100%, 0% 100%) } for triangle. You can paste the generated coordinates. Percentages work on any HTML element. Clip-path animation creates a shape expanding effect.

Are SVG polygons accessible?

Pure decorative shapes: aria-hidden="true". Meaningful shapes (icons): role="img" aria-label="description". The fill color should meet the WCAG contrast when carrying information.

Related tools: SVG plot generator, SVG wave generator and SVG blob generator.