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

model output

Qwen3-VL-8B-Instruct

Only CSS: Colorful Jewelry

A 0.57T 0.27
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>Abstract Geometric Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: black;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            overflow: hidden;
17        }
18        .container {
19            width: 300px;
20            height: 600px;
21            position: relative;
22            overflow: hidden;
23        }
24        .shape {
25            position: absolute;
26            width: 100%;
27            height: 100%;
28            background: linear-gradient(45deg, #ff00ff, #ff6600, #00ff66, #0066ff, #ff00ff);
29            background-size: 400% 400%;
30            animation: gradientShift 8s ease-in-out infinite;
31            opacity: 0.7;
32            transform-origin: center;
33        }
34        .shape:nth-child(1) {
35            animation-delay: 0s;
36            transform: rotate(0deg) scale(1);
37        }
38        .shape:nth-child(2) {
39            animation-delay: 1s;
40            transform: rotate(45deg) scale(1.2);
41        }
42        .shape:nth-child(3) {
43            animation-delay: 2s;
44            transform: rotate(-45deg) scale(0.8);
45        }
46        .shape:nth-child(4) {
47            animation-delay: 3s;
48            transform: rotate(90deg) scale(1.1);
49        }
50        .shape:nth-child(5) {
51            animation-delay: 4s;
52            transform: rotate(-90deg) scale(0.9);
53        }
54        .shape:nth-child(6) {
55            animation-delay: 5s;
56            transform: rotate(180deg) scale(1.3);
57        }
58        .shape:nth-child(7) {
59            animation-delay: 6s;
60            transform: rotate(0deg) scale(0.7);
61        }
62        .shape:nth-child(8) {
63            animation-delay: 7s;
64            transform: rotate(30deg) scale(1.4);
65        }
66        .shape:nth-child(9) {
67            animation-delay: 8s;
68            transform: rotate(-30deg) scale(0.6);
69        }
70        @keyframes gradientShift {
71            0% { background-position: 0% 50%; }
72            50% { background-position: 100% 50%; }
73            100% { background-position: 0% 50%; }
74        }
75    </style>
76</head>
77<body>
78    <div class="container">
79        <div class="shape"></div>
80        <div class="shape"></div>
81        <div class="shape"></div>
82        <div class="shape"></div>
83        <div class="shape"></div>
84        <div class="shape"></div>
85        <div class="shape"></div>
86        <div class="shape"></div>
87        <div class="shape"></div>
88    </div>
89</body>
90</html>