Line Animation

by shanejones

HTML

<script src="https://cdn.jsdelivr.net/vivus/0.3.0/vivus.min.js"></script>
<div class="scroller">
  <div class="panel-1">
    <svg id="line1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65" width="500" height="500" fill="none">
      <path d="M32 0 L32 64" fill="none" stroke="green" stroke-width="1"></path>
    </svg>
  </div>
  <div class="panel-2">
      <svg id="line2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65" width="500" height="500" fill="none">
        <path d="M32 0 L16 64" fill="none" stroke="green" stroke-width="1" style="stroke-dasharray: 66px, 68px; stroke-dashoffset: 67px;"></path>
      </svg>
  </div>
  <div class="panel-3">
      <svg id="line3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65" width="500" height="500" fill="none">
        <path d="M16 0 L48 64" fill="none" stroke="green" stroke-width="1" style="stroke-dasharray: 72px, 74px; stroke-dashoffset: 73px;"></path>
      </svg>
  </div>
  <div class="panel-4">
    <svg id="line4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" height="500" fill="currentcolor">
      <path d="M48 0 L48 64" fill="none" stroke="green" stroke-width="1" style="stroke-dasharray: 64px, 66px; stroke-dashoffset: 65px;"></path>
    </svg>
  </div>
  <div class="panel-5">
    <svg id="line5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" height="500" fill="none">
    <path d="M48 0 L32 64" fill="none" stroke="green" stroke-width="1" style="stroke-dasharray: 66px, 68px; stroke-dashoffset: 67px;"></path>
  </svg>
  </div>
</div>

CSS

.scroller {
  width: 500px;
  background: white;
  margin: 20px auto;
  
  
}

JavaScript

var settings = {duration: 100, start: 'inViewport'}


var line1 = new Vivus('line1', settings);
var line2 = new Vivus('line2', settings);
var line3 = new Vivus('line3', settings);
var line4 = new Vivus('line4', settings);
var line5 = new Vivus('line5', settings);