model output
Claude Sonnet 4.6

flat loading animate
A 0.85T 0.31
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>Circle Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: white;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    width: 100vw;
20    height: 100vh;
21    overflow: hidden;
22  }
23
24  .container {
25    position: relative;
26    width: 100px;
27    height: 100px;
28    display: flex;
29    justify-content: center;
30    align-items: center;
31  }
32
33  .circle {
34    width: 90px;
35    height: 90px;
36    border-radius: 50%;
37    background-color: #ff6b6b;
38    position: relative;
39    animation: morphHole 2s ease-in-out infinite;
40  }
41
42  @keyframes morphHole {
43    0% {
44      box-shadow: inset 0 0 0 0px white;
45    }
46    30% {
47      box-shadow: inset 0 0 0 22px white;
48    }
49    50% {
50      box-shadow: inset 0 0 0 22px white;
51    }
52    80% {
53      box-shadow: inset 0 0 0 0px white;
54    }
55    100% {
56      box-shadow: inset 0 0 0 0px white;
57    }
58  }
59</style>
60</head>
61<body>
62<div class="container">
63  <div class="circle"></div>
64</div>
65</body>
66</html>