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

model output

LLaMA 4 Scout

Wavy Loading Animations

A 0.64T 0.21
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: #fff;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .triangle {
17            width: 0;
18            height: 0;
19            border-style: solid;
20            border-width: 0 0 10px 20px;
21            border-color: transparent transparent #333 transparent;
22        }
23        .animate {
24            animation: move 5s infinite;
25        }
26        @keyframes move {
27            0% {
28                transform: translateX(0);
29            }
30            100% {
31                transform: translateX(200px);
32            }
33        }
34    </style>
35</head>
36<body>
37    <div class="triangle animate"></div>
38</body>
39</html>