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

model output

Qwen3-VL-8B-Instruct

Only CSS: Peacock

A 0.46T 0.16
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Animation</title>
6    <style>
7        body {
8            display: flex;
9            justify-content: center;
10            align-items: center;
11            height: 100vh;
12            background: black;
13            overflow: hidden;
14        }
15        .spinner {
16            width: 100px;
17            height: 100px;
18            position: relative;
19            animation: spin 3s ease-in-out infinite;
20        }
21        .segment {
22            position: absolute;
23            width: 10px;
24            height: 100px;
25            background: red;
26            transform-origin: 50px 50px;
27            border-radius: 5px;
28        }
29        .segment:nth-child(1) { transform: rotate(0deg); }
30        .segment:nth-child(2) { transform: rotate(45deg); }
31        .segment:nth-child(3) { transform: rotate(90deg); }
32        .segment:nth-child(4) { transform: rotate(135deg); }
33        .segment:nth-child(5) { transform: rotate(180deg); }
34        .segment:nth-child(6) { transform: rotate(225deg); }
35        .segment:nth-child(7) { transform: rotate(270deg); }
36        .segment:nth-child(8) { transform: rotate(315deg); }
37        @keyframes spin {
38            0% { transform: rotate(0deg); }
39            25% { transform: rotate(90deg); }
40            50% { transform: rotate(180deg); }
41            75% { transform: rotate(270deg); }
42            100% { transform: rotate(360deg); }
43        }
44        .segment:nth-child(1) { animation: colorChange 3s ease-in-out infinite; }
45        .segment:nth-child(2) { animation: colorChange 3s ease-in-out infinite 0.25s; }
46        .segment:nth-child(3) { animation: colorChange 3s ease-in-out infinite 0.5s; }
47        .segment:nth-child(4) { animation: colorChange 3s ease-in-out infinite 0.75s; }
48        .segment:nth-child(5) { animation: colorChange 3s ease-in-out infinite 1s; }
49        .segment:nth-child(6) { animation: colorChange 3s ease-in-out infinite 1.25s; }
50        .segment:nth-child(7) { animation: colorChange 3s ease-in-out infinite 1.5s; }
51        .segment:nth-child(8) { animation: colorChange 3s ease-in-out infinite 1.75s; }
52        @keyframes colorChange {
53            0% { background: red; }
54            25% { background: magenta; }
55            50% { background: blue; }
56            75% { background: cyan; }
57            100% { background: red; }
58        }
59    </style>
60</head>
61<body>
62    <div class="spinner">
63        <div class="segment"></div>
64        <div class="segment"></div>
65        <div class="segment"></div>
66        <div class="segment"></div>
67        <div class="segment"></div>
68        <div class="segment"></div>
69        <div class="segment"></div>
70        <div class="segment"></div>
71    </div>
72</body>
73</html>