samedi 19 mai 2018
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>
