Best HTML5 SVG Polygon Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials

Welcome to the world of design in HTML5 SVG Polygon

HTML5 has lots of new features for modern web designing. we can make shapes & images by the use of Canvas & SVG. In SVG , web designer can make Polygon,

Some examples of SVG Shape Polygon

1.First Example of SVG POLYGON

Coding of this example

<svg height="200" width="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:Black;stroke-width:5"/>
</svg>

2.Second Example of SVG POLYGON

Coding of this example

<svg height="500" width="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;"/>
</svg>

3.Third Example of SVG POLYGON

Coding of this example

<svg height="350" width="350">
<polygon points="10,10 110,10 150,50 190,10 290,10 290,250 190,250 190,150 150,190 110,150 110,250 10,250"
style="fill:red;stroke:black;stroke-width:4;"/>
</svg>

4.Forth Example of SVG POLYLINE

Coding of this example

<svg id="aa" height="250" width="500">
<ellipse cy="176" cx="361" rx="50" ry="55" style="fill:red;stroke:#000000;stroke-width:5"/>
</svg>

<svg id="bb" height="750" width="750">
<polygon points="398,369 362,397 288,428 274,397 355,350 383,287 398,269 430,258 466,263 548,316 573,413 543,425 512,344 477,335 517,443 550,580 598,681 563,700 502,578 463,498 409,573 403,708 366,709 365,547 417,459 398,369"
style="fill:red;stroke:#000000;stroke-width:5"/>
</svg>


HTML5 SVG polygon Courses in Delhi