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

model output

Qwen3-VL-8B-Instruct

Only CSS: Caterpillar

A 0.68T 0.32
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>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            overflow: hidden;
15        }
16        .logo {
17            width: 80px;
18            height: 40px;
19            position: relative;
20            animation: rotate 2s ease-in-out infinite alternate;
21        }
22        .logo::before, .logo::after {
23            content: "";
24            position: absolute;
25            width: 40px;
26            height: 20px;
27            background-color: black;
28            top: 0;
29            left: 0;
30            transform-origin: center;
31        }
32        .logo::before {
33            transform: rotate(-45deg);
34        }
35        .logo::after {
36            transform: rotate(45deg);
37        }
38        .middle {
39            position: absolute;
40            width: 40px;
41            height: 20px;
42            background-color: #00aaff;
43            top: 0;
44            left: 0;
45            transform-origin: center;
46            animation: pulse 2s ease-in-out infinite alternate;
47        }
48        @keyframes rotate {
49            0% {
50                transform: rotate(0deg);
51            }
52            100% {
53                transform: rotate(180deg);
54            }
55        }
56        @keyframes pulse {
57            0% {
58                transform: scale(1);
59            }
60            100% {
61                transform: scale(1.1);
62            }
63        }
64    </style>
65</head>
66<body>
67    <div class="logo">
68        <div class="middle"></div>
69    </div>
70</body>
71</html>