<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="glow" width="350%" height="350%" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
<feOffset dx="0" dy="6" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.12"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<polygon class="midMid" points="463 348 336 348 338 252 463 252 463 348" fill="#39b54a" opacity="0"/>
<polygon class="midEnd" points="443.5 361 330.5 331 330.5 269 443.5 239 443.5 361" fill="red" opacity="0"/>
<g id="toggle">
<circle class="circleL" cx="337.5" cy="300" r="64"/>
<circle class="circleR" cx="462.5" cy="300" r="32"/>
<polygon class="midStart" points="469.5 331 356.5 361 356.5 239 469.5 269 469.5 331"/>
</g>
<g id="toggleHole">
<rect width="100%" height="100%" fill="#FFF"/>
<use xlink:href="#toggle" fill="#000"/>
</g>
<mask id="toggleMask">
<use xlink:href="#toggleHole"/>
</mask>
</defs>
<use filter="url(#glow)" xlink:href="#toggle" class="toggle" fill="#CD5A3A"/>
<g class="cross">
<line id="stalk" x1="349.79" y1="286.71" x2="325.21" y2="311.29" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
<line id="tail" x1="325.21" y1="286.71" x2="349.79" y2="311.29" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
<circle cx="337.49" cy="300" r="25.99" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
</g>
</svg>body {
background-color: #FFF;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
position:absolute;
width: 100%;
height: 100%;
visibility: hidden;
transform: translate(-50%, 0%);
}
.toggle, .cross{
tap-highlight-color:transparent;
cursor:pointer;
}
.cross{
pointer-events:none;
}MorphSVGPlugin.convertToPath('polygon')
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);
},
cross = select('.cross'),
toggleBg = select('.toggleBg'),
toggle = select('.toggle'),
circleL = select('.circleL'),
circleR = select('.circleR'),
circleSmallR = 32,
circleBigR = 64,
midStart = select('.midStart')
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(cross, {
transformOrigin:'50% 50%'
})
TweenLite.defaultEase = Linear.easeNone;
var tl = new TimelineMax({paused:true});
tl.to(circleR, 2, {
attr:{
r:circleBigR
}
})
.to(circleL, 2, {
attr:{
r:circleSmallR
}
},'-=2')
.to(toggle, 2, {
fill:'#9DCD40',
ease:Sine.easeInOut
},'-=2')
.to(midStart, 1, {
morphSVG:'.midMid'
},'-=2')
.to(midStart, 1, {
morphSVG:'.midEnd'
},'-=1')
var iconTl = new TimelineMax({paused:true});
iconTl.fromTo(cross, 1, {
scale:2,
x:0,
rotation:0,
fill:'#FFF'
},{
x:125/2,
scaleY:0.8,
ease:Sine.easeIn
})
.to(cross, 1, {
x:125,
scale:2,
ease:Sine.easeOut
})
.to('#stalk', 1.5, {
attr:{
x1:351,
y1:289,
x2:335,
y2:310
},
ease:Sine.easeInOut
},'-=2')
.to('#tail', 1.5, {
attr:{
x1:325,
y1:300,
x2:335,
y2:310
},
ease:Sine.easeInOut
},'-=2')
var mainTl = new TimelineMax({paused:true}).timeScale(0.9);
mainTl.to(tl, 1, {
time:tl.duration()-0.2,
ease:Elastic.easeOut.config(0.5,0.5)
})
.to(iconTl, 1, {
time:iconTl.duration(),
ease:Elastic.easeOut.config(0.1,0.5)
},'-=1')
.addPause()
.to(tl, 1, {
time:0.1,
ease:Elastic.easeOut.config(0.5,0.5)
})
.to(iconTl, 1, {
time:0,//iconTl.duration(),
ease:Elastic.easeOut.config(0.1,0.5)
},'-=1')
toggle.onclick = function(){
if(mainTl.time() <= 1){
mainTl.play()
} else{
mainTl.play(0)
}
}
mainTl.timeScale(1.6)
//ScrubGSAPTimeline(tl);
External CSS
This Pen doesn't use any external CSS resources.