← back to Exploring Bourboncompare with ground truth →
model output
GPT-5.4
Exploring Bourbon
A 0.90T 0.26
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>Rounded Square Pulse</title>
7<style>
8 :root{
9 --bg: #7f6b6b;
10 --box: #b8d56f;
11 --box2:#aeca72;
12 --size: 50px;
13 --dur: 1.2s;
14 }
15
16 html, body {
17 margin: 0;
18 width: 100%;
19 height: 100%;
20 overflow: hidden;
21 background: var(--bg);
22 }
23
24 body{
25 display:grid;
26 place-items:center;
27 }
28
29 .shape{
30 width: var(--size);
31 height: var(--size);
32 background: linear-gradient(to bottom, #bddb72 0%, #b4cf72 65%, #adc56f 100%);
33 box-shadow:
34 0 6px 12px rgba(0,0,0,.18),
35 0 1px 0 rgba(255,255,255,.12) inset,
36 0 -1px 0 rgba(0,0,0,.08) inset;
37 animation: morph var(--dur) ease-in-out infinite;
38 transform-origin: center;
39 }
40
41 @keyframes morph {
42 0%, 100% {
43 border-radius: 0px;
44 transform: scale(1);
45 }
46 50% {
47 border-radius: 14px;
48 transform: scale(1);
49 }
50 }
51</style>
52</head>
53<body>
54 <div class="shape"></div>
55</body>
56</html>