animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loaders (WIP)

model output

LLaMA 4 Scout

Loaders (WIP)

A 0.73T 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>Animation</title>
7    <style>
8        body {
9            background-color: #FF3737;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .logo {
18            position: relative;
19        }
20        .logo::before {
21            content: "";
22            position: absolute;
23            width: 40px;
24            height: 40px;
25            background-color: rgba(255, 255, 255, 0.2);
26            border-radius: 50%;
27            top: 50%;
28            left: 50%;
29            transform: translate(-50%, -50%);
30        }
31        .logo svg {
32            width: 24px;
33            height: 24px;
34        }
35    </style>
36</head>
37<body>
38    <div class="logo">
39        <svg viewBox="0 0 24 24">
40            <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#FFFFFF"/>
41            <path d="M12 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z" fill="#FFFFFF"/>
42        </svg>
43    </div>
44
45    <script>
46        let logo = document.querySelector('.logo');
47        let isFirstIcon = true;
48
49        function changeIcon() {
50            if (isFirstIcon) {
51                logo.innerHTML = `<svg viewBox="0 0 24 24"><path d="M7 4v16c-1.1 0-2-.9-2-2s.9-2 2-2h6c1.1 0 2 .9 2 2v-16c0 1.1-.9 2-2 2h-6zm10 0v16c-1.1 0-2-.9-2-2s.9-2 2-2h6c1.1 0 2 .9 2 2v-16c0 1.1-.9 2-2 2h-6z" fill="#FFFFFF"/></svg>`;
52            } else {
53                logo.innerHTML = `<svg viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#FFFFFF"/><path d="M12 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z" fill="#FFFFFF"/></svg>`;
54            }
55            isFirstIcon = !isFirstIcon;
56        }
57
58        setInterval(changeIcon, 1000);
59    </script>
60</body>
61</html>