← back to Thinking about SVG-preloaderscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Thinking about SVG-preloaders
A 0.48T 0.33
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>