animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to SVG Loading icons

model output

LLaMA 4 Scout

SVG Loading icons

A 0.67T 0.19
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>Animation</title>
7    <style>
8        body {
9            background-color: #333;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .dot {
18            position: relative;
19            width: 10px;
20            height: 10px;
21            background-color: orange;
22            border-radius: 50%;
23            animation: move 8s infinite;
24        }
25        @keyframes move {
26            0% {
27                transform: translateY(0) translateX(0);
28            }
29            50% {
30                transform: translateY(-20px) translateX(0);
31            }
32            100% {
33                transform: translateY(0) translateX(0);
34            }
35        }
36        .dot:nth-child(1) {
37            animation-delay: 0s;
38        }
39        .dot:nth-child(2) {
40            animation-delay: 0.2s;
41        }
42        .dot:nth-child(3) {
43            animation-delay: 0.4s;
44        }
45    </style>
46</head>
47<body>
48    <div class="dot"></div>
49    <div class="dot"></div>
50    <div class="dot"></div>
51</body>
52</html>