<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<g id="button">
  <circle id="circle" fill="#CCCDDD" stroke="#FFF" stroke-width="8" stroke-miterlimit="10" cx="400" cy="300" r="82"/>
	<g id="arrowGroup">
			<line fill="none" stroke="#FFF" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="400" y1="335" x2="423" y2="312"/>
		
			<line fill="none" stroke="#FFF" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="400" y1="335" x2="377" y2="312"/>
		
			<line fill="none" stroke="#FFF" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" x1="400" y1="335" x2="400" y2="265"/>
	</g>
	
		<polyline id="tick" fill="none" stroke="#6247AA" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		438.093,269.713 399.763,334.862 361.907,311.267"/>
	<g id="circleFill">
		<path fill="none" stroke="#6247AA" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M400,382c45.287,0,82-36.713,82-82s-36.713-82-82-82s-82,36.713-82,82S354.713,382,400,382"/>
	</g>
</g>
<g id="speedLines">
		<line fill="none" stroke="#A879D8" stroke-width="2" stroke-miterlimit="10" x1="402.25" y1="329.331" x2="402.25" y2="296.501"/>
		<line fill="none" stroke="#A879D8" stroke-width="2" stroke-miterlimit="10" x1="397.75" y1="319.58" x2="397.75" y2="294.33"/>
</g>
<g id="speedLinesDown">
		<line fill="none" stroke="#A879D8" stroke-width="2" stroke-miterlimit="10" x1="398.18" y1="253.857" x2="398.18" y2="286.687"/>
		<line fill="none" stroke="#A879D8" stroke-width="2" stroke-miterlimit="10" x1="402.68" y1="263.608" x2="402.68" y2="288.858"/>
</g>    
<g id="dots">  
<ellipse id="dot" fill="#6247AA" cx="400" cy="382" rx="5" ry="5"/>
<ellipse id="arrowDot" fill="#FFF" cx="400" cy="335" rx="4" ry="4"/>
</g>  
</svg>

html,body {
  height:100%;
}
body {
  overflow:hidden;
  background:#CCCDDD;
}
svg {
  width:100%;
  height:100%;
  visibility:hidden;
}
#button {
  cursor:pointer;
}

// Initial configuration
TweenMax.set("svg",{visibility:"visible"})
TweenMax.set("#tick",{drawSVG:"0% 0%"})
TweenMax.set("#circleFill path ",{drawSVG:"0% 0%"})
TweenMax.set('#speedLines line',{drawSVG:"10% 10%",y:-10})
TweenMax.set('#speedLinesDown line',{y:12})
TweenMax.set("#dot",{opacity:0})
TweenMax.set('#arrowDot',{opacity:0})

var masterTl = new TimelineMax({
  paused:false,onStart: function(){
    // fix tick stroke with round join is visible on repeat/restart
    TweenMax.set("#tick",{opacity:0})
    }
  }
);
function arrowOut() {
  var tl = new TimelineMax();
  // arrow to 0
  tl.to('#arrowGroup line',0.5,{
     drawSVG:"0% 0%",
     ease:Power4.easeIn
   },'in')
  // move arrowDot to circle stroke
  //.to('#arrowDot',0.15,{y:47,ease:Power1.easeIn},'in+=0.4')
  //.to('#arrowDot',0,{opacity:0})
  return tl;
}
function drawCircle() {
  var tl = new TimelineMax();
  // Animating the circle fill
  tl.fromTo("#circleFill path",0.8,{
     drawSVG:"0%",
     immediateRender:false
   },
   {
     drawSVG:"100%",
     ease:Sine.easeIn
   },'in+=0.25')
   .to("#circleFill",0.8,{
     rotation:'-=360',
     transformOrigin:"center center",
     ease:Sine.easeIn
   },'in+=0.25')
  return tl;
}
function throwDot() {
  var tl = new TimelineMax();
  // throw dot
  tl.to('#dot',0.01,{
     opacity:1
   })
   .to('#dot',0.2,{
     y:-100,
     attr:{rx:2.5},
     immediateRender:false,
     ease:Circ.easeOut
   },"ballUp")
   .to('#dot',0.2,{
     attr:{rx:4},
     ease:Back.easeOut
   },'ballUp+=0.2')
   .to('#dot',0.25,{
     attr:{ry:2.5},
     y:-49,
     immediateRender:false,
     ease:Power4.easeIn
   },'ballUp+=0.35')
  return tl;
}
function drawLinesUp() {
  var tl = new TimelineMax();
  // draw speed lines 
  tl.fromTo('#speedLines line',0.10,{
     drawSVG:"20% 20%"
   },{
     drawSVG:"75%"
   })
   .fromTo('#speedLines line',0.15,{
     drawSVG:"75%",immediateRender:false
   },{
     drawSVG:"0% 0%",
     y:0
   })
  return tl;
}
function drawLinesDown() {
  var tl = new TimelineMax();
  // lines down
  tl.fromTo('#speedLinesDown line',0.10,{
    drawSVG:"30% 30%"
  },
  {
    drawSVG:"75%"
  })
  .fromTo("#speedLinesDown line",0.15,{
    drawSVG:"75%",
    immediateRender:false
  },
  {
    drawSVG:"100% 100%",
    y:15
  })
  return tl;
}
function drawTick() {
  var tl = new TimelineMax();
  // draw tick
  tl.fromTo('#tick',0.35,{
     drawSVG:"61% 61%",
     opacity:1,
     immediateRender:false,
   },
   {
     drawSVG:"100%",
     opacity:1,
     ease:Back.easeOut
   },'draw')
   .to('#dot',0.1,{
     opacity:0
   },'draw')
  return tl;
}

masterTl.add(arrowOut())
        .add(drawCircle(),0)
        .add(throwDot(),'throwDot')
        .add(drawLinesUp(),'throwDot+=0.05')
        .add(drawTick())
        .add(drawLinesDown(),'throwDot+=0.49')


// If the timeline has played all the way through restart the timeline on click
// else play the animation from the beginning
function PLayTimeline() {
 if(masterTl.progress() == 1){
  masterTl.restart()
 } else {
  masterTl.play()
 }
}
// Play the animation on click
document.querySelector("#button").addEventListener("click", function(){
 PLayTimeline()
});















/*
var tl =  new TimelineMax({onStart: function(){
  TweenMax.set("#tick",{opacity:0})
  }
});
document.querySelector("#button").addEventListener("click", function(){
 animateBtn()
});
function animateBtn() {
   // checking the state of the timeline
   changePlayBackDirection()
   // arrow to 0
   tl.to('#arrowGroup line',0.5,{
     drawSVG:"0% 0%",
     ease:Power4.easeIn
   },'in')
   // Animating the circle fill
   .fromTo("#circleFill path",0.8,{
     drawSVG:"0% 5%",
     immediateRender:false
   },
   {
     drawSVG:"100%",
     ease:Sine.easeIn
   },'in+=0.25')
   .to("#circleFill",0.8,{
     rotation:'-=360',
     transformOrigin:"center center",
     ease:Sine.easeIn
   },'in+=0.25')
   // throw dot
   .to('#dot',0.01,{
     opacity:1
   })
   .to('#dot',0.2,{
     y:-100,
     attr:{rx:2.5},
     immediateRender:false,
     ease:Circ.easeOut
   },"ballUp")
   .to('#dot',0.2,{
     attr:{rx:4},
     ease:Back.easeOut
   },'ballUp+=0.2')
   .to('#dot',0.25,{
     attr:{ry:2.5},
     y:-49,
     immediateRender:false,
     ease:Power4.easeIn
   },'ballUp+=0.35')
   // draw speed lines 
   .fromTo('#speedLines line',0.10,{
     drawSVG:"20% 20%"
   },{
     drawSVG:"75%"
   },'ballUp+=0.05')
   .fromTo('#speedLines line',0.15,{
     drawSVG:"75%",immediateRender:false
   },{
     drawSVG:"0% 0%",
     y:0
   },'ballUp+=0.15')
   // draw tick
   .fromTo('#tick',0.35,{
     drawSVG:"61% 61%",
     opacity:1,
     immediateRender:false,
   },
   {
     drawSVG:"100%",
     opacity:1,
     ease:Back.easeOut
   },'draw')
   .to('#dot',0.1,{
     opacity:0
   },'draw')
  return tl.timeScale(1);
}

// Determine state
function changePlayBackDirection() {
 if(tl.progress() == 1){
  tl.restart()
 } else {
  tl.play()
 }
}
*/