<html>
<!-- SVG код -->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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>
  <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>
  <linearGradient id="блик" spreadMethod="reflect" x1="0%" x2="37.5%">
         <stop offset="0%"  stop-color="#0aa"/>
         <stop offset="100%" stop-color="#eed"/>
  </linearGradient>

  <use  href="#штофф"/>
  
  <g id="лить"> 
    <rect x="55" y="150" rx="3" ry="3" 
          width="90" height="30" fill="#da0" stroke="#288" stroke-width="2" visibility="none" pointer-events="none";/>
    <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" visibility="visible" pointer-events="visible";/>
    <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="visibility"
           from="visible" to="none"
           begin="лить.click" dur="1s"
           repeatCount="1" 
           fill="freeze"
           restart="whenNotActive" />
  <animate id="лил" href="#пить" attributeName="visibility"
           from="none" to="visible"
           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>
html {background: 
repeating-linear-gradient(45deg, #666, #222, #666, #ea8, #666, #222, #666, #8ce, #666 2%) 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:none;
}
#тринк {box-shadow: #fff 0 0 8px 4px inset;} 
/* background: repeating-linear-gradient(45deg, transparent, #999, transparent .8%) fixed; visibility: auto;*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.