<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="400px" height="120px" viewBox="0 0 400 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="300" y2="50.5"/>  
  <line class="line" x1="10" y1="75.5" x2="300" y2="75.5"/>
  <line class="line" x1="10" y1="100.5" x2="350" y2="100.5"/>


<p>Different length lines still start and finish at the same time.</p>
.line {
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 10;

svg {
  outline: 1px #ccc dashed;
  clear: both;
  font-family: sans-serif
new Vivus('canvas', {start: 'autostart', type: 'async', duration: 300}); 
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