← back to SVG Draught Beercompare with ground truth →
model output
GPT-5.4
SVG Draught Beer
A 0.89T 0.22
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" />
6<title>Beer Tap Loop</title>
7<style>
8 :root{
9 --bg:#fb5f63;
10 --beer:#f8c54f;
11 --beer2:#ffc92f;
12 --foam:#fff;
13 --glass:#f7838d;
14 --glass-hi:#ffb0b8;
15 --glass-shadow:#f06f79;
16 --metal:#c9c9c9;
17 --white:#f8f8f8;
18 --cycle:4.8s;
19 }
20
21 html,body{
22 margin:0;
23 width:100%;
24 height:100%;
25 overflow:hidden;
26 background:var(--bg);
27 font-family:sans-serif;
28 }
29
30 .scene{
31 position:relative;
32 width:100vw;
33 height:100vh;
34 background:var(--bg);
35 overflow:hidden;
36 }
37
38 .tap{
39 position:absolute;
40 left:50%;
41 top:14%;
42 width:42px;
43 height:88px;
44 transform:translateX(-50%);
45 z-index:5;
46 }
47 .tap .head{
48 position:absolute;
49 left:0;
50 bottom:0;
51 width:42px;
52 height:72px;
53 background:linear-gradient(90deg,#efefef 0%, #ffffff 45%, #f2f2f2 100%);
54 border-radius:16px 16px 0 0;
55 }
56 .tap .head::after{
57 content:"";
58 position:absolute;
59 left:50%;
60 top:4px;
61 transform:translateX(-50%);
62 width:10px;
63 height:10px;
64 border-radius:50%;
65 background:#bdbdbd;
66 }
67 .tap .handle{
68 position:absolute;
69 left:50%;
70 top:-8px;
71 width:22px;
72 height:48px;
73 transform-origin:50% 88%;
74 transform:translateX(-50%) rotate(0deg);
75 animation:handle var(--cycle) linear infinite;
76 }
77 .tap .handle::before{
78 content:"";
79 position:absolute;
80 left:50%;
81 bottom:0;
82 transform:translateX(-50%);
83 width:12px;
84 height:12px;
85 border-radius:50%;
86 background:#bdbdbd;
87 }
88 .tap .handle::after{
89 content:"";
90 position:absolute;
91 left:50%;
92 top:0;
93 transform:translateX(-50%);
94 width:22px;
95 height:40px;
96 background:var(--metal);
97 border-radius:14px 14px 14px 14px / 18px 18px 10px 10px;
98 clip-path:polygon(35% 0,65% 0,100% 35%,58% 100%,42% 100%,0 35%);
99 }
100
101 .pour{
102 position:absolute;
103 left:50%;
104 top:calc(14% + 72px);
105 width:22px;
106 height:0;
107 transform:translateX(-50%);
108 transform-origin:top center;
109 overflow:visible;
110 z-index:3;
111 animation:streamWrap var(--cycle) linear infinite;
112 }
113 .pour::before{
114 content:"";
115 position:absolute;
116 left:0;
117 top:0;
118 width:22px;
119 height:100%;
120 background:
121 linear-gradient(90deg,var(--beer2) 0 28%, var(--beer) 28% 72%, var(--beer2) 72% 100%);
122 border-radius:0 0 12px 12px;
123 filter:saturate(1.05);
124 animation:wobble .45s ease-in-out infinite alternate;
125 }
126
127 .mug{
128 position:absolute;
129 left:50%;
130 top:43%;
131 width:116px;
132 height:148px;
133 transform:translateX(-50%);
134 z-index:2;
135 animation:mugMove var(--cycle) linear infinite;
136 }
137
138 .glass{
139 position:absolute;
140 left:0;
141 bottom:0;
142 width:104px;
143 height:132px;
144 background:
145 linear-gradient(90deg,
146 rgba(255,255,255,.18) 0 18%,
147 rgba(255,255,255,.42) 18% 34%,
148 rgba(255,255,255,.12) 34% 66%,
149 rgba(255,255,255,.42) 66% 82%,
150 rgba(255,255,255,.18) 82% 100%),
151 linear-gradient(180deg,var(--glass) 0%, #f97f89 100%);
152 clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
153 border-radius:12px 12px 16px 16px;
154 overflow:hidden;
155 box-shadow:0 14px 0 -2px rgba(255,255,255,.85);
156 }
157 .glass::before{
158 content:"";
159 position:absolute;
160 inset:0;
161 background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
162 border-radius:inherit;
163 }
164
165 .rim{
166 position:absolute;
167 left:12px;
168 top:0;
169 width:80px;
170 height:28px;
171 background:rgba(255,180,190,.55);
172 border-radius:10px 10px 0 0;
173 z-index:3;
174 }
175
176 .beer{
177 position:absolute;
178 left:8px;
179 bottom:0;
180 width:88px;
181 height:0%;
182 background:
183 linear-gradient(90deg,
184 rgba(255,255,255,.18) 0 18%,
185 rgba(255,255,255,.38) 18% 34%,
186 rgba(255,255,255,.08) 34% 66%,
187 rgba(255,255,255,.38) 66% 82%,
188 rgba(255,255,255,.18) 82% 100%),
189 linear-gradient(180deg,#f9d56d 0%, var(--beer) 55%, #f4bf43 100%);
190 clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
191 border-radius:8px 8px 12px 12px;
192 animation:fill var(--cycle) linear infinite;
193 }
194
195 .handle-mug{
196 position:absolute;
197 right:0;
198 top:26px;
199 width:34px;
200 height:74px;
201 border:8px solid var(--white);
202 border-left:none;
203 border-radius:0 28px 28px 0;
204 box-sizing:border-box;
205 }
206
207 .foam{
208 position:absolute;
209 left:8px;
210 top:-18px;
211 width:92px;
212 height:54px;
213 opacity:0;
214 animation:foam var(--cycle) linear infinite;
215 z-index:4;
216 }
217 .foam span{
218 position:absolute;
219 background:var(--foam);
220 border-radius:50%;
221 box-shadow:0 0 0 1px rgba(255,255,255,.15);
222 }
223 .foam .b1{ width:40px;height:40px; left:22px; top:8px; }
224 .foam .b2{ width:28px;height:28px; left:0; top:18px; }
225 .foam .b3{ width:28px;height:28px; left:48px; top:14px; }
226 .foam .b4{ width:42px;height:42px; left:28px; top:0; }
227 .foam .b5{ width:22px;height:22px; left:66px; top:18px; }
228
229 .bubbles{
230 position:absolute;
231 inset:0;
232 pointer-events:none;
233 opacity:.55;
234 }
235 .bubbles span{
236 position:absolute;
237 width:6px;height:6px;
238 border:1.5px solid rgba(255,255,255,.45);
239 border-radius:50%;
240 animation:bubbleUp 1.6s linear infinite;
241 opacity:0;
242 }
243 .bubbles span:nth-child(1){ left:48px; bottom:18px; animation-delay:.1s; }
244 .bubbles span:nth-child(2){ left:58px; bottom:34px; animation-delay:.7s; width:4px;height:4px; }
245 .bubbles span:nth-child(3){ left:54px; bottom:10px; animation-delay:1.1s; width:5px;height:5px; }
246
247 @keyframes handle{
248 0%,8% { transform:translateX(-50%) rotate(0deg); }
249 12%,28% { transform:translateX(-50%) rotate(34deg); }
250 34%,52% { transform:translateX(-50%) rotate(0deg); }
251 58%,74% { transform:translateX(-50%) rotate(34deg); }
252 80%,100%{ transform:translateX(-50%) rotate(0deg); }
253 }
254
255 @keyframes streamWrap{
256 0%,9% { height:0; opacity:0; }
257 12% { height:118px; opacity:1; }
258 18% { height:170px; opacity:1; }
259 28% { height:170px; opacity:1; }
260 32% { height:0; opacity:0; }
261 57% { height:0; opacity:0; }
262 60% { height:118px; opacity:1; }
263 66% { height:170px; opacity:1; }
264 74% { height:170px; opacity:1; }
265 78%,100%{ height:0; opacity:0; }
266 }
267
268 @keyframes wobble{
269 from{ transform:translateX(-1px) skewX(1deg); }
270 to { transform:translateX(1px) skewX(-1deg); }
271 }
272
273 @keyframes fill{
274 0%,10% { height:0%; }
275 18% { height:0%; }
276 28% { height:82%; }
277 34% { height:82%; }
278 52% { height:82%; }
279 56% { height:0%; }
280 60% { height:0%; }
281 74% { height:82%; }
282 80% { height:82%; }
283 100% { height:82%; }
284 }
285
286 @keyframes foam{
287 0%,27% { opacity:0; transform:translateY(8px) scale(.7); }
288 31%,48% { opacity:1; transform:translateY(0) scale(1); }
289 52% { opacity:1; transform:translateY(0) scale(1); }
290 56% { opacity:0; transform:translateY(8px) scale(.7); }
291 73% { opacity:0; transform:translateY(8px) scale(.7); }
292 77%,94% { opacity:1; transform:translateY(0) scale(1); }
293 100% { opacity:1; transform:translateY(0) scale(1); }
294 }
295
296 @keyframes bubbleUp{
297 0% { transform:translateY(0) scale(.6); opacity:0; }
298 20% { opacity:.5; }
299 100% { transform:translateY(-42px) scale(1); opacity:0; }
300 }
301
302 @keyframes mugMove{
303 0%,48% { transform:translateX(-50%); opacity:1; }
304 52% { transform:translateX(-50%); opacity:1; }
305 56% { transform:translateX(-115vw); opacity:1; }
306 57% { transform:translateX(115vw); opacity:0; }
307 60% { transform:translateX(-50%); opacity:1; }
308 100% { transform:translateX(-50%); opacity:1; }
309 }
310</style>
311</head>
312<body>
313 <div class="scene">
314 <div class="tap">
315 <div class="handle"></div>
316 <div class="head"></div>
317 </div>
318
319 <div class="pour"></div>
320
321 <div class="mug">
322 <div class="handle-mug"></div>
323 <div class="glass">
324 <div class="beer"></div>
325 <div class="rim"></div>
326 <div class="bubbles">
327 <span></span><span></span><span></span>
328 </div>
329 </div>
330 <div class="foam">
331 <span class="b1"></span>
332 <span class="b2"></span>
333 <span class="b3"></span>
334 <span class="b4"></span>
335 <span class="b5"></span>
336 </div>
337 </div>
338 </div>
339</body>
340</html>