console
/* For more information on Greensock's DrawSVGPlugin: http://greensock.com/drawSVG?utm_source=Newsletter-December&utm_medium=email&utm_campaign=DrawSVGPlugin*/
window.addEventListener("click",poke);
TweenMax.to(["#beadyEye1","#beadyEye2"], .17, {repeat:3,yoyo:true,delay:1,scaleY:0,transformOrigin:"50% 50%",ease:Quint.easeInOut});
TweenMax.set(["#stache1","#stache2"], {drawSVG:"50% 50%"});
TweenMax.from("#topHat", .8, {rotation:-20,scale:0,transformOrigin:"50% 100%", delay:2.5,ease:Back.easeOut.config(2)});
TweenMax.to(["#stache1","#stache2"], 1.2, {drawSVG:"5% 95%", delay:2.5,ease:Back.easeOut.config(2)});
TweenMax.from("#monocle", .6, {delay:2.8,attr:{r:0},ease:Back.easeOut.config(4)});
TweenMax.set("#monocleMan", {autoAlpha:1});
window.addEventListener("click",poke);
function poke(){
TweenMax.to("#topHat", .3, {rotation:-((Math.random()*20)+10)*(Math.random()<.5?1:-1),transformOrigin:"50% 100%",ease:Quint.easeOut});
TweenMax.to("#topHat", .3, {delay:.2,rotation:0,transformOrigin:"50% 100%",ease:Quint.easeInOut});
var randomStart=(Math.random()*20)+10;
var randomEnd=100-((Math.random()*20)+10);
TweenMax.to(["#stache1","#stache2"], .3, {drawSVG:(randomStart+"% "+randomEnd+"%"),rotation:(Math.random()*20)-10,transformOrigin:"50% 50%", ease:Quint.easeOut});
TweenMax.to(["#stache1","#stache2"], .3, {delay:.2,drawSVG:"5% 95%",rotation:0,transformOrigin:"50% 50%", ease:Back.easeOut.config(3)});
TweenMax.to("#monocle", .3, {attr:{r:(Math.random()*20)+46.5},ease:Quint.easeOut});
TweenMax.to("#monocle", .3, {delay:.2,attr:{r:46.5},ease:Quint.easeOut});
TweenMax.to("#beadyEye1", .3, {scale:Math.random()*.7,transformOrigin:"50% 50%", ease:Quint.easeOut});
TweenMax.to("#beadyEye1", .3, {delay:.2,scale:1,transformOrigin:"50% 50%", ease:Quint.easeOut});
TweenMax.to("#beadyEye2", .3, {scale:Math.random()*.7,transformOrigin:"50% 50%", ease:Quint.easeOut});
TweenMax.to("#beadyEye2", .3, {delay:.2,scale:1,transformOrigin:"50% 50%", ease:Quint.easeOut});
}
<svg version="1.1" id="monocleMan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<circle id="beadyEye1" cx="442.5" cy="507.5" r="20.5"/>
<circle id="beadyEye2" cx="557.5" cy="507.5" r="19.5"/>
<circle id="monocle" fill="none" stroke="#000000" stroke-width="13" stroke-miterlimit="10" cx="557.5" cy="507.5" r="46.5"/>
<path id="topHat" d="M596.7,355.4C612,238.6,647.9,166.4,647.9,151h-0.3c0-27-66.2-48.6-147.8-48.6S352.1,124,352.1,151
c0,15.1,35.9,87.5,51.2,204.3c-31.4,8.9-51.2,22.1-51.2,36.8c0,26.9,66.2,48.6,147.8,48.6s147.8-21.8,147.8-48.6
C647.6,377.4,627.9,364.3,596.7,355.4z"/>
<path id="stache1" fill="none" stroke="#000000" stroke-width="13" stroke-linecap="round" stroke-miterlimit="10" d="M663.1,622.3
c0,0-5.3,19.3-20.8,12.3c-27.2-12.3-3.2-63.7,38.9-44c31.7,14.8,26.8,74.5-14.8,86.3c-78.4,22.3-87.7-118.5-144.5-92.8
c-14,6.3-29.9,6.3-43.9,0C421.2,558.5,412,699.3,333.5,677c-41.6-11.9-46.5-71.6-14.8-86.3c42.2-19.7,66.2,31.7,38.9,44
c-15.4,7-20.8-12.3-20.8-12.3"/>
<path id="stache2" fill="none" stroke="#000000" stroke-width="13" stroke-linecap="round" stroke-miterlimit="10" d="M663.1,622.3
c0,0-5.3,19.3-20.8,12.3c-27.2-12.3-3.2-63.7,38.9-44c31.7,14.8,26.8,74.5-14.8,86.3c-78.4,22.3-87.7-106.5-144.5-80.8
c-14,6.3-29.9,6.3-43.9,0C421.2,570.5,412,699.3,333.5,677c-41.6-11.9-46.5-71.6-14.8-86.3c42.2-19.7,66.2,31.7,38.9,44
c-15.4,7-20.8-12.3-20.8-12.3"/>
</svg>
body{
margin:0px;
overflow:hidden;
}
#monocleMan{
width:100%;
height:500px;
cursor:pointer;
}