← back to Only CSS: Milkcompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Milk
A 0.57T 0.04
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>Animation</title>
7 <style>
8 body {
9 margin: 0;
10 background-color: #fff;
11 overflow: hidden;
12 }
13 .wave {
14 position: absolute;
15 bottom: 0;
16 left: 0;
17 width: 100%;
18 height: 50px;
19 background-color: #000;
20 border-radius: 20px 20px 0 0;
21 }
22 .wave::before {
23 content: "";
24 position: absolute;
25 top: 0;
26 left: 0;
27 width: 100%;
28 height: 100%;
29 background-color: #fff;
30 border-radius: 50px 50px 0 0;
31 clip-path: polygon(0 100%, 100% 100%, 100% 0, 95% 5%, 5% 5%);
32 }
33 .wave::after {
34 content: "";
35 position: absolute;
36 top: 0;
37 left: 0;
38 width: 100%;
39 height: 100%;
40 background-color: #fff;
41 border-radius: 50px 50px 0 0;
42 clip-path: polygon(0 100%, 100% 100%, 100% 0, 95% 5%, 5% 5%);
43 filter: blur(10px);
44 opacity: 0.5;
45 }
46 </style>
47</head>
48<body>
49 <div class="wave"></div>
50</body>
51</html>