animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Thinking about SVG-preloaders

model output

Qwen3-VL-8B-Instruct

Thinking about SVG-preloaders

A 0.48T 0.33
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Color Circle Animation</title>
6    <style>
7        body {
8            display: flex;
9            justify-content: center;
10            align-items: center;
11            height: 100vh;
12            margin: 0;
13            background: black;
14        }
15        .circle {
16            position: relative;
17            width: 100px;
18            height: 100px;
19        }
20        .dot {
21            position: absolute;
22            width: 10px;
23            height: 10px;
24            border-radius: 50%;
25            top: 50%;
26            left: 50%;
27            transform: translate(-50%, -50%);
28            animation: rotate 4s linear infinite;
29        }
30        .dot:nth-child(1) { background: #00ff00; }
31        .dot:nth-child(2) { background: #00b3ff; }
32        .dot:nth-child(3) { background: #ff00ff; }
33        .dot:nth-child(4) { background: #ff9900; }
34        .dot:nth-child(5) { background: #ff6600; }
35        .dot:nth-child(6) { background: #cc3300; }
36        .dot:nth-child(7) { background: #993300; }
37        .dot:nth-child(8) { background: #663300; }
38        .dot:nth-child(9) { background: #333300; }
39        .dot:nth-child(10) { background: #003300; }
40        .dot:nth-child(11) { background: #006633; }
41        .dot:nth-child(12) { background: #009933; }
42        @keyframes rotate {
43            0% { transform: translate(-50%, -50%) rotate(0deg); }
44            100% { transform: translate(-50%, -50%) rotate(360deg); }
45        }
46    </style>
47</head>
48<body>
49    <div class="circle">
50        <div class="dot"></div>
51        <div class="dot"></div>
52        <div class="dot"></div>
53        <div class="dot"></div>
54        <div class="dot"></div>
55        <div class="dot"></div>
56        <div class="dot"></div>
57        <div class="dot"></div>
58        <div class="dot"></div>
59        <div class="dot"></div>
60        <div class="dot"></div>
61        <div class="dot"></div>
62    </div>
63</body>
64</html>