<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>There is a slight delay between each line starting.</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: 'delayed', duration: 200});
This Pen doesn't use any external CSS resources.