model output
Claude Sonnet 4.6

Such Spinners, Much Loading
A 0.90T 0.34
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>Shape Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: #ffffff;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    min-height: 100vh;
20    overflow: hidden;
21  }
22
23  .shape {
24    width: 50px;
25    height: 50px;
26    background-color: #333333;
27    animation: morph 2s ease-in-out infinite;
28  }
29
30  @keyframes morph {
31    0% {
32      border-radius: 50%;
33      transform: rotate(0deg);
34    }
35    25% {
36      border-radius: 8px;
37      transform: rotate(45deg);
38    }
39    50% {
40      border-radius: 50%;
41      transform: rotate(0deg);
42    }
43    75% {
44      border-radius: 8px;
45      transform: rotate(-45deg);
46    }
47    100% {
48      border-radius: 50%;
49      transform: rotate(0deg);
50    }
51  }
52</style>
53</head>
54<body>
55  <div class="shape"></div>
56</body>
57</html>