tea hour

<audio id="audio">
    <source src="http://bbcsfx.acropolis.org.uk/assets/07067039.wav" type="audio/wav"></source>
</audio>

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <defs>
  <filter id="svgblur">
   <feGaussianBlur stdDeviation="2" in="SourceGraphic"/>
  </filter>
 </defs>
<g>
<path   fill="black"
        d="M 205.00,113.00
           C 205.00,113.00 201.00,122.00 201.00,122.00
             212.04,123.74 212.16,128.86 217.58,132.15
             219.54,133.34 222.59,133.28 225.00,133.93
             228.72,134.94 229.83,136.07 233.00,137.62
             236.86,139.49 242.07,138.82 242.85,144.05
             243.64,149.34 240.58,152.64 238.37,157.00
             235.15,163.35 233.09,168.82 233.00,176.00
             232.84,189.64 235.47,193.14 244.99,203.00
             246.79,204.86 251.06,210.72 253.83,209.80
             256.93,208.78 259.42,200.01 260.26,197.00
             263.62,184.94 266.89,174.82 275.30,165.00
             278.81,160.90 284.47,155.55 290.00,154.62
             295.64,153.67 299.53,155.11 300.00,161.00
             294.56,162.41 292.95,163.97 289.04,168.00
             279.66,177.70 276.98,187.88 277.00,201.00
             277.00,201.00 278.00,217.00 278.00,217.00
             278.07,231.83 277.02,246.48 262.99,255.44
             257.08,259.21 252.59,258.37 249.00,259.85
             249.00,259.85 236.05,268.24 236.05,268.24
             229.63,272.80 231.92,276.65 228.44,280.59
             227.22,281.96 225.52,282.79 224.00,283.75
             213.98,290.07 217.70,286.86 208.00,288.21
             203.75,288.80 203.74,289.83 198.00,289.98
             189.44,290.22 190.83,289.02 185.00,288.21
             181.93,287.78 177.83,288.37 175.09,287.26
             172.75,286.32 171.03,284.24 168.93,282.82
             168.93,282.82 164.75,280.19 164.75,280.19
             161.47,276.66 166.26,273.44 160.85,269.24
             160.85,269.24 151.00,263.40 151.00,263.40
             140.67,256.45 131.68,246.20 132.56,233.00
             132.72,229.70 133.35,227.46 132.56,224.00
             131.10,216.93 119.69,201.04 115.45,194.00
             106.23,178.72 105.31,175.48 103.00,158.00
             103.00,158.00 100.00,156.00 100.00,156.00
             100.00,156.00 103.00,157.00 103.00,157.00
             103.28,150.82 104.15,144.17 107.80,139.00
             111.89,133.21 115.94,132.95 118.00,126.00
             123.84,126.33 123.78,126.96 129.00,128.94
             143.46,134.42 141.65,135.42 152.00,146.00
             152.54,144.06 153.12,141.00 154.58,139.60
             156.57,137.69 159.32,138.28 162.00,137.49
             162.00,137.49 170.00,133.69 170.00,133.69
             172.31,132.90 174.65,133.04 176.83,131.83
             181.84,129.04 182.92,123.17 194.00,122.00
             194.00,122.00 190.00,113.00 190.00,113.00
             199.89,110.21 194.42,108.36 205.00,113.00 Z
           M 110.00,161.00
           C 110.14,173.01 116.68,187.48 123.76,197.00
             126.95,201.29 135.05,210.68 141.00,209.63
             144.31,209.05 147.69,205.38 149.91,203.00
             151.78,201.00 155.63,196.47 156.64,194.00
             157.56,191.41 156.63,188.69 156.64,186.00
             156.96,175.97 155.17,166.42 149.04,158.07
             144.85,152.37 141.23,156.95 138.90,153.59
             137.24,151.05 140.15,148.33 138.90,145.01
             136.31,138.54 126.22,135.54 120.00,136.43
             109.38,140.65 109.89,151.43 110.00,161.00 Z" />
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;70 200 200; 0 200 200" begin="pour.mousedown" dur="12s" fill="freeze"/>
</g>
<g opacity="0">
<line x1="295" y1="156" x2="295" y2="400" stroke="peru"  stroke-width="4" stroke-dasharray="10">
<animate attributename="x2" begin="pour.mousedown" dur="11s" values="295;700;395" fill="freeze"/>
<animate attributename="stroke-dashoffset" begin="pour.mousedown" dur="0.25s" values="0;-20" repeatcount="48"/>
</line>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;70 200 200; 0 200 200" begin="pour.mousedown" dur="12s" fill="freeze"/>
<animate attributename="opacity" begin="pour.mousedown" dur="10s" values="0;0.9;1;0.9;0" fill="freeze"/>
</g>
  <path id="cup"
        fill="black"
        d="M 358.00,470.89
           C 354.49,470.26 353.09,468.61 349.83,469.51
             340.65,472.05 342.10,480.26 335.79,485.35
             329.63,490.33 314.88,489.01 307.00,489.00
             292.87,488.98 290.16,482.33 285.43,470.00
             279.79,455.28 278.96,443.35 277.91,428.00
             277.91,428.00 277.00,417.00 277.00,417.00
             276.98,412.96 275.16,403.44 278.43,401.17
             280.47,399.76 284.56,400.00 287.00,400.00
             287.00,400.00 337.00,400.00 337.00,400.00
             340.45,400.04 350.00,400.35 351.98,403.31
             353.01,404.86 352.96,407.21 353.00,409.00
             353.00,409.00 353.00,416.00 353.00,416.00
             357.04,412.07 353.57,407.28 358.23,405.15
             361.40,403.70 366.87,408.14 370.00,409.47
             370.00,409.47 398.00,415.68 398.00,415.68
             398.00,415.68 414.00,417.17 414.00,417.17
             414.00,417.17 440.00,425.82 440.00,425.82
             440.00,425.82 468.00,447.53 468.00,447.53
             472.25,450.73 487.03,461.21 488.98,465.01
             490.19,467.38 489.99,470.40 490.00,473.00
             490.00,473.00 490.00,491.00 490.00,491.00
             490.00,491.00 449.00,491.00 449.00,491.00
             434.27,490.98 436.99,485.39 426.00,485.81
             416.15,486.18 405.83,484.82 396.00,483.83
             396.00,483.83 384.96,482.23 384.96,482.23
             376.49,481.43 366.92,482.39 366.00,470.89
             366.00,470.89 358.00,470.89 358.00,470.89 Z
           M 349.00,453.00
           C 349.00,453.00 350.00,458.00 350.00,458.00
             350.00,458.00 353.00,453.00 353.00,453.00
             353.00,453.00 349.00,453.00 349.00,453.00 Z
           M 348.00,458.00
           C 348.00,458.00 349.00,459.00 349.00,459.00
             349.00,459.00 349.00,458.00 349.00,458.00
             349.00,458.00 348.00,458.00 348.00,458.00 Z" >
<animatemotion values="0,0;-40,-50;-10,0" fill="freeze" dur="10s" id="0" begin="pour.mousedown"/>
</path>
<rect width="400" height="400" opacity="0" id="pour" stroke="black"/>
<rect width="400" height="400" fill="none" id="pour" stroke="black"/>
</svg>

<script type="text/javascript">
var button = document.getElementById('pour');
var audio = document.getElementById('audio');

var onClick = function() {
    audio.play();
};

button.addEventListener('click', onClick, false);
</script>