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.76T 0.14
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>Color Changing Square</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: #b31217;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16  }
17  .square {
18    width: 50px;
19    height: 50px;
20    background-color: #00bfa5;
21    transition: background-color 0.5s ease;
22  }
23</style>
24</head>
25<body>
26  <div class="square" id="square"></div>
27
28  <script>
29    const square = document.getElementById('square');
30    const colors = ['#00bfa5', '#f3d13e', '#d16b4a', '#6c757d'];
31
32    function changeColor() {
33      const randomColor = colors[Math.floor(Math.random() * colors.length)];
34      square.style.backgroundColor = randomColor;
35    }
36
37    // Change color every 1.5 seconds
38    setInterval(changeColor, 1500);
39  </script>
40</body>
41</html>