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>Recreated Animation</title>
7<style>
8 :root{
9 --bg:#ee4b3a;
10 --square-start:#f07d72;
11 --square-end:#ffffff;
12 --dot:#ffffff;
13 --size:40px;
14 --dot-size:11px;
15 --orbit:38px;
16 --duration:2.2s;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 }
26
27 .stage{
28 position:relative;
29 width:100vw;
30 height:100vh;
31 background:var(--bg);
32 }
33
34 .group{
35 position:absolute;
36 left:50%;
37 top:80px;
38 width:var(--size);
39 height:var(--size);
40 transform:translateX(-50%);
41 }
42
43 .square{
44 position:absolute;
45 inset:0;
46 background:
47 linear-gradient(90deg,
48 #fff 0%,
49 #fff var(--fill, 0%),
50 var(--square-start) var(--fill, 0%),
51 var(--square-start) 100%);
52 animation:fillSquare var(--duration) linear infinite;
53 }
54
55 .dot{
56 position:absolute;
57 width:var(--dot-size);
58 height:var(--dot-size);
59 margin-left:calc(var(--dot-size) / -2);
60 margin-top:calc(var(--dot-size) / -2);
61 border-radius:50%;
62 background:var(--dot);
63 left:50%;
64 top:50%;
65 animation:orbitDot var(--duration) linear infinite;
66 }
67
68 @keyframes fillSquare{
69 0% { --fill: 0%; }
70 100% { --fill: 100%; }
71 }
72
73 /* Dot circles clockwise around the square, matching the sampled frames:
74 top-left -> top-right -> bottom-right -> bottom-left -> repeat */
75 @keyframes orbitDot{
76 0%{
77 transform:translate(-26px,-7px);
78 }
79 12.5%{
80 transform:translate(27px,-7px);
81 }
82 25%{
83 transform:translate(27px,47px);
84 }
85 37.5%{
86 transform:translate(-26px,47px);
87 }
88 50%{
89 transform:translate(-26px,-7px);
90 }
91 62.5%{
92 transform:translate(27px,-7px);
93 }
94 75%{
95 transform:translate(27px,47px);
96 }
97 87.5%{
98 transform:translate(-26px,47px);
99 }
100 100%{
101 transform:translate(-26px,-7px);
102 }
103 }
104</style>
105</head>
106<body>
107 <div class="stage">
108 <div class="group">
109 <div class="square"></div>
110 <div class="dot"></div>
111 </div>
112 </div>
113</body>
114</html>