← back to SVG Draught Beercompare with ground truth →
model output
Qwen3-VL-8B-Instruct
SVG Draught Beer
A 0.71T 0.00
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 Pour Animation</title>
7 <style>
8 body {
9 background-color: #ff6b6b;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 overflow: hidden;
16 }
17 .container {
18 position: relative;
19 width: 200px;
20 height: 400px;
21 }
22 .tap {
23 position: absolute;
24 top: 0;
25 left: 50%;
26 transform: translateX(-50%);
27 width: 20px;
28 height: 40px;
29 background-color: white;
30 border-radius: 4px;
31 z-index: 10;
32 }
33 .tap-handle {
34 position: absolute;
35 top: -10px;
36 left: 50%;
37 transform: translateX(-50%);
38 width: 10px;
39 height: 10px;
40 background-color: #a9a9a9;
41 border-radius: 50%;
42 }
43 .mug {
44 position: absolute;
45 bottom: 0;
46 left: 50%;
47 transform: translateX(-50%);
48 width: 80px;
49 height: 120px;
50 background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
51 border-radius: 10px;
52 border: 2px solid white;
53 display: flex;
54 flex-direction: column;
55 justify-content: flex-end;
56 align-items: center;
57 overflow: hidden;
58 z-index: 5;
59 }
60 .mug-handle {
61 position: absolute;
62 top: 20px;
63 right: 10px;
64 width: 10px;
65 height: 30px;
66 background-color: white;
67 border-radius: 5px;
68 }
69 .beer {
70 position: absolute;
71 bottom: 0;
72 left: 50%;
73 transform: translateX(-50%);
74 width: 80px;
75 height: 0;
76 background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
77 border-radius: 10px;
78 border: 2px solid white;
79 overflow: hidden;
80 z-index: 4;
81 }
82 .foam {
83 position: absolute;
84 bottom: 0;
85 left: 50%;
86 transform: translateX(-50%);
87 width: 80px;
88 height: 0;
89 background-color: white;
90 border-radius: 10px;
91 overflow: hidden;
92 z-index: 3;
93 }
94 .beer-flow {
95 position: absolute;
96 top: 0;
97 left: 50%;
98 transform: translateX(-50%);
99 width: 20px;
100 height: 0;
101 background-color: #ffcc00;
102 border-radius: 10px;
103 z-index: 2;
104 animation: pour 1s ease-in-out;
105 }
106 @keyframes pour {
107 0% {
108 height: 0;
109 opacity: 0;
110 }
111 50% {
112 height: 100px;
113 opacity: 1;
114 }
115 100% {
116 height: 0;
117 opacity: 0;
118 }
119 }
120 .mug-empty {
121 background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
122 }
123 .mug-full {
124 background: linear-gradient(to bottom, #ffcc00, #ff9a9e);
125 }
126 .foam-visible {
127 height: 30px;
128 }
129 .mug-move-left {
130 transform: translateX(-50%) translateX(-100px);
131 }
132 .mug-move-right {
133 transform: translateX(-50%) translateX(100px);
134 }
135 </style>
136</head>
137<body>
138 <div class="container">
139 <div class="tap">
140 <div class="tap-handle"></div>
141 </div>
142 <div class="mug">
143 <div class="mug-handle"></div>
144 <div class="beer"></div>
145 <div class="foam"></div>
146 </div>
147 </div>
148
149 <script>
150 const container = document.querySelector('.container');
151 const tap = document.querySelector('.tap');
152 const mug = document.querySelector('.mug');
153 const beer = document.querySelector('.beer');
154 const foam = document.querySelector('.foam');
155 const beerFlow = document.querySelector('.beer-flow');
156
157 // Initial state
158 beer.style.height = '0px';
159 foam.style.height = '0px';
160 mug.classList.add('mug-empty');
161
162 // Animation sequence
163 function pourBeer() {
164 // Show beer flow
165 beerFlow.style.height = '100px';
166 beerFlow.style.opacity = '1';
167
168 // Animate beer filling
169 setTimeout(() => {
170 beer.style.height = '100px';
171 foam.style.height = '30px';
172 mug.classList.remove('mug-empty');
173 mug.classList.add('mug-full');
174 beerFlow.style.height = '0px';
175 beerFlow.style.opacity = '0';
176
177 // Move mug to the left
178 mug.classList.add('mug-move-left');
179 setTimeout(() => {
180 mug.classList.remove('mug-move-left');
181 mug.classList.add('mug-move-right');
182 setTimeout(() => {
183 mug.classList.remove('mug-move-right');
184 // Reset for next pour
185 beer.style.height = '0px';
186 foam.style.height = '0px';
187 mug.classList.remove('mug-full');
188 mug.classList.add('mug-empty');
189 beerFlow.style.height = '0px';
190 beerFlow.style.opacity = '0';
191 }, 1000);
192 }, 1000);
193 }, 500);
194 }
195
196 // Start animation
197 pourBeer();
198 setTimeout(pourBeer, 2000);
199 </script>
200</body>
201</html>