animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Wavy Loading Animations

model output

Qwen3-VL-8B-Instruct

Wavy Loading Animations

A 0.42T 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>Animation</title>
7<style>
8  body {
9    background-color: #f5f5f5;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .logo {
17    width: 60px;
18    height: 60px;
19    background: linear-gradient(to right, #333, #666);
20    display: flex;
21    justify-content: center;
22    align-items: center;
23    animation: pulse 1.5s ease-in-out infinite alternate;
24  }
25  .logo::before {
26    content: "";
27    width: 0;
28    height: 0;
29    border-left: 10px solid transparent;
30    border-right: 10px solid transparent;
31    border-top: 20px solid #fff;
32    position: absolute;
33    top: 50%;
34    left: 50%;
35    transform: translate(-50%, -50%);
36  }
37  .logo::after {
38    content: "";
39    width: 0;
40    height: 0;
41    border-left: 10px solid transparent;
42    border-right: 10px solid transparent;
43    border-top: 20px solid #fff;
44    position: absolute;
45    top: 50%;
46    left: 50%;
47    transform: translate(-50%, -50%);
48    animation: pulse 1.5s ease-in-out infinite alternate;
49  }
50  @keyframes pulse {
51    0% {
52      transform: translate(-50%, -50%) scale(0.8);
53    }
54    100% {
55      transform: translate(-50%, -50%) scale(1.2);
56    }
57  }
58</style>
59</head>
60<body>
61  <div class="logo"></div>
62</body>
63</html>