animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

Qwen3-VL-8B-Instruct

Animated Concepts #3

A 0.51T 0.30
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 X</title>
7<style>
8  body {
9    background-color: #121212;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .x {
17    position: relative;
18    width: 20px;
19    height: 20px;
20    background-color: #ff6b6b;
21    transform-origin: center;
22    animation: rotateAndShrink 2s ease-in-out infinite alternate;
23  }
24  .x::before, .x::after {
25    content: '';
26    position: absolute;
27    width: 2px;
28    height: 20px;
29    background-color: #ff6b6b;
30    top: 0;
31    left: 0;
32  }
33  .x::before {
34    transform: rotate(45deg);
35  }
36  .x::after {
37    transform: rotate(-45deg);
38  }
39  @keyframes rotateAndShrink {
40    0%, 100% {
41      transform: rotate(0deg) scale(1);
42    }
43    50% {
44      transform: rotate(180deg) scale(0.5);
45    }
46  }
47</style>
48</head>
49<body>
50  <div class="x"></div>
51</body>
52</html>