animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Google+ Jingle

model output

Qwen3-VL-8B-Instruct

Google+ Jingle

A 0.51T 0.33
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>Bell Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: white;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16        }
17        .bell {
18            width: 50px;
19            height: 50px;
20            position: relative;
21            animation: swing 1.5s ease-in-out infinite alternate;
22        }
23        .bell:before {
24            content: "";
25            position: absolute;
26            top: 0;
27            left: 0;
28            width: 100%;
29            height: 100%;
30            background: linear-gradient(to bottom, #ccc, #aaa);
31            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
32            transform: rotate(10deg);
33        }
34        .bell:after {
35            content: "";
36            position: absolute;
37            top: 10px;
38            left: 10px;
39            width: 30px;
40            height: 30px;
41            background: #ccc;
42            border-radius: 50%;
43            z-index: 1;
44        }
45        .bell .clapper {
46            position: absolute;
47            bottom: 0;
48            left: 50%;
49            transform: translateX(-50%);
50            width: 10px;
51            height: 10px;
52            background: #aaa;
53            border-radius: 50%;
54            z-index: 2;
55        }
56        .bell .clapper:before {
57            content: "";
58            position: absolute;
59            top: -5px;
60            left: 50%;
61            transform: translateX(-50%);
62            width: 10px;
63            height: 10px;
64            background: #aaa;
65            border-radius: 50%;
66            z-index: 3;
67        }
68        @keyframes swing {
69            0% {
70                transform: rotate(0deg) scale(1);
71            }
72            100% {
73                transform: rotate(10deg) scale(1.05);
74            }
75        }
76    </style>
77</head>
78<body>
79    <div class="bell">
80        <div class="clapper"></div>
81    </div>
82</body>
83</html>