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" />
6<title>Color Morph Dot</title>
7<style>
8 :root{
9 --bg:#4a76ad;
10 --size:50px;
11 --dur:2.4s;
12 }
13
14 html,body{
15 margin:0;
16 width:100%;
17 height:100%;
18 overflow:hidden;
19 background:var(--bg);
20 }
21
22 body{
23 display:grid;
24 place-items:center;
25 }
26
27 .dot{
28 width:var(--size);
29 height:var(--size);
30 border-radius:50%;
31 background:
32 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
33 conic-gradient(
34 from 0deg,
35 #11a8e8 0deg 360deg
36 );
37 animation: morph var(--dur) linear infinite;
38 filter: saturate(1.05);
39 }
40
41 @keyframes morph{
42 /* full cyan */
43 0%{
44 transform:rotate(0deg) scale(1);
45 background:
46 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
47 conic-gradient(from 0deg, #11a8e8 0deg 360deg);
48 }
49
50 /* cyan -> teal */
51 12.5%{
52 transform:rotate(18deg) scale(1);
53 background:
54 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
55 conic-gradient(from 8deg,
56 #11a8e8 0deg 300deg,
57 #22b89a 300deg 360deg);
58 }
59
60 /* mostly green with small cyan wedge */
61 25%{
62 transform:rotate(42deg) scale(1);
63 background:
64 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
65 conic-gradient(from 28deg,
66 #39c44f 0deg 300deg,
67 #18b7c8 300deg 360deg);
68 }
69
70 /* green / ochre split */
71 37.5%{
72 transform:rotate(78deg) scale(1);
73 background:
74 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
75 conic-gradient(from 58deg,
76 #39c44f 0deg 120deg,
77 #b88734 120deg 360deg);
78 }
79
80 /* green with red wedge */
81 50%{
82 transform:rotate(118deg) scale(1);
83 background:
84 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
85 conic-gradient(from 138deg,
86 #7cab3f 0deg 250deg,
87 #ff2f22 250deg 360deg);
88 }
89
90 /* mostly brown/orange */
91 62.5%{
92 transform:rotate(188deg) scale(1);
93 background:
94 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
95 conic-gradient(from 210deg,
96 #ff7a1f 0deg 18deg,
97 #b07b2f 18deg 360deg);
98 }
99
100 /* yellow/orange with red side */
101 75%{
102 transform:rotate(258deg) scale(1);
103 background:
104 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
105 conic-gradient(from 300deg,
106 #ffb52f 0deg 210deg,
107 #d94a28 210deg 360deg);
108 }
109
110 /* red with teal cap */
111 87.5%{
112 transform:rotate(328deg) scale(1);
113 background:
114 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
115 conic-gradient(from 350deg,
116 #2ab8a8 0deg 55deg,
117 #ff3426 55deg 360deg);
118 }
119
120 /* green with thin orange rim segment */
121 100%{
122 transform:rotate(360deg) scale(1);
123 background:
124 radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%),
125 conic-gradient(from 355deg,
126 #57c83f 0deg 330deg,
127 #ff7a2a 330deg 360deg);
128 }
129 }
130</style>
131</head>
132<body>
133 <div class="dot"></div>
134</body>
135</html>