← back to Only CSS: Cry Babycompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Cry Baby
A 0.62T 0.23
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>Animated Eyes</title>
7 <style>
8 body {
9 background-color: black;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .eyes-container {
17 position: relative;
18 width: 200px;
19 height: 100px;
20 }
21 .eye {
22 position: absolute;
23 width: 60px;
24 height: 30px;
25 background-color: white;
26 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
27 top: 35px;
28 left: 50px;
29 transform-origin: center;
30 animation: blink 3s ease-in-out infinite;
31 }
32 .left-eye {
33 left: 50px;
34 }
35 .right-eye {
36 left: 150px;
37 }
38 .tear {
39 position: absolute;
40 width: 10px;
41 height: 20px;
42 background-color: white;
43 border-radius: 50%;
44 bottom: 50px;
45 left: 50px;
46 transform-origin: center;
47 animation: tear 3s ease-in-out infinite;
48 }
49 .left-tear {
50 left: 50px;
51 }
52 .right-tear {
53 left: 150px;
54 }
55 @keyframes blink {
56 0%, 100% {
57 transform: scaleY(1);
58 }
59 50% {
60 transform: scaleY(0.5);
61 }
62 }
63 @keyframes tear {
64 0%, 100% {
65 transform: scaleY(0);
66 opacity: 0;
67 }
68 25% {
69 transform: scaleY(1);
70 opacity: 1;
71 }
72 50% {
73 transform: scaleY(0);
74 opacity: 0;
75 }
76 75% {
77 transform: scaleY(1);
78 opacity: 1;
79 }
80 }
81 </style>
82</head>
83<body>
84 <div class="eyes-container">
85 <div class="eye left-eye"></div>
86 <div class="eye right-eye"></div>
87 <div class="tear left-tear"></div>
88 <div class="tear right-tear"></div>
89 </div>
90</body>
91</html>