animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Kirby

model output

Qwen3-VL-8B-Instruct

Only CSS: Kirby

A 0.89T 0.45
compare with ground truth →
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>