SVG Polyline Animation
Table of Contents
SVG Polyline
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.
SVG Polyline with Opacity
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>
SVG Polyline Animation
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
- The
<animate>element is used to animate a polyline shape. - Attribute dur defines the time taken to animate a polyline.
- The repeatCount attribute defines the how many did the polyline animate.
- If you set the value of repeatCount to any number, the polyline will animate only that particular number of times. After that it will disappear, try it on our Online Code Editor.
Related Posts
SVG Polyline Animation – crus4
