<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 741 450">
<defs>
</defs>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="77" y1="11" x2="10" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="171" y1="11" x2="77" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="238" y1="11" x2="171" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="292" y1="11" x2="238" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="367" y1="11" x2="292" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="466" y1="11" x2="367" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="512" y1="11" x2="466" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="588" y1="11" x2="511" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="645" y1="11" x2="588" y2="11"/>
<line fill="none" stroke="#4AC900" stroke-width="4" stroke-miterlimit="10" x1="731" y1="11" x2="645" y2="11"/>
<g>
  <circle fill="#FF8300" cx="10.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="77.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="171.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="238.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="292.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="367.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="466.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="510.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="588.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="645.5" cy="10.5" r="10.5"/>
  <circle fill="#FF8300" cx="730.5" cy="10.5" r="10.5"/>
</g>
<path id="graph-measurement" fill="none" stroke="#741E00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
  M731,127H10 M10,127v-18 M113,127v-9.1 M731,109v18 M216,127v-9.1 M319,127v-9.1 M422,127v-9.1 M525,127v-9.1 M628,127v-9.1"/>
</svg>

body {
 background-color:#24303A;
 overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
svg{
  opacity:0;
  width:100%;
  height:100%;
}

var container = document.getElementById('container');
var graphMeasurement = document.getElementById('graph-measurement');

var allCircles = document.getElementsByTagName('circle');
var allLines = document.getElementsByTagName('line');

//console.log(topSVGNode)



var destArray = [15,52,28,170,105,93,44, 122, 179, 170, 220];


TweenMax.set(allCircles, {
  attr:{fill:'#954CE9', r:5},
  transformOrigin:'50% 50%',
  scale:0
})
TweenMax.set([allLines], {
  attr:{stroke:'#18B5DD'},
  drawSVG:'100% 100%',
  strokeWidth:2
})
TweenMax.set([graphMeasurement], {
  attr:{stroke:'#18B5DD'},
  drawSVG:'100% 100%',
  strokeWidth:1
})

TweenMax.set([allCircles, allLines], {
  y:'+=300'
})

TweenMax.set(graphMeasurement, {
  y:'+=280',
  alpha:0.3
})
TweenMax.to(graphMeasurement,3, {
  drawSVG:'0% 100%',
  delay:1,
    ease:Power2.easeInOut
})
TweenMax.set('svg', {
  alpha:1
})
for(var i = 0; i < allCircles.length; i++){
  
  TweenMax.to(allCircles[i], 2, {
    attr:{cy:'-=' + destArray[i]},
    onUpdate:moveLines,
    onUpdateParams:[i],
    delay:i/5,
    ease:Power4.easeInOut
  })
    if(allLines[i]){
      
      TweenMax.to(allLines[i], 1, {
        drawSVG:'400',
        delay:i/5,
        ease:Power4.easeInOut
      })     
    }

    TweenMax.to(allCircles[i], 1, {
     scale:1,
      delay:i/5,
    ease:Power4.easeInOut
   })
  
}

function moveLines(i){

  if(allLines[i]){

    TweenMax.set(allLines[i], {
       attr:{
         x2:allCircles[i].getAttribute('cx'), y2:allCircles[i].getAttribute('cy')
       }     
     })
   TweenMax.set(allLines[i], {
       attr:{
         x1:allCircles[i+1].getAttribute('cx'), y1:allCircles[i+1].getAttribute('cy')
       }     
     })   
    

}
}