animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Tiny Single Element Loading Animations

model output

Qwen3-VL-8B-Instruct

Tiny Single Element Loading Animations

A 0.73T 0.25
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>Circle Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: white;
12            overflow: hidden;
13        }
14        .circle {
15            position: absolute;
16            top: 20px;
17            left: 20px;
18            width: 20px;
19            height: 20px;
20            border-radius: 50%;
21            border: 1px solid #000;
22            animation: grow 1s ease-in-out forwards;
23        }
24        @keyframes grow {
25            0% {
26                width: 0;
27                height: 0;
28            }
29            100% {
30                width: 20px;
31                height: 20px;
32            }
33        }
34    </style>
35</head>
36<body>
37    <div class="circle"></div>
38
39    <script>
40        // No additional JavaScript needed for this simple animation
41    </script>
42</body>
43</html>