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

model output

Qwen3-VL-8B-Instruct

Single Element Spinner

A 0.75T 0.18
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>Animation</title>
7<style>
8  body {
9    background-color: black;
10    margin: 0;
11    padding: 0;
12    overflow: hidden;
13    display: flex;
14    justify-content: center;
15    align-items: center;
16    height: 100vh;
17  }
18  .arc {
19    width: 20px;
20    height: 20px;
21    border: 2px solid cyan;
22    border-radius: 50%;
23    position: absolute;
24    top: 10px;
25    left: 10px;
26    transform-origin: center;
27    animation: drawArc 1s ease-in-out forwards;
28  }
29  @keyframes drawArc {
30    0% {
31      transform: rotate(0deg);
32      border-color: cyan;
33    }
34    100% {
35      transform: rotate(180deg);
36      border-color: cyan;
37    }
38  }
39</style>
40</head>
41<body>
42  <div class="arc"></div>
43</body>
44</html>