← back to Only CSS: Kirbycompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Kirby
A 0.89T 0.45
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>Kirby Animation</title>
7<style>
8 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: white;
14 margin: 0;
15 }
16 .kirby {
17 width: 200px;
18 height: 200px;
19 position: relative;
20 animation: blink 2s infinite;
21 }
22 .face {
23 width: 100%;
24 height: 100%;
25 background-color: #ff9999;
26 border: 5px solid black;
27 border-radius: 50%;
28 position: relative;
29 }
30 .eye {
31 width: 30px;
32 height: 40px;
33 background: linear-gradient(to bottom, #ffffff, #cccccc);
34 border: 2px solid black;
35 border-radius: 50%;
36 position: absolute;
37 top: 40px;
38 left: 50%;
39 transform: translateX(-50%);
40 animation: eyeBlink 2s infinite;
41 }
42 .eye-left {
43 left: 30px;
44 }
45 .eye-right {
46 right: 30px;
47 }
48 .pupil {
49 width: 15px;
50 height: 20px;
51 background-color: #0000cc;
52 border-radius: 50%;
53 position: absolute;
54 top: 10px;
55 left: 50%;
56 transform: translateX(-50%);
57 }
58 .cheek {
59 width: 20px;
60 height: 15px;
61 background-color: #ff6666;
62 border-radius: 50%;
63 position: absolute;
64 top: 60px;
65 left: 30px;
66 }
67 .cheek-right {
68 left: auto;
69 right: 30px;
70 }
71 .mouth {
72 width: 10px;
73 height: 5px;
74 background-color: black;
75 border-radius: 50%;
76 position: absolute;
77 top: 100px;
78 left: 50%;
79 transform: translateX(-50%);
80 }
81 @keyframes blink {
82 0%, 100% {
83 transform: scale(1);
84 }
85 50% {
86 transform: scale(1.05);
87 }
88 }
89 @keyframes eyeBlink {
90 0%, 100% {
91 transform: translateX(-50%) scale(1);
92 }
93 50% {
94 transform: translateX(-50%) scale(0.9);
95 }
96 }
97</style>
98</head>
99<body>
100 <div class="kirby">
101 <div class="face">
102 <div class="eye eye-left">
103 <div class="pupil"></div>
104 </div>
105 <div class="eye eye-right">
106 <div class="pupil"></div>
107 </div>
108 <div class="cheek"></div>
109 <div class="cheek cheek-right"></div>
110 <div class="mouth"></div>
111 </div>
112 </div>
113</body>
114</html>