Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG <polygon>


Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".


SVG Polygon - <polygon>

The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (it automatically connects the last point with the first).

The <polygon> element has one basic attribute that defines the points of the polygon:

Attribute Description
points Required. The list of points of the polygon. Each point must contain an x coordinate and a y coordinate

A Polygon With Three Sides

The following example creates a polygon with three sides:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="200,10 250,190 150,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Try it Yourself »

Code explanation:

  • The points attribute defines the x and y coordinates for each corner of the polygon

A Polygon With Four Sides

The following example creates a polygon with four sides:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Try it Yourself »


A Polygon With Six Sides

The following example creates a polygon with six sides:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="350" width="360" xmlns="http://www.w3.org/2000/svg">
  <polygon points="150,75 258,137 258,262 150,325 42,262 42,137"
  style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Try it Yourself »

A Polygon Star

Use the <polygon> element to create a star:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
Try it Yourself »

Another Polygon Star

Use the fill-rule attribute to specify the inside part of a shape:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Try it Yourself »

Code explanation:

  • The fill-rule attribute defines the algorithm to use to specify the inside part of a shape