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.76T 0.27
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>Expanding Circle 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-color: white;
15  }
16  .circle {
17    width: 50px;
18    height: 50px;
19    border-radius: 50%;
20    background: radial-gradient(circle, #ff5e5e 0%, #ff8a8a 100%);
21    display: flex;
22    justify-content: center;
23    align-items: center;
24    animation: expand 1s ease-out forwards;
25  }
26  .inner-circle {
27    width: 20px;
28    height: 20px;
29    border-radius: 50%;
30    background: radial-gradient(circle, #ff5e5e 0%, #ff8a8a 100%);
31  }
32  @keyframes expand {
33    0% {
34      transform: scale(0.5);
35    }
36    100% {
37      transform: scale(1.5);
38    }
39  }
40</style>
41</head>
42<body>
43  <div class="circle">
44    <div class="inner-circle"></div>
45  </div>
46</body>
47</html>