...

<audio id="launch1">
<source src="https://retired.sounddogs.com/previews/108/mp3/926024_SOUNDDOGS__fi.mp3" type="audio/wav"></source>
</audio>
<audio id="launch2">
<source src="https://retired.sounddogs.com/previews/108/mp3/926024_SOUNDDOGS__fi.mp3" type="audio/wav"></source>
</audio>
<audio id="launch3">
<source src="https://retired.sounddogs.com/previews/108/mp3/926024_SOUNDDOGS__fi.mp3" type="audio/wav"></source>
</audio>
<audio id="launch4">
<source src="https://retired.sounddogs.com/previews/108/mp3/926024_SOUNDDOGS__fi.mp3" type="audio/wav"></source>
</audio>


<svg width="270" height="300">
<defs>
<linearGradient id="grad1" x1="1" y1="1">
<stop stop-color="lightblue" offset="0"/>
<stop stop-color="royalblue" offset="1"/>
</linearGradient>

<g transform="scale(0.05)" id="reindeer">
<path d="M822.6,656c68.7-0.4,144.7,23.8,83.4,101.8C865.7,809.1,756.6,900.6,685.6,861c-10.5-5.9-8.6-23.3,3.4-26.1c53.8-12.4,116.1-29.2,143.5-78.8C753.1,778.4,672,799.3,589.4,804c-51,2.8-121.2,4.7-168.1-25.3c-41.2,52.7-125.9,32.6-172.6,91.6c-36.1,45.5-78.8,139.9-151.1,115.8c-10.2-3.4-12.2-16.7-3-22.6c57.6-36.5,93.5-93.1,137.9-142.5c-3.9,1.5-7.7,3.4-11.4,5.9c-17,11.4-30.7,26-46,39.3c-23.9,20.6-51.4,39-83.4,43.3c-5.5,0.8-10.5-0.4-13.7-5.5c-1.9-3.2-2.4-5.8-2-8.2c-5.9-2.2-6.3-12,0.7-13.9c50.3-13.6,69-56.2,109.6-84.1c28.6-19.5,66.6-33.5,102.1-37.1c21.1-36.5,15.6-79.4,38.7-116.8c-50.8,1.6-70.4-64.2-44.3-106.7c6.2-10.1,24.5-6.7,23.5,6.5c-2.3,32.2,21.8,44.9,48.7,51.8c42.6-14.8,84.3-10.5,130.6-2.3c65.8,11.7,188.2,9.9,183.2-87.3c-1.3-25.8-20-82.5-22.9-128.9c-1.5-0.1-3.1-0.7-4.6-1.6c-1.2-0.8-2.4-1.9-3.8-2.7c-10.8,0.3-20.6-2.3-30-10.1c-12.9-10.9-23.3-24.6-39.3-31.2c-10.8-4.4-12.9-20.4,0-23.9c18.3-5.1,37.4-7.9,55.8-2.7c-19.9-15.5-39-32-56.9-49.8c-23.3,16.5-58,23.8-79.9,1.8c-7.5-7.5,1.9-19.2,11-14.4c17.1,9.1,36.2,4.8,51.2-5.8c-6.1-6.9-12.1-13.7-17.6-21c-5.4-6.9-10.9-14.3-16.3-21.9c-26.1,2.3-49.4-12.1-59.6-37.9c-3.6-9.3,9.9-13.2,14.9-6.3c7.5,10.5,18.2,18.4,29.9,20.6c-13.2-24.2-21.3-50.6-14.1-77.1c2.3-8.1,15.6-9,17.2,0c4.4,25.6,13.4,48.6,25.3,69.7c16.8-12.5,15.3-28.9,22.2-48c3-8.3,16.7-12.9,21.3-2.8c11.6,26.2-5.8,58-29.7,72.9c7.7,11.2,16.1,21.8,25.2,32.1c4.3-6.5,7.7-13.3,9-21c2-10.8-1.6-21.5,1.8-31.7c2.5-7.9,12.2-10.9,18.4-5c20.9,20.3,6.7,54.7-11,77.3c23.7,24.8,49.6,48,74.3,72.1c-19.5-25.7-24.6-55-24.4-85.7c-23.9-7.3-34.2-31.7-21.5-62.2c2.6-6.3,12.9-6.2,12.8,1.7c-0.3,10.2-1.7,30.5,9.8,35.8c1.6-21.3,4.7-42.9,6.2-64.4c-30-3.4-46.7-27.2-49.6-56.5c-0.9-10.4,15.3-12.1,17.9-2.4c4.2,15.2,14.9,34.6,32.8,34.2c0-30-4.8-59-22.3-85.6c-4.8-7.3,4.8-17.4,12.2-12.2c28,20,38.2,49.9,39.5,82.1c5.7-7.4,9-16.4,18-20.3c6.2-2.7,12.8-0.7,14.9,6.1c6.5,19.9-13.6,39.7-34.6,49.4c-2.8,23.4-6.3,46-7.9,67.8c3.2-1.2,6.3-2.5,9.3-4c31.2-16.3,43.7-39.4,62.3-67.1c6.7-10,22.1-6.2,22.5,6c1.7,43.2-55.6,86.5-94.3,93c-0.1,0-0.4,0-0.7,0.1c0.5,27.4,5.9,53.9,21.9,79.9c21.7-6.3,46.5-4.7,68.2-7c32-3.4,69.2-12.6,97.5,6.9c49.4,34-28.2,96.1-63.2,115.6c5.1,51.8,22.7,98.2,33.8,151.3C828,600.9,831.4,629.9,822.6,656"/>
</g>

<path id="sapin" fill="green" d="M 26,1 C 26,1 40,22 40,22 40,22 34,22 34,22 34,22 45,37 45,37 45,37 40,37 40,37 40,37 50,53 50,53 50,53 29,53 29,53 29,53 29,60 29,60 29,60 21,60 21,60 21,60 21,53 21,53 21,53 1,53 1,53 1,53 10,37 10,37 10,37 5,37 5,37 5,37 15,22 15,22 15,22 10,22 10,22 10,22 24,1 24,1 24,1 26,1 26,1 Z"/>

<path id="spark" d="M 35,0 C 35,0 30,20 30,30 30,30 25,0 25,0 25,0 35,0 35,0 Z" fill="gold">
<animate attributename="fill" begin="0s" dur="10ms" repeatcount="indefinite" values="gold;red;white;gold"/>
</path>

<g id="boom">
<use xlink:href="#spark" id="sparkmove" opacity="0">
<animate attributename="opacity" begin="op1.end" values="1" dur="1ms" fill="freeze" />
<animate attributename="y" begin="op1.end" values="0;-50" dur="0.2s" id="movs"/>
<animate attributename="opacity" begin="movs.end" values="0" dur="1ms" fill="freeze" />
</use>

<use xlink:href="#sparkmove" transform="rotate(45 30 30)"/>
<use xlink:href="#sparkmove" transform="rotate(90 30 30)"/>
<use xlink:href="#sparkmove" transform="rotate(135 30 30)"/>
<use xlink:href="#sparkmove" transform="rotate(180 30 30)"/>
<use xlink:href="#sparkmove" transform="rotate(225 30 30)"/>
<use xlink:href="#sparkmove" transform="rotate(270 30 30)"/>
<use xlink:href="#sparkmove" transform="rotate(315 30 30)"/>
</g>

<g id="boom2">
<use xlink:href="#spark" id="sparkmove2" opacity="0">
<animate attributename="opacity" begin="op2.end" values="1" dur="1ms" fill="freeze" />
<animate attributename="y" begin="op2.end" values="0;-50" dur="0.2s" id="movs2"/>
<animate attributename="opacity" begin="movs2.end" values="0" dur="1ms" fill="freeze" />
</use>

<use xlink:href="#sparkmove2" transform="rotate(45 30 30)"/>
<use xlink:href="#sparkmove2" transform="rotate(90 30 30)"/>
<use xlink:href="#sparkmove2" transform="rotate(135 30 30)"/>
<use xlink:href="#sparkmove2" transform="rotate(180 30 30)"/>
<use xlink:href="#sparkmove2" transform="rotate(225 30 30)"/>
<use xlink:href="#sparkmove2" transform="rotate(270 30 30)"/>
<use xlink:href="#sparkmove2" transform="rotate(315 30 30)"/>
</g>

<g id="boom3">
<use xlink:href="#spark" id="sparkmove3" opacity="0">
<animate attributename="opacity" begin="op3.end" values="1" dur="1ms" fill="freeze" />
<animate attributename="y" begin="op3.end" values="0;-50" dur="0.2s" id="movs3"/>
<animate attributename="opacity" begin="movs3.end" values="0" dur="1ms" fill="freeze" />
</use>

<use xlink:href="#sparkmove3" transform="rotate(45 30 30)"/>
<use xlink:href="#sparkmove3" transform="rotate(90 30 30)"/>
<use xlink:href="#sparkmove3" transform="rotate(135 30 30)"/>
<use xlink:href="#sparkmove3" transform="rotate(180 30 30)"/>
<use xlink:href="#sparkmove3" transform="rotate(225 30 30)"/>
<use xlink:href="#sparkmove3" transform="rotate(270 30 30)"/>
<use xlink:href="#sparkmove3" transform="rotate(315 30 30)"/>
</g>

<g id="boom4">
<use xlink:href="#spark" id="sparkmove4" opacity="0">
<animate attributename="opacity" begin="op4.end" values="1" dur="1ms" fill="freeze" />
<animate attributename="y" begin="op4.end" values="0;-50" dur="0.2s" id="movs4"/>
<animate attributename="opacity" begin="movs4.end" values="0" dur="1ms" fill="freeze" />
</use>

<use xlink:href="#sparkmove4" transform="rotate(45 30 30)"/>
<use xlink:href="#sparkmove4" transform="rotate(90 30 30)"/>
<use xlink:href="#sparkmove4" transform="rotate(135 30 30)"/>
<use xlink:href="#sparkmove4" transform="rotate(180 30 30)"/>
<use xlink:href="#sparkmove4" transform="rotate(225 30 30)"/>
<use xlink:href="#sparkmove4" transform="rotate(270 30 30)"/>
<use xlink:href="#sparkmove4" transform="rotate(315 30 30)"/>
</g>

</defs>

<rect fill="url(#grad1)" x="0" y="0" width="270" height="260"/>

<use xlink:href="#sapin" transform="translate(20,200)" id="sapin1">
<animate attributename="x" begin="sapin1.mousedown" dur="0.1s" repeatcount="4" values="-2;2;-2" id="tremble1"/>
<animate attributename="y" begin="tremble1.end" dur="2s" repeatcount="1" values="0;-200" id="up1" fill="freeze"/>
<animate attributename="opacity" begin="up1.end" dur="1ms" values="0" id="op1" fill="freeze"/>
</use>

<use xlink:href="#sapin" transform="translate(80,200)" id="sapin2">
<animate attributename="x" begin="sapin2.mousedown" dur="0.1s" repeatcount="4" values="-2;2;-2" id="tremble2"/>
<animate attributename="y" begin="tremble2.end" dur="2s" repeatcount="1" values="0;-200" id="up2" fill="freeze"/>
<animate attributename="opacity" begin="up2.end" dur="1ms" values="0" id="op2" fill="freeze"/>
</use>

<use xlink:href="#sapin" transform="translate(140,200)" id="sapin3">
<animate attributename="x" begin="sapin3.mousedown" dur="0.1s" repeatcount="4" values="-2;2;-2" id="tremble3"/>
<animate attributename="y" begin="tremble3.end" dur="2s" repeatcount="1" values="0;-200" id="up3" fill="freeze"/>
<animate attributename="opacity" begin="up3.end" dur="1ms" values="0" id="op3" fill="freeze"/>
</use>

<use xlink:href="#sapin" transform="translate(200,200)" id="sapin4">
<animate attributename="x" begin="sapin4.mousedown" dur="0.1s" repeatcount="4" values="-2;2;-2" id="tremble4"/>
<animate attributename="y" begin="tremble4.end" dur="2s" repeatcount="1" values="0;-200" id="up4" fill="freeze"/>
<animate attributename="opacity" begin="up4.end" dur="1ms" values="0" id="op4" fill="freeze"/>
</use>

<use xlink:href="#boom" transform="translate(15 00)"/> 
<use xlink:href="#boom2" transform="translate(75 00)"/>
<use xlink:href="#boom3" transform="translate(135 00)"/>
<use xlink:href="#boom4" transform="translate(195 00)"/>

<text font-family="Fantasy" font-size="40" id="n" y="45" x="30" stroke-width="0" fill="#FFFFFF" opacity="0">N
<animate attributename="opacity" begin="up1.end" dur="1s" values="0;1" id="nop" fill="freeze"/>
</text>

<text font-family="Fantasy" font-size="40" id="o" y="45" x="90" stroke-width="0" fill="#FFFFFF" opacity="0">O
<animate attributename="opacity" begin="up2.end" dur="1s" values="0;1" id="oop" fill="freeze"/>
</text>

<text font-family="Fantasy" font-size="40" id="e" y="45" x="150" stroke-width="0" fill="#FFFFFF" opacity="0">E
<animate attributename="opacity" begin="up3.end" dur="1s" values="0;1" id="eop" fill="freeze"/>
</text>

<text font-family="Fantasy" font-size="40" id="l" y="45" x="210" stroke-width="0" fill="#FFFFFF" opacity="0">L
<animate attributename="opacity" begin="up4.end" dur="1s" values="0;1" id="lop" fill="freeze"/>
</text>
<g>
<g>
<g>
<g>
<g id="present" transform="translate(120,350)">
<rect fill="red" x="3.5"y="7.3" width="21.8" height="21.7"/>
<polygon style="fill:orange;" points="9.947,21.163 8.828,19.345 6.464,19.769 9.574,14.253 3.508,14.253 3.508,28.761 13.844,28.761 13.844,14.253"/>
<path style="fill:orange;" d="M26.959,7.33h-6.863c0.4-0.207,0.76-0.422,1.077-0.652c1.221-0.874,1.868-1.981,1.866-3.081 c0-0.902-0.427-2.194-1.048-2.733C21.37,0.32,20.547,0,19.667,0c-0.939,0-1.813,0.322-2.561,0.824 C15.981,1.577,15.1,3.209,14.47,4.453c-0.031,0.062-0.063,0.123-0.093,0.184c-0.229-0.48-0.498-1.441-0.803-1.88 c-0.532-0.76-1.172-1.433-1.923-1.933C10.905,0.322,10.033,0,9.094,0C8.158,0.002,7.302,0.394,6.661,0.999 c-0.639,0.6-1.085,1.948-1.089,2.912c-0.003,0.562,0.161,1.15,0.499,1.686c0.426,0.67,1.101,1.255,2.032,1.733H1.785L1.8,13.1 h11.863V7.33h1.446v5.77h11.866L26.959,7.33z M8.514,5.526C8.037,5.225,7.745,4.922,7.573,4.651 C7.405,4.382,7.347,3.91,7.347,3.677C7.343,3.288,7.536,2.608,7.881,2.289c0.336-0.321,0.791-0.518,1.202-0.518h0.011 c0.527,0.003,1.051,0.181,1.576,0.527c0.783,0.517,1.522,1.922,2.035,2.952c0.268,0.523,0.473,1.072,0.61,1.608 C10.939,6.612,9.404,6.088,8.514,5.526z M16.635,4.271c0.428-0.613,0.934-1.625,1.456-1.974c0.521-0.346,1.049-0.523,1.575-0.527 h0.006c0.439,0,0.861,0.172,1.149,0.427c0.29,0.259,0.442,0.733,0.442,1.066c-0.005,0.394-0.209,1.302-1.13,1.975 c-0.874,0.636-2.39,1.288-4.722,1.745C15.635,6.059,16.065,5.081,16.635,4.271z"/>
<polygon style="fill:orange;" points="22.31,19.746 19.948,19.345 18.831,21.185 14.984,14.346 14.984,28.761 25.267,28.761 25.267,14.253 19.203,14.253"/>
</g>
<animateMotion from="0,0" to="0,-30" begin="sapin1.mousedown" dur="4s" fill="freeze"></animateMotion>
</g>
<animateMotion from="0,0" to="0,-30" begin="sapin2.mousedown" dur="4s" fill="freeze"></animateMotion>
</g>
<animateMotion from="0,0" to="0,-30" begin="sapin3.mousedown" dur="4s" fill="freeze"></animateMotion>
</g>
<animateMotion from="0,0" to="0,-30" begin="sapin4.mousedown" dur="4s" fill="freeze"></animateMotion>
</g>
<rect fill="white" x="0" y="260" width="270" height="40"/>

<g transform="translate(-150,0)">
<g>
<use xlink:href="#reindeer">
<animateMotion values="0,0;0,10;0,0" repeatcount="indefinite" begin="0s" dur="4s"/>
</use>
<use xlink:href="#reindeer" transform="translate(50,0)">
<animateMotion values="0,0;0,10;0,0" repeatcount="indefinite" begin="1s" dur="4s"/>
</use>
<use xlink:href="#reindeer" transform="translate(100,0)">
<animateMotion values="0,0;0,10;0,0" repeatcount="indefinite" begin="2s" dur="4s"/>
</use>
<line stroke-width="2" stroke="black" x1="140" y1="25" x2="90" y2="25">
<animate attributename="y1" values="25;35;25" repeatcount="indefinite" begin="2s" dur="4s"/>
<animate attributename="y2" values="25;35;25" repeatcount="indefinite" begin="1s" dur="4s"/>
</line>
<line stroke-width="2" stroke="black" x1="90" y1="25" x2="40" y2="25">
<animate attributename="y1" values="25;35;25" repeatcount="indefinite" begin="1s" dur="4s"/>
<animate attributename="y2" values="25;35;25" repeatcount="indefinite" begin="0s" dur="4s"/>
</line>
<line stroke-width="2" stroke="black" x1="40" y1="25" x2="-25" y2="30">
<animate attributename="y1" values="25;35;25" repeatcount="indefinite" begin="0s" dur="4s"/>
</line>
<g transform="scale(0.14)">
<g transform="translate(-600,-100)">
<path d="m94.045 231.41s12.537-0.73458 31.113 4.2426c11.057 2.9626 22.451 13.789 24.749 31.643 1.5583 12.107-2.285 59.951-3.5355 91.747-0.75042 19.08 3.9084 30.923 9.0156 39.421 5.8336 7.6014 11.999 15.984 22.981 21.213 38.776 0.70193 235.82 0.17678 235.82 0.17678s4.9625 0.9012 15.556-6.8943c9.3692-6.8943 12.198-26.693 8.8388-39.598-2.4744-9.5067-13.678-54.246-13.965-60.281-0.35356-7.4246-0.36476-12.38 3.182-18.915 3.5071-6.4616 5.3033-8.3085 8.4853-13.612-6.4524-1.6794-13.789-4.0659-20.506-3.182-12.102 1.5924-21.39 6.8059-27.577 13.435-6.473 6.9354-18.827 37.742-36.416 51.265-17.807 13.69-27.839 16.567-56.038 13.877-17.025-1.6242-39.654-6.9245-53.829-17.589-24.662-18.556-36.681-55.066-42.868-68.324-5.7519-12.325-16.786-27.059-29.787-34.56-14.716-8.4902-23.6-9.7227-41.277-9.0156-17.678 0.7071-33.941 4.9497-33.941 4.9497z"/>
<path style="stroke:#000000;stroke-linecap:round;stroke-width:14;fill:none" d="m486.05 383.26s1.7884-15.102 8.3085-20.771c4.0659-3.5355 8.8388-6.0988 17.236-6.0104 11.159 0.11747 27.721 4.1441 39.686 15.468 15.072 14.264 20.287 25.899 20.86 48.437 0.60677 23.888-7.8005 33.569-15.91 43.31-9.8616 11.846-27.289 20.833-35.886 20.506-8.6576-0.3292-409.77 0-409.77 0"/>
<path style="stroke:#000000;stroke-width:14;fill:none" d="m224.48 481.91v-59.723"/>
<path d="m378.48 481.91v-59.723" style="stroke:#000000;stroke-width:14;fill:none"/>
</g>
</g>
<animateMotion values="0,0;540,0" repeatcount="1" begin="present.mousedown" dur="12s" fill="freeze"/>
</g>
<animateMotion values="0,0;0,5;0,0" repeatcount="6" begin="0s" dur="2s" fill="freeze"/>
</g>

<rect stroke="grey" stroke-width="1" x="0" y="0" width="270" height="300" fill="none"/>
</svg>


<script type="text/javascript">
var sapin1 = document.getElementById('sapin1');
var sapin2 = document.getElementById('sapin2');
var sapin3 = document.getElementById('sapin3');
var sapin4 = document.getElementById('sapin4');

var launch1 = document.getElementById('launch1');

var onClick1 = function() {launch1.play();};
var onClick2 = function() {launch2.play();};
var onClick3 = function() {launch3.play();};
var onClick4 = function() {launch4.play();};

sapin1.addEventListener('click', onClick1, false);
sapin2.addEventListener('click', onClick2, false);
sapin3.addEventListener('click', onClick3, false);
sapin4.addEventListener('click', onClick4, false);
</script>