animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Screw 2

model output

LLaMA 4 Scout

Only CSS: Screw 2

A 0.42T 0.00
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>Document</title>
7    <style>
8        body {
9            background-color: #1a1d23;
10            font-family: Arial, sans-serif;
11            margin: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16        }
17        .logo {
18            font-size: 50px;
19            font-weight: bold;
20            white-space: nowrap;
21        }
22        @keyframes spin {
23            0% {
24                transform: rotate(0deg);
25            }
26            100% {
27                transform: rotate(360deg);
28            }
29        }
30        .logo span {
31            position: relative;
32        }
33        .logo span::before {
34            content: "";
35            position: absolute;
36            top: 0;
37            left: 0;
38            width: 100%;
39            height: 100%;
40            background: 
41                linear-gradient(90deg, white 0%, white 100%), 
42                linear-gradient(0deg, black 0%, black 100%);
43            background-size: 30px 30px, 30px 30px;
44            background-position: 0% 0%, 0% 0%;
45            background-repeat: no-repeat;
46            animation: spin 10s linear infinite;
47            clip-path: 
48                polygon(20% 0%, 50% 30%, 80% 0%, 100% 50%, 80% 100%, 50% 70%, 20% 100%, 0% 50%);
49            opacity: 0.5;
50        }
51    </style>
52</head>
53<body>
54    <div class="logo">SCREW</div>
55</body>
56</html>