animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Motion Table - Orbit

model output

Qwen3-VL-8B-Instruct

Motion Table - Orbit

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