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

model output

Qwen3-VL-8B-Instruct

Apple Loading Bar

A 0.60T 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>Apple Logo Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .apple {
17            width: 100px;
18            height: 100px;
19            background: white;
20            position: relative;
21            animation: pulse 1.5s ease-in-out;
22        }
23        .apple::before {
24            content: "";
25            position: absolute;
26            top: 20px;
27            left: 40px;
28            width: 20px;
29            height: 20px;
30            background: white;
31            border-radius: 50%;
32        }
33        .apple::after {
34            content: "";
35            position: absolute;
36            top: 20px;
37            left: 60px;
38            width: 20px;
39            height: 20px;
40            background: white;
41            border-radius: 50%;
42        }
43        .line {
44            width: 100px;
45            height: 2px;
46            background: white;
47            position: absolute;
48            bottom: 50px;
49            left: 50%;
50            transform: translateX(-50%);
51            animation: fill 1.5s ease-in-out forwards;
52        }
53        @keyframes pulse {
54            0% { transform: scale(1); }
55            50% { transform: scale(1.1); }
56            100% { transform: scale(1); }
57        }
58        @keyframes fill {
59            0% { width: 0; }
60            100% { width: 100px; }
61        }
62    </style>
63</head>
64<body>
65    <div class="apple"></div>
66    <div class="line"></div>
67</body>
68</html>