← back to Only CSS: Lanthanumcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Lanthanum
A 0.49T 0.23
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Animated Candle</title>
6 <style>
7 body {
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 height: 100vh;
12 background-color: #1a2332;
13 margin: 0;
14 overflow: hidden;
15 }
16 .candle-container {
17 position: relative;
18 width: 80px;
19 height: 120px;
20 }
21 .candle-base {
22 position: absolute;
23 bottom: 0;
24 left: 50%;
25 transform: translateX(-50%);
26 width: 40px;
27 height: 30px;
28 background: #333;
29 border-radius: 50% 50% 0 0;
30 box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
31 }
32 .candle-wick {
33 position: absolute;
34 top: 50%;
35 left: 50%;
36 transform: translate(-50%, -50%);
37 width: 2px;
38 height: 20px;
39 background: #fff;
40 z-index: 10;
41 }
42 .candle-flame {
43 position: absolute;
44 top: 50%;
45 left: 50%;
46 transform: translate(-50%, -50%);
47 width: 20px;
48 height: 20px;
49 background: linear-gradient(to bottom, #ff4d4d, #ff6b6b);
50 border-radius: 50%;
51 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
52 animation: flamePulse 1.5s ease-in-out infinite alternate;
53 z-index: 5;
54 }
55 .candle-flame::before {
56 content: '';
57 position: absolute;
58 top: -5px;
59 left: -5px;
60 width: 30px;
61 height: 30px;
62 background: linear-gradient(to bottom, #ff4d4d, #ff6b6b);
63 border-radius: 50%;
64 opacity: 0.7;
65 animation: flamePulse 1.5s ease-in-out infinite alternate;
66 }
67 .candle-flame::after {
68 content: '';
69 position: absolute;
70 top: -10px;
71 left: -10px;
72 width: 40px;
73 height: 40px;
74 background: linear-gradient(to bottom, #ff4d4d, #ff6b6b);
75 border-radius: 50%;
76 opacity: 0.3;
77 animation: flamePulse 1.5s ease-in-out infinite alternate;
78 }
79 @keyframes flamePulse {
80 0% {
81 transform: translate(-50%, -50%) scale(1);
82 opacity: 0.8;
83 }
84 50% {
85 transform: translate(-50%, -50%) scale(1.2);
86 opacity: 1;
87 }
88 100% {
89 transform: translate(-50%, -50%) scale(1);
90 opacity: 0.8;
91 }
92 }
93 .candle-top {
94 position: absolute;
95 top: 0;
96 left: 50%;
97 transform: translateX(-50%);
98 width: 60px;
99 height: 60px;
100 background: #333;
101 border-radius: 50%;
102 box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
103 z-index: 1;
104 }
105 .candle-top::before {
106 content: '';
107 position: absolute;
108 top: 0;
109 left: 0;
110 width: 100%;
111 height: 100%;
112 background: #333;
113 border-radius: 50%;
114 box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
115 }
116 .candle-top::after {
117 content: '';
118 position: absolute;
119 top: 50%;
120 left: 50%;
121 transform: translate(-50%, -50%);
122 width: 20px;
123 height: 20px;
124 background: #333;
125 border-radius: 50%;
126 box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
127 }
128 </style>
129</head>
130<body>
131 <div class="candle-container">
132 <div class="candle-top"></div>
133 <div class="candle-base"></div>
134 <div class="candle-wick"></div>
135 <div class="candle-flame"></div>
136 </div>
137</body>
138</html>