HTML
<html>
<!-- SVG код -->
<svg id="тринк" version = "1.1" baseProfile="full"
width="200px" height="200px"
viewBox="0 0 200 200" preserveAspectRatio="none">
<defs>
<path id="штофф" fill="url(#жижа)" stroke="#0aa" stroke-width="2"
d="M 50,190 L 25,10 L 175,10 L 150,190 L 50,190 Z" />
</defs>
<linearGradient id="блик" spreadMethod="reflect" x1="0%" x2="37.5%">
<stop offset="0%" stop-color="#0aa"/>
<stop offset="100%" stop-color="#eed"/>
</linearGradient>
<pattern id="жижа" width="100%" height="100%">
<rect width="100%" height="100%" fill="url(#блик)" fill-opacity=".8"
stroke="#0aa" stroke-width="2"/>
<line id="мера" x1="10" y1="200" x2="10" y2="200"/>
</pattern>
<use href="#штофф" />
<g id="лить">
<rect x="55" y="150" rx="3" ry="3"
width="90" height="30" fill="#da0" stroke="#288" stroke-width="2"/>
<text font-size="16" font-weight="bold" font-family="Arial">
<tspan id="" x="75" y="170" fill="#000">-Лей!-</tspan><!-- -->
</text>
</g>
<g id="пить" style="opacity:0;">
<rect x="55" y="30" rx="3" ry="3"
width="90" height="30" fill="#0dd" stroke="#288" stroke-width="2"/>
<text font-size="16" font-weight="bold" font-family="Arial"><!-- -->
<tspan id="" x="75" y="50" fill="#000">-Пей!-</tspan>
</text>
</g> <!-- xlink: -->
<animate id="лей" href="#мера" attributeName="y2"
from="200" to="10"
begin="лить.click" dur="1s"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
<animate id="лью" href="#лить" attributeName="opacity"
from="1" to="0"
begin="лить.click" dur="1s"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
<animate id="лил" href="#пить" attributeName="opacity"
from="0" to="1"
begin="лей.end" dur="1s"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
<animate id="пей" href="#мера" attributeName="y2"
from="10" to="200"
begin="пить.click" dur="2s"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
<animate id="пью" href="#пить" attributeName="opacity"
from="1" to="0"
begin="пить.click" dur="1s"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
<animate id="пил" href="#лить" attributeName="opacity"
from="0" to="1"
begin="пей.end" dur="1s"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
</svg>
<svg width="200px" height="200px" ><use href="#штофф"/></svg>
<svg width="200px" height="200px" ><use href="#штофф"/></svg>
</html>
CSS
html {background:
repeating-linear-gradient(45deg, #666, #222, #666, #ea8, #666, #222, #666, #8ce, #666 4%) fixed; }
body {max-width: 100%; padding: 10px; text-align: center;}
#лить, #пить {cursor: pointer;}
#жижа {stroke:#f4a; stroke-width:200%;
stroke-linecap: butt; stroke-opacity:.8;
cursor: pointer; pointer-events:visibleStroke;
}
#тринк {box-shadow: #fff 0 0 8px 4px inset;}
/* background: repeating-linear-gradient(45deg, transparent, #999, transparent .8%) fixed;*/
