animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

SVG Beer!

1<div class="container">
2  <svg version="1.1" width="600px" height="600px">
3    <defs>
4      <mask id="liquidMask" x="0" y="-50" width="121" height="189">
5        <path fill="rgba(255,255,255,0.85)" d="M354.6,371.5h-82.2c-2.2,0-4-1.8-4-4l-15.8-180.9c0-2.2,1.8-4,4-4h113c2.2,0,4,1.8,4,4	l-15,180.9C358.6,369.8,356.8,371.5,354.6,371.5z" />
6      </mask>
7
8    </defs>
9    <svg class="glassSVG" x="-400" y="0">
10      <path class="glass" opacity="0.08" fill="#FFFFFF" d="M363.9,383.1H260.5c-3.6,0-6.6-3-6.6-6.6l-15.2-188.1
11	c0-3.6,3-6.6,6.6-6.6h135.5c3.6,0,6.6,3,6.6,6.6l-17,188.1C370.5,380.1,367.5,383.1,363.9,383.1z" />
12
13      <polygon class="reflection" opacity="0.2" fill="#FFFFFF" points="298.9,383.1 270,383.1 251,181.8 279.9,181.8 " />
14
15      <g class="liquidGroup" mask="url(#liquidMask)" x="0" y="0">
16        <g class="beerHeadGroup">
17          <rect class="beer" x="178.3" y="272.3" fill="#FFB241" width="294" height="164.7" />
18          <rect class="head" x="178.3" y="245" fill="#FFEBD3" width="294" height="29.3" />
19        </g>
20      </g>
21      <circle class="splash" cx="268" cy="260" r="6" fill="#E5D1C4" />
22
23    </svg>
24  </svg>
25
26</div>