animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Such Spinners, Much Loading

model output

LLaMA 4 Scout

Such Spinners, Much Loading

A 0.86T 0.24
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>Dot Animation</title>
7    <style>
8        body {
9            background-color: #fff;
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            width: 100vw;
17        }
18        .dot {
19            position: relative;
20            width: 20px;
21            height: 20px;
22            border-radius: 50%;
23            background-color: #000;
24            transform: scale(1);
25            transition: transform 0.5s ease-in-out;
26        }
27        .dot::before {
28            content: "";
29            position: absolute;
30            top: 50%;
31            left: 50%;
32            transform: translate(-50%, -50%);
33            width: 40px;
34            height: 40px;
35            border-radius: 50%;
36            border: 2px solid #000;
37            opacity: 0;
38            transition: opacity 0.5s ease-in-out;
39        }
40        .animate {
41            animation: pulse 2s infinite;
42        }
43        @keyframes pulse {
44            0% {
45                transform: scale(1);
46            }
47            50% {
48                transform: scale(1.2);
49                border-color: #fff;
50            }
51            100% {
52                transform: scale(1);
53            }
54        }
55    </style>
56</head>
57<body>
58    <div class="dot animate"></div>
59</body>
60</html>