<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 class="line" x1="10" y1="25.5" x2="250" y2="25.5"/>
  <line class="line" x1="10" y1="50.5" x2="250" y2="50.5"/>
  <line class="line" x1="10" y1="75.5" x2="250" y2="75.5"/>
  <line class="line" x1="10" y1="100.5" x2="250" y2="100.5"/>
    
</svg>

<p>Each line completes before the next starts.</p>

.line {
  stroke: #000000;
  stroke-width: 3;
}























svg {
  outline: 1px #ccc dashed;
  clear: both;
}
body{
  font-family: sans-serif
}

new Vivus('canvas', {start: 'autostart', type: 'oneByOne', duration: 300});