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

model output

LLaMA 4 Scout

Only CSS: Sunset Beach

A 0.58T 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>Red Icon Animation</title>
7    <style>
8        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .icon {
17            position: relative;
18            width: 100px;
19            height: 100px;
20        }
21        .icon::before, .icon::after {
22            content: "";
23            position: absolute;
24            background-color: red;
25        }
26        .icon::before {
27            top: 0;
28            left: 0;
29            width: 100%;
30            height: 100%;
31            border-radius: 50%;
32            clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
33            animation: pulse 2s infinite;
34        }
35        .icon::after {
36            top: 70%;
37            left: 50%;
38            transform: translateX(-50%);
39            width: 20px;
40            height: 10px;
41            border-radius: 50%;
42        }
43        @keyframes pulse {
44            0% {
45                transform: scale(1);
46                opacity: 1;
47            }
48            50% {
49                transform: scale(1.2);
50                opacity: 0.8;
51            }
52            100% {
53                transform: scale(1);
54                opacity: 1;
55            }
56        }
57    </style>
58</head>
59<body>
60    <div class="icon"></div>
61</body>
62</html>