<svg version="1.1" id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
  	 width="300px" height="120px" viewBox="0 0 300 120"  xml:space="preserve">
    
  <line data-start="200" data-duration="200" class="line" x1="10" y1="25.5" x2="250" y2="25.5"/>
  <line data-start="0" data-duration="100" class="line" x1="10" y1="50.5" x2="250" y2="50.5"/>
  <line data-start="100" data-duration="10" class="line" x1="10" y1="75.5" x2="250" y2="75.5"/>
  <line data-start="300" data-duration="100" class="line" x1="10" y1="100.5" x2="250" y2="100.5"/>


</svg>

<p>Each line has a custom delay and speed set.</p>
<p><code>data-start="300" data-duration="100"</code></p>
.line {
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 10;
}























svg {
  outline: 1px #ccc dashed;
  clear: both;
}
body{
  font-family: sans-serif
}
new Vivus('canvas', {start: 'autostart', type: 'scenario'});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js