model output
Claude Sonnet 4.6

CSS Spinners
A 0.86T 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>Shape Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: white;
16  }
17
18  .teal-section {
19    width: 100%;
20    height: 245px;
21    background-color: #009aa0;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25    position: relative;
26  }
27
28  .shape {
29    width: 22px;
30    height: 22px;
31    border: 2px solid rgba(255, 255, 255, 0.85);
32    background: transparent;
33    position: absolute;
34    top: 50%;
35    left: 50%;
36    transform: translate(-50%, -50%) rotate(45deg);
37    border-radius: 2px;
38    animation: morphShape 2s ease-in-out infinite;
39  }
40
41  @keyframes morphShape {
42    0% {
43      border-radius: 2px;
44      transform: translate(-50%, -50%) rotate(45deg);
45    }
46    25% {
47      border-radius: 30%;
48      transform: translate(-50%, -50%) rotate(22.5deg);
49    }
50    50% {
51      border-radius: 50%;
52      transform: translate(-50%, -50%) rotate(0deg);
53    }
54    75% {
55      border-radius: 30%;
56      transform: translate(-50%, -50%) rotate(22.5deg);
57    }
58    100% {
59      border-radius: 2px;
60      transform: translate(-50%, -50%) rotate(45deg);
61    }
62  }
63</style>
64</head>
65<body>
66  <div class="teal-section">
67    <div class="shape"></div>
68  </div>
69</body>
70</html>