<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 600 600" >
    <defs>
      <filter id="goo" height="300%" y="-100%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -7" result="cm" />

      </filter>
    </defs>
    <g class="radioGroup" filter="url(#goo)">
      <circle id="radio2" fill="#FFFFFF" cx="100" cy="400" r="12" />

      <circle id="radio1" fill="#FFFFFF" cx="100" cy="325" r="12" />

      <circle id="radio0" fill="#FFFFFF" cx="100" cy="250" r="12" />
      <ellipse id="ring" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" cx="100" cy="250" rx="22" ry="22" />
      <g id="clickLineGroup" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="10">
          <line x1="99" y1="250" x2="73.4" y2="188.1"/>
        <line x1="99" y1="250" x2="124.5" y2="188.4"/>
        <line x1="99" y1="250" x2="160.9" y2="224.4"/>
        <line x1="99" y1="250" x2="160.6" y2="275.5"/>
        <line x1="99" y1="250" x2="124.6" y2="311.9"/>
        <line x1="99" y1="250" x2="73.5" y2="311.6"/>
        <line x1="99" y1="250" x2="37.1" y2="275.6"/>
        <line x1="99" y1="250" x2="37.4" y2="224.5"/>
      </g>
    </g>
<g id="textGroup">
    <text id="text0" fill="#FFFFFF" x="140" y="257">Splat - it's the new click!</text>
    <text id="text1" fill="#FFFFFF" x="140" y="332">Gooey buttons are snazzy!</text>
    <text id="text2" fill="#FFFFFF" x="140" y="407">Unlike (because I'm dead inside)</text>  
    </g>


  </svg>

body {
  background-color:#03A9F4;
  overflow: hidden;
}

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

svg{
  width:100%;
  visibility:hidden;
  height:100%; 
}

.radioGroup *{
  cursor:pointer;
}
circle{
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

text{
  font-size:26px;
  font-family: 'Ubuntu', sans-serif;
}

var xmlns = "http://www.w3.org/2000/svg",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
 // container = select('.container'),
    ring = select('#ring')
  


//center the container cos it's pretty an' that
/*TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})
*/
TweenMax.set('svg', {
  visibility:'visible'
})

TweenMax.set('#clickLineGroup line', {
  drawSVG:'40% 40%'
})

for(var i = 0; i < 3; i++){
  select('#radio' + i).radioId = i;
  select('#radio' + i).onclick = function(e){
    //console.log(e.target.radioId)
    var tl = new TimelineMax();
    tl.set('#clickLineGroup line', {
        drawSVG:'40% 40%'
      })
     .set('#clickLineGroup', {
        y:e.target.radioId * 75
      })
      .set(ring, {
      attr:{
        cy:e.target.getAttribute('cy'),
        rx:0,
        ry:0
      }
    })
      .to(ring, 1, {
      attr:{
        ry:22
      },
      ease:Elastic.easeOut.config(0.8, 0.6)
    })
      .to(ring, 0.8, {
      attr:{
        rx:22
      },
      ease:Elastic.easeOut.config(1.5, 0.79)
    },'-=1')
      
      .fromTo(e.target, 0.8, {
      attr:{
        r:4
      }
    },{
      attr:{
        r:12
      },
      ease:Elastic.easeOut.config(2.1, 0.9)
    },'-=1')
    .to('#clickLineGroup line', 0.4, {
      drawSVG:'40% 70%',
      ease:Linear.easeNone
},'-=1')
      .to('#clickLineGroup line', 0.4, {
        drawSVG:'100% 100%',
        ease:Linear.easeNone
},'-=0.6')
    
    
     tl.timeScale(1.2);
    
    TweenMax.set('text', {
      alpha:0.5
    })
    TweenMax.to(['#text' + e.target.radioId], 1, {
      alpha:1
    })  
     
  }//end loop
    
 
}


select('#radio0').onclick({target:select('#radio0')});