crus4

logo

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


Related Posts

SVG Circle

Dotted Line SVG

SVG Rectangle

SVG Polyline Animation – crus4