model output
Qwen3-VL-8B-Instruct

Pure CSS animated check mark
A 0.51T 0.26
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  body {
9    background-color: #a8d5d5;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .container {
17    position: relative;
18    width: 100px;
19    height: 100px;
20  }
21  .circle {
22    width: 100%;
23    height: 100%;
24    border: 2px solid #ccc;
25    border-radius: 50%;
26    position: relative;
27    overflow: hidden;
28  }
29  .checkmark {
30    position: absolute;
31    top: 50%;
32    left: 50%;
33    transform: translate(-50%, -50%);
34    width: 60px;
35    height: 60px;
36    background-color: white;
37    border-radius: 50%;
38    transform-origin: center;
39    animation: rotate 1s ease-in-out forwards;
40  }
41  .checkmark::before,
42  .checkmark::after {
43    content: '';
44    position: absolute;
45    background-color: white;
46    border-radius: 50%;
47  }
48  .checkmark::before {
49    width: 0;
50    height: 0;
51    top: 50%;
52    left: 50%;
53    transform: translate(-50%, -50%) rotate(45deg);
54    animation: grow 1s ease-in-out forwards;
55  }
56  .checkmark::after {
57    width: 0;
58    height: 0;
59    top: 50%;
60    left: 50%;
61    transform: translate(-50%, -50%) rotate(-45deg);
62    animation: grow 1s ease-in-out forwards;
63  }
64  @keyframes rotate {
65    0% {
66      transform: translate(-50%, -50%) rotate(0deg);
67    }
68    100% {
69      transform: translate(-50%, -50%) rotate(360deg);
70    }
71  }
72  @keyframes grow {
73    0% {
74      width: 0;
75      height: 0;
76    }
77    100% {
78      width: 60px;
79      height: 60px;
80    }
81  }
82</style>
83</head>
84<body>
85  <div class="container">
86    <div class="circle">
87      <div class="checkmark"></div>
88    </div>
89  </div>
90</body>
91</html>