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.53T 0.25
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  .triangle {
17    width: 0;
18    height: 0;
19    border-left: 10px solid transparent;
20    border-right: 10px solid transparent;
21    border-bottom: 20px solid #888;
22    animation: expand 1s ease-in-out forwards;
23    transform-origin: center bottom;
24  }
25  @keyframes expand {
26    0% {
27      width: 0;
28      height: 0;
29      border-bottom: 20px solid #888;
30    }
31    100% {
32      width: 0;
33      height: 0;
34      border-bottom: 20px solid #888;
35      transform: rotate(180deg);
36    }
37  }
38</style>
39</head>
40<body>
41  <div class="triangle"></div>
42</body>
43</html>