model output
LLaMA 4 Scout

SVG Draught Beer
A 0.64T 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>Animation</title>
7    <style>
8        /* Global Styles */
9        body {
10            background-color: #FFC0CB;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            margin: 0;
16        }
17        .container {
18            position: relative;
19        }
20        .icon {
21            position: absolute;
22        }
23        #tea-tag {
24            top: 50%;
25            left: 50%;
26            transform: translate(-50%, -50%);
27            width: 20px;
28            height: 30px;
29            background-color: white;
30            border-radius: 5px;
31        }
32        #tea-tag::after {
33            content: "";
34            position: absolute;
35            top: -15px;
36            left: 50%;
37            transform: translateX(-50%);
38            width: 0;
39            height: 0;
40            border-left: 10px solid transparent;
41            border-right: 10px solid transparent;
42            border-bottom: 15px solid white;
43        }
44        #tea-spout {
45            position: absolute;
46            top: 0;
47            left: 50%;
48            transform: translateX(-50%) rotate(-90deg);
49            width: 2px;
50            height: 50px;
51            background-color: yellow;
52        }
53        #mug {
54            width: 100px;
55            height: 150px;
56            background-color: #FFD7BE;
57            border: 1px solid white;
58            border-radius: 10px;
59            position: absolute;
60            bottom: 0;
61            left: 50%;
62            transform: translateX(-50%);
63        }
64        #mug::before {
65            content: "";
66            position: absolute;
67            top: 0;
68            left: 0;
69            width: 100%;
70            height: 100%;
71            background: linear-gradient(to bottom, rgba(255, 215, 190, 0.5), rgba(255, 215, 190, 0.5));
72            border-radius: 10px;
73        }
74        #mug .handle {
75            position: absolute;
76            top: 50%;
77            right: -20px;
78            transform: translateY(-50%);
79            width: 20px;
80            height: 20px;
81            background-color: white;
82            border-radius: 50%;
83        }
84        #mug-content {
85            position: absolute;
86            top: 50%;
87            left: 50%;
88            transform: translate(-50%, -50%);
89            width: 80px;
90            height: 80px;
91            background-color: #F7DC6F;
92            border-radius: 50%;
93        }
94        #mug-content::before {
95            content: "";
96            position: absolute;
97            top: 0;
98            left: 0;
99            width: 100%;
100            height: 100%;
101            border-radius: 50%;
102            background: radial-gradient(white 10%, transparent 11%, transparent 50%, white 51%, white 100%);
103        }
104    </style>
105</head>
106<body>
107    <div class="container">
108        <div id="tea-tag" class="icon"></div>
109        <div id="tea-spout" class="icon"></div>
110        <div id="mug" class="icon">
111            <div class="handle"></div>
112        </div>
113    </div>
114    <script>
115        // Animation logic can be added here if needed
116    </script>
117</body>
118</html>