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

model output

Qwen3-VL-8B-Instruct

Exploring Bourbon

A 0.70T 0.27
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 Coin</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: #7fd1c2;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18  .coin {
19    width: 50px;
20    height: 50px;
21    background: linear-gradient(135deg, #f5a623, #f5c53e);
22    border-radius: 50%;
23    position: relative;
24    animation: spin 2s linear infinite;
25    transform: translate(-50%, -50%);
26  }
27  .coin::before {
28    content: '';
29    position: absolute;
30    top: 5px;
31    left: 5px;
32    width: 10px;
33    height: 10px;
34    background: #f5a623;
35    border-radius: 50%;
36  }
37  .coin::after {
38    content: '';
39    position: absolute;
40    top: 10px;
41    left: 15px;
42    width: 5px;
43    height: 5px;
44    background: #f5a623;
45    border-radius: 50%;
46  }
47  @keyframes spin {
48    0% {
49      transform: translate(-50%, -50%) rotate(0deg);
50    }
51    100% {
52      transform: translate(-50%, -50%) rotate(360deg);
53    }
54  }
55</style>
56</head>
57<body>
58  <div class="coin"></div>
59</body>
60</html>