← back to Pure CSS animated check markcompare with ground truth →
model output
GPT-5.4
Pure CSS animated check mark
A 0.79T 0.27
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>Check Animation Replica</title>
7<style>
8 :root{
9 --bg:#add8d8;
10 --ring:rgba(70,70,70,.7);
11 --bar:rgba(232,210,214,.72);
12 --check:#fff;
13 --size:205px;
14 --stroke:42px;
15 --bar-h:20px;
16 --dur:2.8s;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family:sans-serif;
26 }
27
28 .stage{
29 position:relative;
30 width:100vw;
31 height:100vh;
32 background:var(--bg);
33 }
34
35 .icon{
36 position:absolute;
37 left:50%;
38 top:158px;
39 width:var(--size);
40 height:var(--size);
41 transform:translateX(-50%);
42 border:1.5px solid var(--ring);
43 border-radius:50%;
44 box-sizing:border-box;
45 overflow:hidden;
46 }
47
48 .bar{
49 position:absolute;
50 left:50%;
51 top:50%;
52 width:290px;
53 height:var(--bar-h);
54 margin-left:-145px;
55 margin-top:calc(var(--bar-h) / -2);
56 background:var(--bar);
57 border-radius:2px;
58 transform-origin:50% 50%;
59 animation: sweep var(--dur) linear infinite;
60 }
61
62 .check{
63 position:absolute;
64 inset:0;
65 }
66
67 .check::before,
68 .check::after{
69 content:"";
70 position:absolute;
71 background:var(--check);
72 border-radius:999px;
73 box-shadow:0 0 8px rgba(255,255,255,.35);
74 }
75
76 /* left/down stroke */
77 .check::before{
78 width:84px;
79 height:var(--stroke);
80 left:28px;
81 top:103px;
82 transform:rotate(47deg);
83 }
84
85 /* right/up stroke */
86 .check::after{
87 width:138px;
88 height:var(--stroke);
89 left:73px;
90 top:79px;
91 transform:rotate(-43deg);
92 }
93
94 @keyframes sweep{
95 0% { transform:rotate(-25deg); }
96 16% { transform:rotate(-25deg); }
97 33% { transform:rotate(45deg); }
98 50% { transform:rotate(78deg); }
99 66% { transform:rotate(90deg); }
100 100% { transform:rotate(90deg); }
101 }
102</style>
103</head>
104<body>
105 <div class="stage">
106 <div class="icon">
107 <div class="bar"></div>
108 <div class="check"></div>
109 </div>
110 </div>
111</body>
112</html>