← back to Only CSS: Kirbycompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Kirby
A 0.94T 0.42
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 Kirby Face</title>
7 <style>
8 :root {
9 --kirby-pink: #ff99a1;
10 --kirby-cheek: #ff4c4c;
11 --kirby-blue-top: #2b5eff;
12 --kirby-blue-bottom: #001a66;
13 --border-color: #000;
14 }
15
16 body {
17 margin: 0;
18 padding: 0;
19 display: flex;
20 justify-content: center;
21 align-items: center;
22 height: 100vh;
23 background-color: #fff;
24 overflow: hidden;
25 }
26
27 .canvas {
28 position: relative;
29 width: 400px;
30 height: 400px;
31 display: flex;
32 justify-content: center;
33 align-items: center;
34 }
35
36 /* Main Body Animation */
37 .kirby-head {
38 position: relative;
39 width: 320px;
40 height: 320px;
41 background-color: var(--kirby-pink);
42 border: 11px solid var(--border-color);
43 border-radius: 50%;
44 display: flex;
45 justify-content: center;
46 align-items: center;
47 animation: floatBody 4s ease-in-out infinite;
48 box-sizing: border-box;
49 }
50
51 /* Eyes */
52 .eye-container {
53 position: absolute;
54 top: 65px;
55 width: 140px;
56 display: flex;
57 justify-content: space-between;
58 }
59
60 .eye {
61 position: relative;
62 width: 48px;
63 height: 110px;
64 background-color: var(--border-color);
65 border-radius: 50px;
66 overflow: hidden;
67 }
68
69 .eye-white {
70 position: absolute;
71 top: 8px;
72 left: 50%;
73 transform: translateX(-50%);
74 width: 22px;
75 height: 45px;
76 background-color: #fff;
77 border-radius: 20px;
78 }
79
80 .eye-blue {
81 position: absolute;
82 bottom: 8px;
83 left: 50%;
84 transform: translateX(-50%);
85 width: 22px;
86 height: 35px;
87 background: linear-gradient(to bottom, var(--kirby-blue-top), var(--kirby-blue-bottom));
88 border-radius: 20px;
89 animation: rainbowEyes 7.5s linear infinite;
90 }
91
92 /* Cheeks */
93 .cheek-container {
94 position: absolute;
95 top: 155px;
96 width: 260px;
97 display: flex;
98 justify-content: space-between;
99 }
100
101 .cheek {
102 width: 45px;
103 height: 22px;
104 background-color: var(--kirby-cheek);
105 border-radius: 50%;
106 }
107
108 /* Mouth (Small dot) */
109 .mouth {
110 position: absolute;
111 top: 185px;
112 width: 7px;
113 height: 7px;
114 background-color: var(--border-color);
115 border-radius: 50%;
116 }
117
118 /* Keyframes for floating/breathing effect */
119 @keyframes floatBody {
120 0%, 100% {
121 transform: translateY(0) scale(1);
122 }
123 50% {
124 transform: translateY(-8px) scale(1.02, 0.98);
125 }
126 }
127
128 /* Keyframes for the rainbow shift at the end of the loop */
129 @keyframes rainbowEyes {
130 0%, 70% {
131 filter: hue-rotate(0deg);
132 }
133 75% {
134 filter: hue-rotate(90deg);
135 }
136 80% {
137 filter: hue-rotate(180deg);
138 }
139 85% {
140 filter: hue-rotate(270deg);
141 }
142 90%, 100% {
143 filter: hue-rotate(360deg);
144 }
145 }
146
147 /* Subtle pupil movement */
148 .eye-white, .eye-blue {
149 animation: eyeShift 4s ease-in-out infinite;
150 }
151
152 @keyframes eyeShift {
153 0%, 100% {
154 transform: translateX(-50%) translateY(0);
155 }
156 50% {
157 transform: translateX(-50%) translateY(2px);
158 }
159 }
160 </style>
161</head>
162<body>
163
164 <div class="canvas">
165 <div class="kirby-head">
166 <!-- Eyes -->
167 <div class="eye-container">
168 <div class="eye">
169 <div class="eye-white"></div>
170 <div class="eye-blue"></div>
171 </div>
172 <div class="eye">
173 <div class="eye-white"></div>
174 <div class="eye-blue"></div>
175 </div>
176 </div>
177
178 <!-- Cheeks -->
179 <div class="cheek-container">
180 <div class="cheek"></div>
181 <div class="cheek"></div>
182 </div>
183
184 <!-- Mouth -->
185 <div class="mouth"></div>
186 </div>
187 </div>
188
189 <script>
190 // No complex logic needed as CSS handles the timing perfectly,
191 // but we can ensure the animation syncs if necessary.
192 document.addEventListener('DOMContentLoaded', () => {
193 console.log("Kirby animation loaded.");
194 });
195 </script>
196</body>
197</html>