Best HTML5 SVG Polyline Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials

Welcome to the world of design in HTML5 SVG Polyline

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 ractange,

Some examples of SVG Shape Poly-Line

1.First Example of SVG POLYLINE

Coding of this example

<svg>
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>


2.Second Example of SVG POLYLINE

Coding of this example

<svg height="410" width="450">
<line x1="90" y1="145" x2="190" y2="50" style="stroke:red;stroke-width:5"/>
<line x1="190" y1="50" x2="330" y2="50" style="stroke:red;stroke-width:5"/>
<line x1="330" y1="50" x2="430" y2="150" style="stroke:red;stroke-width:5"/>
<line x1="430" y1="150" x2="430" y2="290" style="stroke:red;stroke-width:5"/>
<line x1="430" y1="290" x2="330" y2="385" style="stroke:red;stroke-width:5"/>
<line x1="330" y1="385" x2="190" y2="385" style="stroke:red;stroke-width:5"/>
<line x1="190" y1="385" x2="90" y2="285" style="stroke:red;stroke-width:5"/>
<line x1="90" y1="285" x2="90" y2="145" style="stroke:red;stroke-width:5"/>
</svg>

3.Third Example of SVG POLYLINE

Coding of this example

<svg height="600" width="650">
<line x1="110" y1="200" x2="275" y2="255" style="stroke:red;stroke-width:5"/>
<line x1="275" y1="255" x2="540" y2="180" style="stroke:red;stroke-width:5"/>
<line x1="540" y1="180" x2="595" y2="197" style="stroke:red;stroke-width:5"/>
<line x1="595" y1="197" x2="380" y2="318" style="stroke:red;stroke-width:5"/>
<line x1="380" y1="318" x2="510" y2="380" style="stroke:red;stroke-width:5"/>
<line x1="510" y1="380" x2="600" y2="350" style="stroke:red;stroke-width:5"/>
<line x1="600" y1="350" x2="640" y2="375" style="stroke:red;stroke-width:5"/>
<line x1="640" y1="375" x2="555" y2="420" style="stroke:red;stroke-width:5"/>
<line x1="555" y1="420" x2="590" y2="445" style="stroke:red;stroke-width:5"/>
<line x1="590" y1="445" x2="545" y2="437" style="stroke:red;stroke-width:5"/>
<line x1="545" y1="437" x2="525" y2="517" style="stroke:red;stroke-width:5"/>
<line x1="525" y1="517" x2="480" y2="485" style="stroke:red;stroke-width:5"/>
<line x1="480" y1="485" x2="487" y2="420" style="stroke:red;stroke-width:5"/>
<line x1="487" y1="420" x2="355" y2="355" style="stroke:red;stroke-width:5"/>
<line x1="355" y1="355" x2="300" y2="565" style="stroke:red;stroke-width:5"/>
<line x1="300" y1="565" x2="265" y2="550" style="stroke:red;stroke-width:5"/>
<line x1="265" y1="550" x2="237" y2="297" style="stroke:red;stroke-width:5"/>
<line x1="237" y1="297" x2="108" y2="200" style="stroke:red;stroke-width:5"/>
</svg>

4.Forth Example of SVG POLYLINE

Coding of this example

<svg height="600" width="1050">
<line x1="70" y1="515" x2="65" y2="487" style="stroke:red;stroke-width:5"/>
<line x1="65" y1="487" x2="45" y2="480" style="stroke:red;stroke-width:5"/>
<line x1="45" y1="480" x2="45" y2="415" style="stroke:red;stroke-width:5"/>
<line x1="45" y1="415" x2="65" y2="400" style="stroke:red;stroke-width:5"/>
<line x1="65" y1="400" x2="90" y2="320" style="stroke:red;stroke-width:5"/>
<line x1="90" y1="320" x2="232" y2="300" style="stroke:red;stroke-width:5"/>
<line x1="232" y1="300" x2="305" y2="155" style="stroke:red;stroke-width:5"/>
<line x1="305" y1="155" x2="632" y2="155" style="stroke:red;stroke-width:5"/>
<line x1="632" y1="155" x2="732" y2="282" style="stroke:red;stroke-width:5"/>
<line x1="732" y1="282" x2="975" y2="322" style="stroke:red;stroke-width:5"/>
<line x1="975" y1="322" x2="990" y2="403" style="stroke:red;stroke-width:5"/>
<line x1="990" y1="403" x2="1012" y2="415" style="stroke:red;stroke-width:5"/>
<line x1="1012" y1="415" x2="1012" y2="480" style="stroke:red;stroke-width:5"/>
<line x1="1012" y1="480" x2="990" y2="487" style="stroke:red;stroke-width:5"/>
<line x1="990" y1="487" x2="985" y2="515" style="stroke:red;stroke-width:5"/>
<line x1="985" y1="515" x2="900" y2="515" style="stroke:red;stroke-width:5"/>
<line x1="900" y1="515" x2="880" y2="580" style="stroke:red;stroke-width:5"/>
<line x1="880" y1="580" x2="793" y2="580" style="stroke:red;stroke-width:5"/>
<line x1="793" y1="580" x2="773" y2="515" style="stroke:red;stroke-width:5"/>
<line x1="773" y1="515" x2="340" y2="515" style="stroke:red;stroke-width:5"/>
<line x1="340" y1="515" x2="320" y2="580" style="stroke:red;stroke-width:5"/>
<line x1="320" y1="580" x2="230" y2="580" style="stroke:red;stroke-width:5"/>
<line x1="230" y1="580" x2="213" y2="515" style="stroke:red;stroke-width:5"/>
<line x1="213" y1="515" x2="70" y2="515" style="stroke:red;stroke-width:5"/>
</svg>

html5 svg polyline courses in Delhi