model output
Claude Sonnet 4.6

Pure CSS animated check mark
A 0.89T 0.23
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>Checkmark Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #8ecfca;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: flex-start;
16    justify-content: center;
17    padding-top: 80px;
18  }
19
20  .container {
21    position: relative;
22    width: 160px;
23    height: 160px;
24  }
25
26  .circle {
27    position: absolute;
28    top: 0; left: 0;
29    width: 160px;
30    height: 160px;
31    border-radius: 50%;
32    border: 1.5px solid #555;
33    overflow: hidden;
34  }
35
36  /* The spinning gray bar inside the circle */
37  .spinner-bar {
38    position: absolute;
39    top: 50%;
40    left: 50%;
41    width: 160px;
42    height: 22px;
43    background: rgba(180, 180, 180, 0.75);
44    transform-origin: left center;
45    transform: translateY(-50%);
46    animation: spin 2s linear infinite;
47    border-radius: 4px;
48  }
49
50  @keyframes spin {
51    0%   { transform: translateY(-50%) rotate(0deg); }
52    100% { transform: translateY(-50%) rotate(360deg); }
53  }
54
55  /* Checkmark */
56  .checkmark {
57    position: absolute;
58    top: 50%;
59    left: 50%;
60    transform: translate(-50%, -45%);
61    width: 80px;
62    height: 60px;
63  }
64
65  .checkmark::before,
66  .checkmark::after {
67    content: '';
68    position: absolute;
69    background: white;
70    border-radius: 6px;
71  }
72
73  /* Short left arm of checkmark */
74  .checkmark::before {
75    width: 30px;
76    height: 14px;
77    bottom: 0;
78    left: 0;
79    transform-origin: right bottom;
80    transform: rotate(-45deg);
81  }
82
83  /* Long right arm of checkmark */
84  .checkmark::after {
85    width: 55px;
86    height: 14px;
87    bottom: 0;
88    left: 18px;
89    transform-origin: left bottom;
90    transform: rotate(45deg) translateY(0px);
91  }
92
93  /* Alternative: use SVG for checkmark */
94  .check-svg {
95    position: absolute;
96    top: 50%;
97    left: 50%;
98    transform: translate(-50%, -45%);
99    width: 90px;
100    height: 70px;
101  }
102</style>
103</head>
104<body>
105  <div class="container">
106    <div class="circle">
107      <div class="spinner-bar"></div>
108    </div>
109    <!-- Checkmark rendered on top -->
110    <svg class="check-svg" viewBox="0 0 90 70" fill="none" xmlns="http://www.w3.org/2000/svg">
111      <polyline 
112        points="8,38 32,60 82,10" 
113        stroke="white" 
114        stroke-width="16" 
115        stroke-linecap="round" 
116        stroke-linejoin="round"
117        fill="none"
118      />
119    </svg>
120  </div>
121</body>
122</html>