← back to Only CSS: Lanthanumcompare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Lanthanum
A 0.64T 0.25
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>Lantern Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 width: 1024px;
12 height: 768px;
13 background-color: #1a2a3a;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 }
19
20 .scene {
21 position: relative;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 }
26
27 /* Glow effect behind lantern */
28 .glow {
29 position: absolute;
30 width: 160px;
31 height: 160px;
32 border-radius: 50%;
33 background: radial-gradient(circle, rgba(180, 210, 255, 0.18) 0%, rgba(180, 210, 255, 0.08) 40%, transparent 70%);
34 animation: glowPulse 2s ease-in-out infinite;
35 top: 50%;
36 left: 50%;
37 transform: translate(-50%, -50%);
38 }
39
40 .lantern {
41 position: relative;
42 display: flex;
43 flex-direction: column;
44 align-items: center;
45 animation: float 2s ease-in-out infinite;
46 }
47
48 /* Handle arc at top */
49 .handle {
50 width: 44px;
51 height: 22px;
52 border: 3px solid #4a5060;
53 border-bottom: none;
54 border-radius: 22px 22px 0 0;
55 margin-bottom: -2px;
56 position: relative;
57 z-index: 3;
58 }
59
60 /* Top cap */
61 .top-cap {
62 width: 58px;
63 height: 14px;
64 background: linear-gradient(180deg, #3a3f4a 0%, #2a2f38 100%);
65 border-radius: 4px 4px 0 0;
66 position: relative;
67 z-index: 3;
68 box-shadow: 0 2px 4px rgba(0,0,0,0.4);
69 }
70
71 /* Knob on top cap */
72 .knob {
73 width: 36px;
74 height: 10px;
75 background: linear-gradient(180deg, #454a55 0%, #2e333d 100%);
76 border-radius: 5px;
77 margin: 0 auto;
78 position: relative;
79 top: -5px;
80 box-shadow: 0 2px 4px rgba(0,0,0,0.5);
81 }
82
83 /* Glass body */
84 .glass-body {
85 width: 58px;
86 height: 70px;
87 background: linear-gradient(180deg,
88 rgba(50, 60, 75, 0.85) 0%,
89 rgba(40, 50, 65, 0.7) 30%,
90 rgba(50, 60, 75, 0.75) 100%
91 );
92 border: 1.5px solid rgba(80, 90, 110, 0.6);
93 border-top: none;
94 border-bottom: none;
95 position: relative;
96 display: flex;
97 align-items: center;
98 justify-content: center;
99 overflow: hidden;
100 }
101
102 /* Inner glow inside glass */
103 .inner-glow {
104 position: absolute;
105 width: 100%;
106 height: 100%;
107 background: radial-gradient(ellipse at 50% 60%, rgba(200, 220, 255, 0.15) 0%, transparent 70%);
108 animation: innerGlow 2s ease-in-out infinite;
109 }
110
111 /* Flame / drop */
112 .flame {
113 position: relative;
114 z-index: 2;
115 width: 18px;
116 height: 24px;
117 animation: flamePulse 2s ease-in-out infinite;
118 }
119
120 .flame-shape {
121 width: 18px;
122 height: 24px;
123 background: linear-gradient(180deg, #cc2222 0%, #dd3333 50%, #cc2222 100%);
124 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
125 clip-path: polygon(50% 0%, 80% 40%, 100% 70%, 80% 100%, 20% 100%, 0% 70%, 20% 40%);
126 filter: drop-shadow(0 0 4px rgba(220, 50, 50, 0.6));
127 }
128
129 /* Bottom base */
130 .bottom-base {
131 width: 58px;
132 height: 22px;
133 background: linear-gradient(180deg, #2e333d 0%, #252a33 60%, #1e2228 100%);
134 border-radius: 0 0 6px 6px;
135 position: relative;
136 z-index: 3;
137 box-shadow: 0 4px 8px rgba(0,0,0,0.5);
138 }
139
140 /* Shadow under lantern */
141 .shadow {
142 width: 60px;
143 height: 10px;
144 background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
145 border-radius: 50%;
146 margin-top: 4px;
147 animation: shadowPulse 2s ease-in-out infinite;
148 }
149
150 @keyframes float {
151 0%, 100% { transform: translateY(0px); }
152 50% { transform: translateY(-6px); }
153 }
154
155 @keyframes glowPulse {
156 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
157 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
158 }
159
160 @keyframes innerGlow {
161 0%, 100% { opacity: 0.6; }
162 50% { opacity: 1; }
163 }
164
165 @keyframes flamePulse {
166 0%, 100% { transform: scale(1) translateY(0); }
167 50% { transform: scale(1.05) translateY(-1px); }
168 }
169
170 @keyframes shadowPulse {
171 0%, 100% { transform: scaleX(1); opacity: 0.8; }
172 50% { transform: scaleX(0.85); opacity: 0.5; }
173 }
174</style>
175</head>
176<body>
177 <div class="scene">
178 <div class="glow"></div>
179 <div class="lantern">
180 <div class="handle"></div>
181 <div class="top-cap">
182 <div class="knob"></div>
183 </div>
184 <div class="glass-body">
185 <div class="inner-glow"></div>
186 <div class="flame">
187 <div class="flame-shape"></div>
188 </div>
189 </div>
190 <div class="bottom-base"></div>
191 <div class="shadow"></div>
192 </div>
193 </div>
194</body>
195</html>