Crus4

logo

SVG Polygon Animation


Table of Contents

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

SVG Polyline Animation

Dotted Line SVG

SVG Rectangle

SVG Polygon Animation – crus4