A Polyline is any shape consists of more than two straight lines connected at several points. The <polyline> element is used to draw polyline shapes.
Below is an SVG code to create a simple polyline shape.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polyline </title> </head> <body> <svg height="200" width="500"> <polyline points="150,46 60,40 80,120 120,140 200,180" style="fill:none;stroke:indigo;stroke-width:3" /> </svg> </body> </html>
Here the points attribute specifies the list of points required to draw a polyline.
In an example below let’s write a code to draw a polyline with opacity.
Example
<!DOCTYPE html> <html> <head> <title> SVG Polyline </title> </head> <body> <svg height="200" width="500"> <polyline points="150,46 60,40 80,120 120,140 200,180" style="fill:none;stroke:indigo;stroke-width:3 stroke-opacity:0.5;" /> </svg> </body> </html>
You can animate any Polyline shape by using the <animate>
element. In an example below let’s see how you can animate a polyline shape.
Example
<!DOCTYPE html> <html> <head> <title>SVG Polyline Animation</title> </head> <body> <svg width="500" height="180" viewBox="0 0 1000 1000"> <polyline stroke="black" stroke-width="11" fill="none"> <animate attributeName="points" dur="3s" repeatCount="indefinite" from="100,100 900,100 900,900 100,900 100,100" to="200,200 800,500 800,500 200,800 200,200"/> </polyline> </svg> </body> </html>
Code Explanation
<animate>
element is used to animate a polyline shape. Related Posts