SVG Polygon

<polygon> are used to draw graphics. there will be required at least 3 coordinate points to make a shape. Every coordinate is pair of (x-axis and y-axis). the syntax of given below.

<polygon points="coordinates-pair"></polygon>

For example create a triangle.

In this diagram (x=150 y=100),(x=150 y=100),(x=150 y=100) is coordinates. we can also used more than 3 coordinates.

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polygon stroke-width="2" fill="green" points="150 50,250 150,50 150 "></polygon>
</svg>

Example 1

  <svg height="260" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <polygon points="100 100, 200 100, 170 70,190 70,230 110, 190 150,170 150,200 120,100 120" stroke="blue" fill="none"></polygon>
  </svg>

Example 2

<svg height="320" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polygon points="150 10, 187.5 47.5,187.5 85,225 85,225 123.5,260 123.5,298 161,260 198.5,225 198.5,225 236,187.5 236,187.5 273.5,150 311,112.5 273.5,112.5 236,75 236,75 198.5,37.5 198.5,0 161, 37.5 123.5,75 123.5, 75 86, 113.5 86,113.5 48.5" stroke="#9c27b0" stroke-width="2" fill="none"></polygon>
</svg>

SVG Polygon Animation

<svg height="320" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polygon stroke-width="2" stroke-dasharray="10 10"  points="150 10, 187.5 47.5,187.5 85,225 85,225 123.5,260 123.5,298 161,260 198.5,225 198.5,225 236,187.5 236,187.5 273.5,150 311,112.5 273.5,112.5 236,75 236,75 198.5,37.5 198.5,0 161, 37.5 123.5,75 123.5, 75 86,113.5 86,113.5 48.5" stroke="blue" fill="azure">
    <animate attributeName="stroke-dashoffset" from="0" to="200" begin="1s" dur="19s" repeatCount="20"></animate>  
   </polygon>
</svg>