Polygon Element

Home | Line | Circle | Rectangle | Polyline | Polygon | Text
See Examples
100, 360100, 200225, 80350, 200350, 360
<svg width="450" height="450" >
  <polygon 
    points="100,360
Point
 100,200
Point
 225,80
Point
 350,200
Point
 350,360
Point
 " 
    stroke="#fa3838" stroke-width="20" fill="none" 
  />
</svg>

Polygon

The polygon element is a basic SVG shape that connects multuple points with straight lines. The first an last points are automatically connected.

Points

A list of coordinate points. You can separate the coordinates or the x and y values with commas and spaces. The follwing are the same: 10,10 20,20, 10 10, 20 20, 10 10 20 20, 10, 10, 20, 20.

Styling

Stroke Color

You can set any color value that is valid in CSS. This includes named colors, hex codes, the rgb function and more. Set it to none to hide.

Stroke Width

Set the thickness of the stroke. It can be set to any positive number.

Stroke Linecap

Set the shape to be used at the end of a line or open subpath.

Stroke Linejoin

Set the shape to be used at the corners of paths and basic shapes when they are stroked.

Fill Color

You can set any color value that is valid in CSS. This includes named colors, hex codes, the rgb function and more. Set it to none to hide.