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