<svg width="500" height="500">
<defs>
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.8" />
</filter>
<mask id="smoke">
<image xlink:href="https://media.giphy.com/media/zsxNJ2R3dldbq/source.gif" width="205" height="115" x="20" y="0" opacity="1" />
</mask>
<mask id="flame">
<image xlink:href="https://slm-assets1.secondlife.com/assets/15113162/original/gif_Sanna_Little_Fire_Flame_Number_1_Alpha_Left.gif" width="70" height="104.8" x="175" y="185" opacity="1"/>
</mask>
<mask id="spider">
<image xlink:href="http://orig14.deviantart.net/fe1a/f/2017/146/e/3/spider_by_fabriciog-dbajwnn.gif" width="128.4" height="93.4" x="0" y="0" />
</mask>
</defs>
<image xlink:href="http://cache.lovethispic.com/uploaded_images/284526-Skull-Skeleton-Collection.jpg" width="500" height="500" x="0" y="0"/>
<g id="both-e" opacity="0">
<g id="left_e">
<circle cx="92" cy="189" r="4" fill="black" filter="url(#blurMe)" opacity="0.8"/>
<circle cx="92" cy="189" r="1" fill="yellow">
<animate attributename="cx" values="90;94;90" begin="0s" dur="6s" repeatcount="indefinite"/>
</circle>
</g>
<g id="right_e">
<circle cx="104" cy="189" r="4" fill="black" filter="url(#blurMe)" opacity="0.8"/>
<circle cx="104" cy="189" r="1" fill="yellow">
<animate attributename="cx" values="102;106;102" begin="0s" dur="6s" repeatcount="indefinite"/>
</circle>
</g>
<animate attributename="opacity" values="0;1;0" begin="button1.mousedown" dur="12s" repeatcount="1" fill="freeze"/>
</g>
<g id="jaw">
<path id="teeth" fill="#dcbd8b" d="m367 290l2 1l0 3l2 0l0 -2l2 0l0 3l2 0l0 -2l2 0l0 3l2 0l0 -3l2 0l 0 1.5l2 0l5 -11l2 -2l-6 16l-3 2l-12 -2l -2 -2z">
<animatetransform attributename="transform" attributetype="xml" dur="0.3s" repeatcount="10" begin="button2.mousedown" type="translate" values="0 -2; 0 5;0 -2"/>
</path>
<image xlink:href="https://media.giphy.com/media/zsxNJ2R3dldbq/source.gif" width="205" height="115" x="20" y="0" opacity="0" transform="rotate(-90 130 95)" style="mask:url(#smoke);">
<animate attributename="opacity" values="0;1;0" begin="button1.mousedown" dur="12s" repeatcount="1" fill="freeze"/>
</image>
<image xlink:href="https://slm-assets1.secondlife.com/assets/15113162/original/gif_Sanna_Little_Fire_Flame_Number_1_Alpha_Left.gif" width="70" height="104.8" x="175" y="185" opacity="0" style="mask:url(#flame);">
<animate attributename="opacity" values="0;1;0" begin="button3.mousedown" dur="12s" repeatcount="1" fill="freeze"/>
</image>
<circle cx="331" cy="65" fill="red" r="0">
<animate attributename="r" values="0;1.5;0" begin="button4.mousedown" dur="2s" repeatcount="2" fill="freeze"/>
</circle>
<circle cx="346" cy="64" fill="red" r="0">
<animate attributename="r" values="0;1.5;0" begin="button4.mousedown" dur="2s" repeatcount="2" fill="freeze"/>
</circle>
<rect x="334" y="72" width="6" height="0" fill="firebrick">
<animate attributename="height" values="0;3;0" begin="button4.mousedown" dur="2s" repeatcount="2" fill="freeze"/>
</rect>
<rect x="334" y="72" width="1" height="0" fill="white">
<animate attributename="height" values="0;4;0" begin="button4.mousedown" dur="2s" repeatcount="2" fill="freeze"/>
</rect>
<rect x="340" y="72" width="1" height="0" fill="white">
<animate attributename="height" values="0;4;0" begin="button4.mousedown" dur="2s" repeatcount="2" fill="freeze"/>
</rect>
<g id="2eyes" opacity="0">
<image xlink:href="https://media.giphy.com/media/6o83td24yjnLW/giphy.gif" width="10" height="10" x="378" y="183">
<animateMotion path="m0 0l 0 25l42 0" begin="button5.mousedown+3" dur="4s" repeatcount="1"/>
</image>
<image xlink:href="https://media.giphy.com/media/6o83td24yjnLW/giphy.gif" width="10" height="10" x="361" y="183"/>
<animate attributename="opacity" values="0;1;0" begin="button5.mousedown" dur="9s" repeatcount="1" fill="freeze"/>
</g>
<g opacity="0">
<image xlink:href="http://orig14.deviantart.net/fe1a/f/2017/146/e/3/spider_by_fabriciog-dbajwnn.gif" width="128.4" height="93.4" x="0" y="0" style="mask:url(#spider);"/>
<image xlink:href="http://orig14.deviantart.net/fe1a/f/2017/146/e/3/spider_by_fabriciog-dbajwnn.gif" width="128.4" height="93.4" x="0" y="0" style="mask:url(#spider);"/>
<image xlink:href="http://orig14.deviantart.net/fe1a/f/2017/146/e/3/spider_by_fabriciog-dbajwnn.gif" width="128.4" height="93.4" x="0" y="0" style="mask:url(#spider);"/>
<animateMotion path="m492 400L 65 330" begin="button6.mousedown" dur="4s" repeatcount="1"/>
<animate attributename="opacity" values="1" dur="4s" begin="button6.mousedown" repeatcount="1"/>
</g>
<image xlink:href="http://www.carlswebgraphics.com/halloween/skeleton-sn-walk-1-w.gif" width="61" height="110" x="-30.5" y="-55" transform="translate(102 85)" opacity="0">
<animatetransform attributename="transform" type="scale" begin="button7.mousedown" dur="6s" values="0;2" additive="sum" repeatcount="1"/>
<animate attributename="opacity" values="1;0" dur="6s" begin="button7.mousedown" repeatcount="1"/>
</image>
<circle cx="98" cy="195" r="25" fill="white" opacity="0" id="button1"/>
<circle cx="378" cy="265" r="25" fill="white" opacity="0" id="button2"/>
<circle cx="210" cy="280" r="20" fill="white" opacity="0" id="button3"/>
<ellipse cx="310" cy="70" rx="45" ry="30" fill="white" opacity="0" id="button4"/>
<circle cx="380" cy="200" r="25" fill="white" opacity="0" id="button5"/>
<circle cx="385" cy="355" r="20" fill="white" opacity="0" id="button6"/>
<rect x="79" y="40" width="45" height="100" fill="white" opacity="0" id="button7"/>
</svg>
