← back to SVG Draught Beercompare with ground truth →
model output
Claude Sonnet 4.6
SVG Draught Beer
A 0.80T 0.15
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>Tea Bag Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #f5605a;
12 width: 100vw;
13 height: 100vh;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 }
19
20 .scene {
21 position: relative;
22 width: 200px;
23 height: 400px;
24 }
25
26 /* Tea bag tag */
27 .teabag {
28 position: absolute;
29 top: 0;
30 left: 50%;
31 transform: translateX(-50%);
32 display: flex;
33 flex-direction: column;
34 align-items: center;
35 animation: teabagBounce 3s ease-in-out infinite;
36 z-index: 10;
37 }
38
39 .staple {
40 width: 10px;
41 height: 16px;
42 background: #aaa;
43 border-radius: 3px 3px 2px 2px;
44 position: relative;
45 }
46
47 .tag {
48 width: 44px;
49 height: 58px;
50 background: white;
51 border-radius: 6px 6px 6px 6px;
52 position: relative;
53 margin-top: -2px;
54 }
55 .tag::after {
56 content: '';
57 position: absolute;
58 bottom: -6px;
59 left: 50%;
60 transform: translateX(-50%);
61 width: 8px;
62 height: 8px;
63 background: white;
64 border-radius: 50%;
65 }
66
67 /* String / tea stream */
68 .string {
69 position: absolute;
70 top: 74px;
71 left: 50%;
72 transform: translateX(-50%);
73 width: 18px;
74 background: #e8920a;
75 border-radius: 4px;
76 transform-origin: top center;
77 animation: stringAnim 3s ease-in-out infinite;
78 z-index: 5;
79 }
80
81 /* Mug */
82 .mug-wrapper {
83 position: absolute;
84 bottom: 0;
85 left: 50%;
86 transform: translateX(-50%);
87 animation: mugBounce 3s ease-in-out infinite;
88 }
89
90 .mug {
91 position: relative;
92 width: 100px;
93 height: 90px;
94 }
95
96 /* Mug body */
97 .mug-body {
98 position: absolute;
99 bottom: 8px;
100 left: 0;
101 width: 82px;
102 height: 82px;
103 background: rgba(255,255,255,0.25);
104 border-radius: 6px 6px 10px 10px;
105 overflow: hidden;
106 }
107
108 /* Liquid fill */
109 .liquid {
110 position: absolute;
111 bottom: 0;
112 left: 0;
113 width: 100%;
114 background: #f0a830;
115 animation: fillLiquid 3s ease-in-out infinite;
116 border-radius: 0 0 10px 10px;
117 }
118
119 .liquid-shine {
120 position: absolute;
121 bottom: 0;
122 left: 8px;
123 width: 18px;
124 height: 100%;
125 background: rgba(255,220,100,0.5);
126 border-radius: 4px;
127 }
128
129 /* Mug handle */
130 .mug-handle {
131 position: absolute;
132 right: -18px;
133 bottom: 20px;
134 width: 20px;
135 height: 36px;
136 border: 8px solid rgba(255,255,255,0.6);
137 border-left: none;
138 border-radius: 0 20px 20px 0;
139 }
140
141 /* Mug base */
142 .mug-base {
143 position: absolute;
144 bottom: 0;
145 left: -4px;
146 width: 90px;
147 height: 12px;
148 background: rgba(255,255,255,0.7);
149 border-radius: 6px;
150 }
151
152 /* Foam bubbles */
153 .foam {
154 position: absolute;
155 top: -2px;
156 left: 0;
157 width: 100%;
158 display: flex;
159 gap: 2px;
160 justify-content: center;
161 opacity: 0;
162 animation: foamAppear 3s ease-in-out infinite;
163 }
164
165 .bubble {
166 border-radius: 50%;
167 background: white;
168 }
169 .bubble1 { width: 28px; height: 28px; margin-top: 4px; }
170 .bubble2 { width: 22px; height: 22px; }
171 .bubble3 { width: 18px; height: 18px; margin-top: 6px; }
172
173 /* Mug glass highlight */
174 .mug-highlight {
175 position: absolute;
176 top: 6px;
177 left: 6px;
178 width: 14px;
179 height: 60px;
180 background: rgba(255,255,255,0.3);
181 border-radius: 4px;
182 }
183
184 /* Animations */
185 @keyframes teabagBounce {
186 0% { transform: translateX(-50%) translateY(0); }
187 15% { transform: translateX(-50%) translateY(200px); }
188 40% { transform: translateX(-50%) translateY(200px); }
189 55% { transform: translateX(-50%) translateY(0); }
190 70% { transform: translateX(-50%) translateY(200px); }
191 85% { transform: translateX(-50%) translateY(200px); }
192 100% { transform: translateX(-50%) translateY(0); }
193 }
194
195 @keyframes stringAnim {
196 0% { height: 0px; opacity: 0; }
197 5% { height: 0px; opacity: 0; }
198 10% { height: 180px; opacity: 1; }
199 15% { height: 180px; opacity: 1; }
200 40% { height: 180px; opacity: 1; }
201 50% { height: 0px; opacity: 0; }
202 55% { height: 0px; opacity: 0; }
203 60% { height: 180px; opacity: 1; }
204 85% { height: 180px; opacity: 1; }
205 95% { height: 0px; opacity: 0; }
206 100% { height: 0px; opacity: 0; }
207 }
208
209 @keyframes mugBounce {
210 0% { transform: translateX(-50%) translateY(0); }
211 8% { transform: translateX(-50%) translateY(-200px); }
212 15% { transform: translateX(-50%) translateY(-200px); }
213 40% { transform: translateX(-50%) translateY(-200px); }
214 50% { transform: translateX(-50%) translateY(0); }
215 55% { transform: translateX(-50%) translateY(-200px); }
216 85% { transform: translateX(-50%) translateY(-200px); }
217 95% { transform: translateX(-50%) translateY(0); }
218 100% { transform: translateX(-50%) translateY(0); }
219 }
220
221 @keyframes fillLiquid {
222 0% { height: 0%; }
223 15% { height: 10%; }
224 40% { height: 75%; }
225 50% { height: 75%; }
226 55% { height: 10%; }
227 70% { height: 10%; }
228 85% { height: 75%; }
229 100% { height: 75%; }
230 }
231
232 @keyframes foamAppear {
233 0% { opacity: 0; }
234 40% { opacity: 0; }
235 48% { opacity: 1; }
236 55% { opacity: 0; }
237 85% { opacity: 0; }
238 93% { opacity: 1; }
239 100% { opacity: 1; }
240 }
241</style>
242</head>
243<body>
244
245<div class="scene">
246 <!-- Tea bag tag -->
247 <div class="teabag">
248 <div class="staple"></div>
249 <div class="tag"></div>
250 </div>
251
252 <!-- String/stream -->
253 <div class="string"></div>
254
255 <!-- Mug -->
256 <div class="mug-wrapper">
257 <div class="mug">
258 <div class="mug-body">
259 <div class="liquid">
260 <div class="liquid-shine"></div>
261 </div>
262 <div class="mug-highlight"></div>
263 <div class="foam">
264 <div class="bubble bubble1"></div>
265 <div class="bubble bubble2"></div>
266 <div class="bubble bubble3"></div>
267 </div>
268 </div>
269 <div class="mug-handle"></div>
270 <div class="mug-base"></div>
271 </div>
272 </div>
273</div>
274
275</body>
276</html>