SVG Polygon

Last Updated:

How to Draw a Polygon?

The <polygon> SVG element that draws a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.

In this example, we will draw a six-sided (Hexagon) polygon by using <polygon> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg polygon{ fill:green; stroke:red; stroke-width:3 } </style> </head> <body> <svg width="150" height="150"> <polygon points="60,22 114,53 114,116 60,147 6,116 6,53" /> </svg> </body> </html>

How to Draw a Lightning?

In this example, we will draw a lightning image by using <polygon> SVG element.

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg polygon{ fill:green; stroke:red; stroke-width:3 } </style> </head> <body> <svg width="150" height="150"> <polygon points="0,100 50,25 50,75 100,0" /> </svg> </body> </html>

How to Draw a Star?

In this example, we will draw a star image by using <polygon> SVG element.

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg polygon{ fill:green; stroke:red; stroke-width:3; } </style> </head> <body> <svg width="150" height="150"> <polygon points="50,5 20,99 95,39 5,39 80,99" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
points This attribute specifies the list of points required to draw the polygon.

Share this Page

Meet the Author