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

model output

LLaMA 4 Scout

Google+ Jingle

A 0.67T 0.22
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        .bell {
9            position: absolute;
10            top: 50px;
11            left: 50px;
12            width: 30px;
13            height: 40px;
14            background-color: #ccc;
15            border-radius: 50%;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19        }
20        .bell::before {
21            content: '';
22            position: absolute;
23            top: -5px;
24            left: 50%;
25            transform: translateX(-50%);
26            width: 5px;
27            height: 5px;
28            background-color: #ccc;
29            border-radius: 50%;
30        }
31        .bell .face {
32            position: relative;
33            width: 100%;
34            height: 100%;
35            background-color: #ccc;
36            border-radius: 50%;
37            display: flex;
38            justify-content: center;
39            align-items: center;
40        }
41        .bell .face .eyes {
42            position: absolute;
43            top: 30%;
44            left: 40%;
45            right: 40%;
46            font-size: 0;
47        }
48        .bell .face .eyes::before {
49            content: '';
50            position: absolute;
51            top: 0;
52            left: 0;
53            width: 2px;
54            height: 2px;
55            background-color: #666;
56            border-radius: 50%;
57        }
58        .bell .face .eyes::after {
59            content: '';
60            position: absolute;
61            top: 0;
62            right: 0;
63            width: 2px;
64            height: 2px;
65            background-color: #666;
66            border-radius: 50%;
67        }
68        .bell .face .mouth {
69            position: absolute;
70            top: 50%;
71            left: 50%;
72            transform: translate(-50%, -50%);
73            width: 10px;
74            height: 5px;
75            background-color: #666;
76            border-radius: 2px;
77        }
78        .animate {
79            animation: swing 2s infinite;
80        }
81        @keyframes swing {
82            0% {
83                transform: rotate(0deg);
84            }
85            50% {
86                transform: rotate(10deg);
87            }
88            100% {
89                transform: rotate(0deg);
90            }
91        }
92    </style>
93</head>
94<body>
95    <div class="bell animate">
96        <div class="face">
97            <div class="eyes"></div>
98            <div class="mouth"></div>
99        </div>
100    </div>
101</body>
102</html>