HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid slice" viewBox="0 0 800 600">
<defs>
<mask id="radioMask"></mask>
</defs>
<g id="mainGroup">
<g id="circleGroup" fill="#fff">
<circle cx="340" cy="200" r="10" fill="transparent"/>
<circle cx="260" cy="200" r="10"/>
<circle cx="300" cy="160" r="10"/>
<circle cx="340" cy="120" r="10"/>
<circle cx="380" cy="160" r="10"/>
<circle cx="420" cy="200" r="10"/>
<circle cx="380" cy="240" r="10"/>
<circle cx="340" cy="280" r="10"/>
<circle cx="300" cy="240" r="10"/>
</g>
<line id="joinLine" fill="#fff" stroke-width="2" stroke-linecap="round" stroke-miterlimit="20" x1="340" y1="200" x2="340" y2="200"/>
</g>
</svg>
CSS
body,html
{
width:100%;
height:100%;
overflow:hidden;
}
body
{
background-color:#FBC02D;
}
svg{
width:100%;
visibility:hidden;
}
#joinLine
{
stroke:#fff;
}
.container
{
position:absolute;
max-width:100%;
}
JAVASCRIPT
var i=0;
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
size = 24
TweenMax.set('svg', {
visibility: 'visible'
})
select('#joinLine').setAttribute('stroke-width', size);
function fun(e){
var target = e.target;
if(target.tagName == 'circle'){
var id = target.id;
var tl = new TimelineMax();
tl.to('#joinLine', 0.5, {
attr:{
x2:target.getAttribute('cx'),
y2: target.getAttribute('cy')
},
strokeWidth:10,
ease:Power4.easeIn
}).to('#joinLine', 1, {
attr:{
x1:target.getAttribute('cx'),
y1:target.getAttribute('cy')
},
ease:Elastic.easeOut.config(10, 10.76)
}, '+=0')
.to('#joinLine', 2, {
strokeWidth:size,
ease:Elastic.easeOut.config(10, 10.8)
}, '-=1')
tl.timeScale(2)
}
}
//automate the first one\
var myVar = setInterval(funny,500)
function funny()
{
if(i>=9)
i=0;
fun({target:selectAll('circle')[i++]});
}
//document.body.ontouchstart = document.body.onclick
