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.78T 0.23
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>Animated Dots</title>
7<style>
8  body {
9    background-color: #ff4d4d;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .dot-container {
17    position: relative;
18  }
19  .dot {
20    width: 8px;
21    height: 8px;
22    background-color: white;
23    border-radius: 50%;
24    position: absolute;
25    animation: bounce 1.5s ease-in-out infinite alternate;
26  }
27  .dot:nth-child(1) {
28    top: 50%;
29    left: 50%;
30    animation-delay: 0s;
31  }
32  .dot:nth-child(2) {
33    top: 50%;
34    left: 50%;
35    animation-delay: 0.2s;
36  }
37  @keyframes bounce {
38    0% {
39      transform: translateY(0) rotate(0deg);
40    }
41    100% {
42      transform: translateY(-10px) rotate(180deg);
43    }
44  }
45</style>
46</head>
47<body>
48  <div class="dot-container">
49    <div class="dot"></div>
50    <div class="dot"></div>
51  </div>
52</body>
53</html>