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

model output

Qwen3-VL-8B-Instruct

Only CSS: Sunset Beach

A 0.87T 0.26
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Red Blob Animation</title>
6    <style>
7        body {
8            display: flex;
9            justify-content: center;
10            align-items: center;
11            height: 100vh;
12            background: black;
13            overflow: hidden;
14        }
15        .blob {
16            width: 150px;
17            height: 150px;
18            background: red;
19            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
20            position: relative;
21            animation: pulse 2s ease-in-out infinite alternate;
22        }
23        .blob::before {
24            content: '';
25            position: absolute;
26            bottom: -20px;
27            left: 50%;
28            transform: translateX(-50%);
29            width: 80px;
30            height: 10px;
31            background: red;
32            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
33        }
34        @keyframes pulse {
35            0% {
36                transform: scale(1);
37            }
38            50% {
39                transform: scale(1.1);
40            }
41            100% {
42                transform: scale(1);
43            }
44        }
45    </style>
46</head>
47<body>
48    <div class="blob"></div>
49</body>
50</html>