animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

Qwen3-VL-8B-Instruct

Animated Concepts #3

A 0.80T 0.12
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: #121212;
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 #e05d4a;
20    border-radius: 50%;
21    position: relative;
22    animation: rotate 2s linear infinite;
23  }
24  .dot {
25    width: 10px;
26    height: 10px;
27    background-color: #e05d4a;
28    border-radius: 50%;
29    position: absolute;
30    top: 50%;
31    left: 50%;
32    transform: translate(-50%, -50%);
33    animation: dotMove 2s ease-in-out infinite;
34  }
35  @keyframes rotate {
36    0% { transform: rotate(0deg); }
37    100% { transform: rotate(360deg); }
38  }
39  @keyframes dotMove {
40    0% { transform: translate(-50%, -50%) rotate(0deg); }
41    25% { transform: translate(-50%, -50%) rotate(90deg); }
42    50% { transform: translate(-50%, -50%) rotate(180deg); }
43    75% { transform: translate(-50%, -50%) rotate(270deg); }
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>
52</body>
53</html>