animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to background wave animation

model output

Qwen3-VL-8B-Instruct

background wave animation

A 0.75T 0.26
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>Blue Gradient Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    overflow: hidden;
12    background-color: #0055a4;
13    width: 100vw;
14    height: 100vh;
15    display: flex;
16    justify-content: center;
17    align-items: center;
18  }
19  .shape {
20    position: absolute;
21    width: 300px;
22    height: 300px;
23    border-radius: 50%;
24    background: linear-gradient(135deg, #0077cc, #00aaff);
25    animation: expand 4s ease-in-out infinite alternate;
26    transform-origin: left center;
27  }
28  @keyframes expand {
29    0% {
30      transform: scale(0.5) translateX(-100px);
31    }
32    100% {
33      transform: scale(1.5) translateX(0px);
34    }
35  }
36</style>
37</head>
38<body>
39  <div class="shape"></div>
40</body>
41</html>