← back to SVG Draught Beercompare with ground truth →
model output
Gemini 3 Flash Preview
SVG Draught Beer
A 0.84T 0.35
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Beer Pouring Animation</title>
7 <style>
8 :root {
9 --bg-color: #f86362;
10 --beer-color: #fcd45c;
11 --mug-border: #ffffff;
12 --tap-gray: #b3b3b3;
13 --tap-white: #e6e6e6;
14 --foam-white: #ffffff;
15 --anim-speed: 4s;
16 }
17
18 body {
19 margin: 0;
20 padding: 0;
21 background-color: var(--bg-color);
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 height: 100vh;
26 overflow: hidden;
27 font-family: sans-serif;
28 }
29
30 .container {
31 position: relative;
32 width: 400px;
33 height: 400px;
34 }
35
36 /* Tap Mechanism */
37 .tap {
38 position: absolute;
39 top: 50px;
40 left: 50%;
41 transform: translateX(-50%);
42 z-index: 10;
43 }
44
45 .tap-base {
46 width: 14px;
47 height: 25px;
48 background: var(--tap-gray);
49 border-radius: 7px;
50 position: relative;
51 }
52
53 .tap-handle {
54 width: 22px;
55 height: 45px;
56 background: var(--tap-white);
57 border-radius: 6px;
58 position: absolute;
59 top: 5px;
60 left: -4px;
61 transform-origin: 50% 10%;
62 animation: pull-handle var(--anim-speed) infinite ease-in-out;
63 }
64
65 .tap-handle::after {
66 content: '';
67 position: absolute;
68 width: 6px;
69 height: 6px;
70 background: var(--tap-gray);
71 border-radius: 50%;
72 top: 5px;
73 left: 8px;
74 }
75
76 /* Beer Stream */
77 .stream {
78 position: absolute;
79 top: 135px; /* Offset from tap handle area */
80 left: 50%;
81 width: 14px;
82 height: 0;
83 background: var(--beer-color);
84 transform: translateX(-50%);
85 border-radius: 0 0 7px 7px;
86 z-index: 5;
87 animation: flow-stream var(--anim-speed) infinite ease-in-out;
88 }
89
90 /* Mug Assembly */
91 .mug-wrap {
92 position: absolute;
93 bottom: 100px;
94 left: 50%;
95 transform: translateX(-50%);
96 animation: mug-cycle var(--anim-speed) infinite ease-in-out;
97 }
98
99 .mug {
100 position: relative;
101 width: 75px;
102 height: 95px;
103 border: 6px solid var(--mug-border);
104 border-top: none;
105 border-radius: 0 0 15px 15px;
106 background: transparent;
107 overflow: hidden;
108 }
109
110 .mug-handle {
111 position: absolute;
112 right: -25px;
113 top: 30px;
114 width: 25px;
115 height: 45px;
116 border: 6px solid var(--mug-border);
117 border-left: none;
118 border-radius: 0 15px 15px 0;
119 }
120
121 /* Interior Stripes */
122 .stripes {
123 position: absolute;
124 top: 0;
125 left: 0;
126 width: 100%;
127 height: 100%;
128 display: flex;
129 justify-content: space-evenly;
130 z-index: 3;
131 pointer-events: none;
132 }
133
134 .stripe {
135 width: 8px;
136 height: 100%;
137 background: rgba(255, 255, 255, 0.3);
138 }
139
140 /* Liquid Beer */
141 .beer-liquid {
142 position: absolute;
143 bottom: 0;
144 left: 0;
145 width: 100%;
146 height: 0%;
147 background: var(--beer-color);
148 animation: fill-beer var(--anim-speed) infinite ease-in-out;
149 }
150
151 /* Foam Bubbles */
152 .foam-container {
153 position: absolute;
154 width: 100%;
155 bottom: 95px; /* Top of mug */
156 left: 0;
157 z-index: 4;
158 opacity: 0;
159 animation: foam-pop var(--anim-speed) infinite ease-in-out;
160 }
161
162 .bubble {
163 position: absolute;
164 background: var(--foam-white);
165 border-radius: 50%;
166 }
167
168 .bubble-1 { width: 35px; height: 35px; left: -5px; bottom: 0; }
169 .bubble-2 { width: 45px; height: 45px; left: 15px; bottom: 5px; }
170 .bubble-3 { width: 30px; height: 30px; left: 50px; bottom: 0; }
171
172 /* Keyframes */
173
174 @keyframes pull-handle {
175 0%, 10%, 65%, 100% { transform: translateX(-50%) rotate(0deg); }
176 15%, 55% { transform: translateX(-50%) rotate(-25deg); }
177 }
178
179 @keyframes flow-stream {
180 0%, 12% { height: 0; top: 85px; }
181 18% { height: 160px; top: 85px; }
182 55% { height: 160px; top: 85px; }
183 62%, 100% { height: 0; top: 245px; }
184 }
185
186 @keyframes fill-beer {
187 0%, 15% { height: 0%; }
188 45%, 75% { height: 85%; }
189 100% { height: 85%; }
190 }
191
192 @keyframes foam-pop {
193 0%, 40% { opacity: 0; transform: scale(0.5) translateY(10px); }
194 50%, 75% { opacity: 1; transform: scale(1) translateY(0); }
195 80%, 100% { opacity: 0; }
196 }
197
198 @keyframes mug-cycle {
199 0% { transform: translateX(-50%); }
200 /* Stay centered for pour */
201 75% { transform: translateX(-50%); opacity: 1; }
202 /* Slide out left */
203 85% { transform: translateX(-350px); opacity: 0; }
204 86% { transform: translateX(350px); opacity: 0; }
205 /* Slide in from right */
206 100% { transform: translateX(-50%); opacity: 1; }
207 }
208
209 </style>
210</head>
211<body>
212
213 <div class="container">
214 <!-- Tap Spout & Handle -->
215 <div class="tap">
216 <div class="tap-base"></div>
217 <div class="tap-handle"></div>
218 </div>
219
220 <!-- Falling Stream -->
221 <div class="stream"></div>
222
223 <!-- Mug Wrapper -->
224 <div class="mug-wrap">
225 <div class="foam-container">
226 <div class="bubble bubble-1"></div>
227 <div class="bubble bubble-2"></div>
228 <div class="bubble bubble-3"></div>
229 </div>
230 <div class="mug">
231 <div class="stripes">
232 <div class="stripe"></div>
233 <div class="stripe"></div>
234 <div class="stripe"></div>
235 </div>
236 <div class="beer-liquid"></div>
237 </div>
238 <div class="mug-handle"></div>
239 </div>
240 </div>
241
242</body>
243</html>