← back to Exploring Bourboncompare with ground truth →
model output
Claude Sonnet 4.6
Exploring Bourbon
A 0.87T 0.30
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 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 width: 1024px;
16 height: 768px;
17 background-color: #7d6568;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 overflow: hidden;
22 }
23
24 .box {
25 width: 46px;
26 height: 46px;
27 background: linear-gradient(to bottom, #d4e87a, #a8c84a);
28 animation: morph 1.2s ease-in-out infinite alternate;
29 }
30
31 @keyframes morph {
32 0% {
33 border-radius: 4px;
34 }
35 50% {
36 border-radius: 40%;
37 }
38 100% {
39 border-radius: 4px;
40 }
41 }
42</style>
43</head>
44<body>
45 <div class="box"></div>
46</body>
47</html>