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

model output

Qwen3-VL-8B-Instruct

Simple Spinner

A 0.67T 0.40
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 Square Animation</title>
7<style>
8  body {
9    background-color: green;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .square {
17    width: 50px;
18    height: 50px;
19    background-color: yellow;
20    position: relative;
21    animation: rotate 2s linear infinite;
22  }
23  .square::before {
24    content: "";
25    position: absolute;
26    top: 0;
27    left: 0;
28    width: 100%;
29    height: 100%;
30    border: 2px solid cyan;
31    border-radius: 5px;
32    animation: pulse 2s ease-in-out infinite;
33  }
34  @keyframes rotate {
35    0% { transform: rotate(0deg); }
36    100% { transform: rotate(360deg); }
37  }
38  @keyframes pulse {
39    0%, 100% { border-width: 2px; }
40    50% { border-width: 4px; }
41  }
42</style>
43</head>
44<body>
45  <div class="square"></div>
46</body>
47</html>