Draw SVG Graph

draw-svg-graph.markdown

Draw SVG Graph

Ok this is a really rough test to work out how to draw SVG lines between points.

Inspiration from here

A Pen by Chris Gannon on CodePen.

License.

index.html

<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>

</div>

script.js

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')
       }     
     })   
    

}
}

scripts

<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.css

body{
  background-color:#24303A;
  overflow:hidden;
  text-align:center;
}

svg{
  opacity:0;
  width:80%;
  height:80%;
}