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.93T 0.28
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>Pulse Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: #c7004a;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18  .pulse-container {
19    display: flex;
20    justify-content: center;
21    align-items: center;
22  }
23  .dot {
24    width: 10px;
25    height: 10px;
26    border-radius: 50%;
27    background-color: white;
28    margin: 0 2px;
29    animation: pulse 1.5s ease-in-out infinite;
30    opacity: 0;
31  }
32  .dot:nth-child(1) {
33    animation-delay: 0s;
34  }
35  .dot:nth-child(2) {
36    animation-delay: 0.2s;
37  }
38  .dot:nth-child(3) {
39    animation-delay: 0.4s;
40  }
41  .dot:nth-child(4) {
42    animation-delay: 0.6s;
43  }
44  .dot:nth-child(5) {
45    animation-delay: 0.8s;
46  }
47  @keyframes pulse {
48    0%, 100% {
49      transform: scale(0.5);
50      opacity: 0.5;
51    }
52    50% {
53      transform: scale(1.2);
54      opacity: 1;
55    }
56  }
57</style>
58</head>
59<body>
60  <div class="pulse-container">
61    <div class="dot"></div>
62    <div class="dot"></div>
63    <div class="dot"></div>
64    <div class="dot"></div>
65    <div class="dot"></div>
66  </div>
67</body>
68</html>