Polygon is a plane closed figure with three or more then three straight sides and angles.
The <polygon> element is used to create a polygon.
Below in an example let’s write an SVG code to create a polygon with three sides.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polygon</title> </head> <body> <svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:powderblue;stroke:green;stroke-width:2" /> </svg> </body> </html>
The attribute points specifies the x and y coordinates for each corner of the polygon.
As I already told you Polygon is any closed shape with three or more straight sides. So now let’s write an SVG code to create a polygon with four sides.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polygon with four sides</title> </head> <body> <svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:powderblue;stroke:green;stroke-width:2" /> </svg> </body> </html>
A Star also has of more than three straight sides. So we can also create it with the <polygon> element. Below is the SVG code to draw a star.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polygon create Star</title> </head> <body> <svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:powderblue;stroke:green;stroke-width:5;fill-rule:nonzero;" /> </svg> </body> </html>
The fill-rule property specifies the algorithm which is to be used to determine what parts of the polygon are included inside the shape.
There are two possible values of fill-rule
property. These are:
nonzero
This value determines the “insideness” of a point on the polygon by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray.
Evenodd
This value determines the “insideness” of a point on the polygon by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.
Let’s copy the same code that we have wrote to create a star. But this time change the fill-rule
value from nonzero
to evenodd
.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polygon create Star</title> </head> <body> <svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:powderblue;stroke:green;stroke-width:5;fill-rule:nonzero;" /> </svg> </body> </html>
We can animate any polygon by using the <animate>
element. In an example below let’s write a code to animate a polygon.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polygon Animation</title> </head> <body> <svg viewBox="0 0 2040 352"> <polygon points="" fill="red"> <animate attributeName="points" dur="1s" fill="freeze" from="0,352, 550,352, 1240,352, 1592,352, 1880,352, 2040,352, 2040,352,0,352" to="0,292, 550,232, 1240,258, 1592,158, 1880,168, 2040,0, 2040,352,0,352"/> </polygon> </svg> </body> </html>
The <animate>
element is used to animate the Polygon.
Related Posts