animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to flat loading animate

model output

Qwen3-VL-8B-Instruct

flat loading animate

A 0.36T 0.00
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>Two Circles Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    margin: 0;
14    background: white;
15  }
16  .container {
17    position: relative;
18    width: 100px;
19    height: 100px;
20  }
21  .circle {
22    position: absolute;
23    width: 30px;
24    height: 30px;
25    border-radius: 50%;
26    transition: transform 0.5s ease-in-out;
27  }
28  .circle-red {
29    background: #ff6b6b;
30    left: 20px;
31    top: 20px;
32  }
33  .circle-blue {
34    background: #2980b9;
35    left: 40px;
36    top: 20px;
37  }
38  .circle-red:hover {
39    transform: scale(1.2) rotate(180deg);
40  }
41  .circle-blue:hover {
42    transform: scale(1.2) rotate(180deg);
43  }
44</style>
45</head>
46<body>
47  <div class="container">
48    <div class="circle circle-red"></div>
49    <div class="circle circle-blue"></div>
50  </div>
51</body>
52</html>