animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Simple Spinner

model output

Qwen3-VL-8B-Instruct

Simple Spinner

A 0.66T 0.25
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>Rotating Circle Animation</title>
7<style>
8  body {
9    background-color: #4a2f7a;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .circle {
17    width: 50px;
18    height: 50px;
19    border: 2px solid #4a2f7a;
20    border-radius: 50%;
21    position: relative;
22    animation: rotate 2s linear infinite;
23  }
24  .dot {
25    width: 10px;
26    height: 10px;
27    border-radius: 50%;
28    position: absolute;
29    top: 50%;
30    left: 50%;
31    transform: translate(-50%, -50%);
32    background-color: #4a2f7a;
33  }
34  .dot:nth-child(1) {
35    animation: colorChange 2s linear infinite;
36    background-color: #4a2f7a;
37  }
38  .dot:nth-child(2) {
39    animation: colorChange 2s linear infinite 0.5s;
40    background-color: #4a2f7a;
41  }
42  @keyframes rotate {
43    0% { transform: rotate(0deg); }
44    100% { transform: rotate(360deg); }
45  }
46  @keyframes colorChange {
47    0%, 100% { background-color: #4a2f7a; }
48    25% { background-color: #4a2f7a; }
49    50% { background-color: #ff6b6b; }
50    75% { background-color: #4a2f7a; }
51  }
52</style>
53</head>
54<body>
55  <div class="circle">
56    <div class="dot"></div>
57    <div class="dot"></div>
58  </div>
59</body>
60</html>