← back to Snow (Pure CSS)compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Snow (Pure CSS)
A 0.79T 0.14
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>Starry Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background: linear-gradient(135deg, #1a1a2e, #16213e);
12 overflow: hidden;
13 width: 100vw;
14 height: 100vh;
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 }
19 .star {
20 position: absolute;
21 background: white;
22 border-radius: 50%;
23 animation: twinkle 3s ease-in-out infinite;
24 opacity: 0;
25 }
26 @keyframes twinkle {
27 0%, 100% {
28 opacity: 0;
29 transform: scale(0.5);
30 }
31 50% {
32 opacity: 1;
33 transform: scale(1.2);
34 }
35 }
36 .star:nth-child(1) { animation-delay: 0s; }
37 .star:nth-child(2) { animation-delay: 0.2s; }
38 .star:nth-child(3) { animation-delay: 0.4s; }
39 .star:nth-child(4) { animation-delay: 0.6s; }
40 .star:nth-child(5) { animation-delay: 0.8s; }
41 .star:nth-child(6) { animation-delay: 1.0s; }
42 .star:nth-child(7) { animation-delay: 1.2s; }
43 .star:nth-child(8) { animation-delay: 1.4s; }
44 .star:nth-child(9) { animation-delay: 1.6s; }
45 .star:nth-child(10) { animation-delay: 1.8s; }
46 .star:nth-child(11) { animation-delay: 2.0s; }
47 .star:nth-child(12) { animation-delay: 2.2s; }
48 .star:nth-child(13) { animation-delay: 2.4s; }
49 .star:nth-child(14) { animation-delay: 2.6s; }
50 .star:nth-child(15) { animation-delay: 2.8s; }
51 .star:nth-child(16) { animation-delay: 3.0s; }
52 .star:nth-child(17) { animation-delay: 3.2s; }
53 .star:nth-child(18) { animation-delay: 3.4s; }
54 .star:nth-child(19) { animation-delay: 3.6s; }
55 .star:nth-child(20) { animation-delay: 3.8s; }
56 .star:nth-child(21) { animation-delay: 4.0s; }
57 .star:nth-child(22) { animation-delay: 4.2s; }
58 .star:nth-child(23) { animation-delay: 4.4s; }
59 .star:nth-child(24) { animation-delay: 4.6s; }
60 .star:nth-child(25) { animation-delay: 4.8s; }
61 .star:nth-child(26) { animation-delay: 5.0s; }
62 .star:nth-child(27) { animation-delay: 5.2s; }
63 .star:nth-child(28) { animation-delay: 5.4s; }
64 .star:nth-child(29) { animation-delay: 5.6s; }
65 .star:nth-child(30) { animation-delay: 5.8s; }
66 .star:nth-child(31) { animation-delay: 6.0s; }
67 .star:nth-child(32) { animation-delay: 6.2s; }
68 .star:nth-child(33) { animation-delay: 6.4s; }
69 .star:nth-child(34) { animation-delay: 6.6s; }
70 .star:nth-child(35) { animation-delay: 6.8s; }
71 .star:nth-child(36) { animation-delay: 7.0s; }
72 .star:nth-child(37) { animation-delay: 7.2s; }
73 .star:nth-child(38) { animation-delay: 7.4s; }
74 .star:nth-child(39) { animation-delay: 7.6s; }
75 .star:nth-child(40) { animation-delay: 7.8s; }
76 .star:nth-child(41) { animation-delay: 8.0s; }
77 .star:nth-child(42) { animation-delay: 8.2s; }
78 .star:nth-child(43) { animation-delay: 8.4s; }
79 .star:nth-child(44) { animation-delay: 8.6s; }
80 .star:nth-child(45) { animation-delay: 8.8s; }
81 .star:nth-child(46) { animation-delay: 9.0s; }
82 .star:nth-child(47) { animation-delay: 9.2s; }
83 .star:nth-child(48) { animation-delay: 9.4s; }
84 .star:nth-child(49) { animation-delay: 9.6s; }
85 .star:nth-child(50) { animation-delay: 9.8s; }
86 .star:nth-child(51) { animation-delay: 10.0s; }
87 .star:nth-child(52) { animation-delay: 10.2s; }
88 .star:nth-child(53) { animation-delay: 10.4s; }
89 .star:nth-child(54) { animation-delay: 10.6s; }
90 .star:nth-child(55) { animation-delay: 10.8s; }
91 .star:nth-child(56) { animation-delay: 11.0s; }
92 .star:nth-child(57) { animation-delay: 11.2s; }
93 .star:nth-child(58) { animation-delay: 11.4s; }
94 .star:nth-child(59) { animation-delay: 11.6s; }
95 .star:nth-child(60) { animation-delay: 11.8s; }
96 .star:nth-child(61) { animation-delay: 12.0s; }
97 .star:nth-child(62) { animation-delay: 12.2s; }
98 .star:nth-child(63) { animation-delay: 12.4s; }
99 .star:nth-child(64) { animation-delay: 12.6s; }
100 .star:nth-child(65) { animation-delay: 12.8s; }
101 .star:nth-child(66) { animation-delay: 13.0s; }
102 .star:nth-child(67) { animation-delay: 13.2s; }
103 .star:nth-child(68) { animation-delay: 13.4s; }
104 .star:nth-child(69) { animation-delay: 13.6s; }
105 .star:nth-child(70) { animation-delay: 13.8s; }
106 .star:nth-child(71) { animation-delay: 14.0s; }
107 .star:nth-child(72) { animation-delay: 14.2s; }
108 .star:nth-child(73) { animation-delay: 14.4s; }
109 .star:nth-child(74) { animation-delay: 14.6s; }
110 .star:nth-child(75) { animation-delay: 14.8s; }
111 .star:nth-child(76) { animation-delay: 15.0s; }
112 .star:nth-child(77) { animation-delay: 15.2s; }
113 .star:nth-child(78) { animation-delay: 15.4s; }
114 .star:nth-child(79) { animation-delay: 15.6s; }
115 .star:nth-child(80) { animation-delay: 15.8s; }
116 .star:nth-child(81) { animation-delay: 16.0s; }
117 .star:nth-child(82) { animation-delay: 16.2s; }
118 .star:nth-child(83) { animation-delay: 16.4s; }
119 .star:nth-child(84) { animation-delay: 16.6s; }
120 .star:nth-child(85) { animation-delay: 16.8s; }
121 .star:nth-child(86) { animation-delay: 17.0s; }
122 .star:nth-child(87) { animation-delay: 17.2s; }
123 .star:nth-child(88) { animation-delay: 17.4s; }
124 .star:nth-child(89) { animation-delay: 17.6s; }
125 .star:nth-child(90) { animation-delay: 17.8s; }
126 .star:nth-child(91) { animation-delay: 18.0s; }
127 .star:nth-child(92) { animation-delay: 18.2s; }
128 .star:nth-child(93) { animation-delay: 18.4s; }
129 .star:nth-child(94) { animation-delay: 18.6s; }
130 .star:nth-child(95) { animation-delay: 18.8s; }
131 .star:nth-child(96) { animation-delay: 19.0s; }
132 .star:nth-child(97) { animation-delay: 19.2s; }
133 .star:nth-child(98) { animation-delay: 19.4s; }
134 .star:nth-child(99) { animation-delay: 19.6s; }
135 .star:nth-child(100) { animation-delay: 19.8s; }
136 </style>
137</head>
138<body>
139 <script>
140 const body = document.body;
141 const stars = [];
142 const numStars = 100;
143 const sizes = [1, 2, 3, 4, 5];
144 const colors = ['#ffffff', '#e0e0e0', '#cccccc'];
145
146 for (let i = 0; i < numStars; i++) {
147 const star = document.createElement('div');
148 star.classList.add('star');
149 star.style.width = `${Math.random() * 3 + 1}px`;
150 star.style.height = star.style.width;
151 star.style.left = `${Math.random() * 100}%`;
152 star.style.top = `${Math.random() * 100}%`;
153 star.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
154 star.style.opacity = Math.random() * 0.5 + 0.5;
155 star.style.animationDuration = `${Math.random() * 2 + 1}s`;
156 star.style.animationDelay = `${Math.random() * 2}s`;
157 body.appendChild(star);
158 stars.push(star);
159 }
160
161 // Add a small animation to make stars appear
162 setTimeout(() => {
163 stars.forEach((star, index) => {
164 star.style.opacity = 1;
165 star.style.animationPlayState = 'running';
166 });
167 }, 100);
168 </script>
169</body>
170</html>