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

model output

Qwen3-VL-8B-Instruct

Tiny Single Element Loading Animations

A 0.66T 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>Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: #fff;
12            overflow: hidden;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17        }
18        .line {
19            position: absolute;
20            top: 10px;
21            left: 10px;
22            width: 2px;
23            height: 20px;
24            background-color: #000;
25            transform-origin: center;
26            animation: pulse 1.5s ease-in-out infinite alternate;
27        }
28        @keyframes pulse {
29            0% {
30                transform: scale(1) rotate(0deg);
31            }
32            100% {
33                transform: scale(1.2) rotate(180deg);
34            }
35        }
36    </style>
37</head>
38<body>
39    <div class="line"></div>
40
41    <script>
42        // No JavaScript needed for this simple animation
43    </script>
44</body>
45</html>