<!-- instructions -->
<div id="instructions">
  <p>Click My Nose to Make me Sneeze!</p>
</div>

<!-- untouched svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 400" enable-background="new 0 0 600 400" xml:space="preserve">
   
    <circle id="head" cx="300" cy="191" r="124.3"/>
  
    <path id="mouth" d="M258.3,235c2.6,20.7,20.3,36.7,41.7,36.7c21.4,0,39-16,41.7-36.7L258.3,235L258.3,235z"/>
  
    <g id="eyes">
        <path d="M344.9,216.4
          c0-10.9,5.1-19.7,11.5-19.7s11.5,8.8,11.5,19.7"/>
        <path d="M232,216.4
          c0-10.9,5.1-19.7,11.5-19.7c6.3,0,11.5,8.8,11.5,19.7"/>
    </g>
  
    <g id="teeth">
        <path d="M269.2,235c0.7,7.6,1.6,12.2,2.6,12.2c1,0,1.9-4.6,2.6-12.2H269.2z"/>
        <path d="M325.6,235c0.7,7.6,1.6,12.2,2.6,12.2c1,0,1.9-4.6,2.6-12.2H325.6z"/>
    </g>
  
    <path id="nose" d="M300.3,194c-10,0-19.1,2.4-26.1,6.3c0.6,2.7,1.4,5.2,2.3,7.5c15.9-0.5,15.9,6.7,6.2,10.6
        c8.2,9.6,27.8,11.4,35.5,1.4c-11.3-6.3-5.6-11.3,5.2-10.2c0.9-2.8,1.7-6,2.3-9.6C318.9,196.3,310,194,300.3,194z"/>
</svg>

<!-- aditional svg -->
<svg height="100" width="100">
  <circle id="sneeze-mouth" cx="300" cy="255" r="15"/>
</svg>

<!-- sneeze sound -->
<audio id="sound" src="http://soundbible.com/mp3/Baby%20Sneeze-SoundBible.com-998128538.mp3"></audio>
body {
  background: #30292c;
}

#head {
  fill: #c1b2a3;
}

#nose {
  fill: #60432e;
}

#mouth {
  fill: #d14d37;
}

#teeth path {
  fill: #fff;
}

#eyes path {
  fill: none;
  stroke: #1b426d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-opacity: 0.7;
}

#instructions {
  text-align: center;
  color: #B89EA9;
  font-size:1.5em;
  font-family: Helvetica, Arial, sans;
}
var sneezeDelay = 0.4;
var soundEffect = document.getElementById('sound');
var tl = new TimelineMax().pause();

tl.add(TweenMax.to($('#mouth'), 0.1, {scale:1.1, transformOrigin:"50% 50%"}), 0);

tl.add(TweenMax.to($('#teeth'), 0.1, {scale:1.1, transformOrigin:"50% 100%"}), 0);

tl.add(TweenMax.to($('#nose'), 0.1, {scaleX:0.9, scaleY: 0.97, transformOrigin:"50% 50%", yoyo:true, repeat:1}), sneezeDelay);

tl.add(TweenMax.to($("#eyes"), 0.1, {scaleY:0.5, transformOrigin:"50% 100%",yoyo:true, repeat:1}), sneezeDelay);

tl.add(TweenMax.to([$("#mouth"), $("#teeth")], 0.1, {scale:1}), sneezeDelay - 0.1);

tl.add(TweenMax.to($("#mouth"), 0.1, { morphSVG:"#sneeze-mouth", yoyo:true, repeat:1}), sneezeDelay);

tl.add(TweenMax.to($("#teeth"), 0.01, {scaleX: 1, scaleY:0, transformOrigin:"50% 50%"}), sneezeDelay);

tl.add(TweenMax.to($("#teeth"), 0.01, {scaleY:1, transformOrigin:"50% 50%"}), sneezeDelay + 0.2);

$("#nose").click(function(){
  tl.seek(0);
  tl.play();
  soundEffect.pause();
  soundEffect.currentTime = 0; 
  soundEffect.play();
  //http://soundbible.com/mp3/Baby%20Sneeze-SoundBible.com-998128538.mp3
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=10