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.
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.
<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> |
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') | |
} | |
}) | |
} | |
} |
<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> |
body{ | |
background-color:#24303A; | |
overflow:hidden; | |
text-align:center; | |
} | |
svg{ | |
opacity:0; | |
width:80%; | |
height:80%; | |
} |