← back to Only CSS: Sunset Beachcompare with ground truth →
model output
GPT-5.4
Only CSS: Sunset Beach
A 0.95T 0.27
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 Blob Loop</title>
7<style>
8 :root{
9 --bg:#000;
10 --red:#ff0a00;
11 --dur:1.15s;
12 --ease:cubic-bezier(.42,0,.58,1);
13 }
14
15 html,body{
16 margin:0;
17 width:100%;
18 height:100%;
19 background:var(--bg);
20 overflow:hidden;
21 }
22
23 .stage{
24 position:relative;
25 width:100vw;
26 height:100vh;
27 background:#000;
28 }
29
30 .blob{
31 position:absolute;
32 left:50%;
33 top:50%;
34 width:min(30vw,300px);
35 aspect-ratio:1 / 1;
36 transform:translate(-50%,-50%);
37 }
38
39 svg{
40 display:block;
41 width:100%;
42 height:100%;
43 overflow:visible;
44 }
45
46 .main{
47 fill:var(--red);
48 animation: mainWobble var(--dur) var(--ease) infinite;
49 transform-origin:50% 44%;
50 }
51
52 .mid{
53 fill:var(--red);
54 animation: midWobble var(--dur) var(--ease) infinite;
55 transform-origin:50% 58%;
56 }
57
58 .drop{
59 fill:var(--red);
60 animation: dropWobble var(--dur) var(--ease) infinite;
61 transform-origin:50% 74%;
62 }
63
64 @keyframes mainWobble{
65 0% { transform:translateX(0px) scaleX(1) scaleY(1); }
66 16% { transform:translateX(-2px) scaleX(1.01) scaleY(.995); }
67 33% { transform:translateX(1px) scaleX(.995) scaleY(1.005); }
68 50% { transform:translateX(0px) scaleX(1.005) scaleY(.998); }
69 66% { transform:translateX(-1px) scaleX(.998) scaleY(1.003); }
70 83% { transform:translateX(1px) scaleX(1.003) scaleY(.998); }
71 100% { transform:translateX(0px) scaleX(1) scaleY(1); }
72 }
73
74 @keyframes midWobble{
75 0% { transform:translate(0px,0px) scaleX(1) scaleY(1); }
76 16% { transform:translate(-4px,1px) scaleX(1.03) scaleY(.97); }
77 33% { transform:translate(3px,0px) scaleX(.97) scaleY(1.03); }
78 50% { transform:translate(0px,1px) scaleX(1.02) scaleY(.98); }
79 66% { transform:translate(-3px,0px) scaleX(.98) scaleY(1.02); }
80 83% { transform:translate(2px,1px) scaleX(1.015) scaleY(.99); }
81 100% { transform:translate(0px,0px) scaleX(1) scaleY(1); }
82 }
83
84 @keyframes dropWobble{
85 0% { transform:translate(0px,0px) scaleX(1) scaleY(1); }
86 16% { transform:translate(-5px,1px) scaleX(1.06) scaleY(.95); }
87 33% { transform:translate(4px,-1px) scaleX(.95) scaleY(1.05); }
88 50% { transform:translate(0px,0px) scaleX(1.04) scaleY(.97); }
89 66% { transform:translate(-3px,1px) scaleX(.97) scaleY(1.03); }
90 83% { transform:translate(2px,0px) scaleX(1.02) scaleY(.99); }
91 100% { transform:translate(0px,0px) scaleX(1) scaleY(1); }
92 }
93</style>
94</head>
95<body>
96 <div class="stage">
97 <div class="blob" aria-hidden="true">
98 <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
99 <!-- Main dome + side lips -->
100 <path class="main" d="
101 M150 48
102 C104 48, 66 82, 52 118
103 C46 133, 44 148, 44 162
104 C34 164, 26 166, 22 170
105 C18 174, 20 180, 31 182
106 C42 184, 56 185, 66 188
107 C72 190, 73 196, 72 202
108 C71 210, 76 216, 92 219
109 C116 223, 136 226, 150 226
110 C164 226, 184 224, 208 223
111 C228 222, 246 223, 258 220
112 C270 217, 274 211, 270 204
113 C267 198, 258 194, 252 191
114 C262 188, 276 186, 287 184
115 C298 182, 302 176, 298 171
116 C294 167, 286 165, 276 163
117 C276 148, 274 133, 268 118
118 C254 82, 196 48, 150 48
119 Z" />
120 <!-- Middle puddle -->
121 <path class="mid" d="
122 M150 238
123 C132 238, 114 240, 100 243
124 C90 245, 86 249, 86 253
125 C86 258, 92 261, 104 263
126 C118 265, 132 267, 144 270
127 C151 272, 156 276, 160 280
128 C164 283, 171 283, 178 280
129 C188 276, 198 273, 210 270
130 C224 267, 232 263, 232 257
131 C232 251, 226 247, 214 244
132 C198 240, 174 238, 150 238
133 Z" />
134 <!-- Lower droplet -->
135 <path class="drop" d="
136 M150 286
137 C138 286, 128 288, 120 291
138 C114 293, 112 297, 114 301
139 C116 305, 122 307, 130 308
140 C138 309, 144 311, 148 315
141 C151 318, 156 318, 161 316
142 C168 313, 176 311, 184 309
143 C192 307, 196 304, 196 300
144 C196 295, 192 292, 184 290
145 C175 287, 163 286, 150 286
146 Z" transform="translate(0,-28)"/>
147 </svg>
148 </div>
149 </div>
150</body>
151</html>