← back to Only CSS: Sunset Beachcompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Sunset Beach
A 0.58T 0.25
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>