SVG Polygon Animation
SVG Polygon
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.
SVG Polygon With Four Sides
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>
Create a Star
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
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.
Change the fill-rule property to evenodd
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>
SVG Polygon Animation
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
