← back to background wave animationcompare with ground truth →
model output
Claude Sonnet 4.6
background wave animation
A 0.87T 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>Blue Circle Animation</title>
7<style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 width: 100vw;
16 height: 100vh;
17 overflow: hidden;
18 background-color: #1565C0;
19 }
20
21 .scene {
22 width: 100%;
23 height: 100%;
24 position: relative;
25 background-color: #1565C0;
26 overflow: hidden;
27 }
28
29 .circle {
30 position: absolute;
31 border-radius: 50%;
32 }
33
34 /* Main large light blue circle */
35 .circle-main {
36 width: 130vmin;
37 height: 130vmin;
38 background-color: #4FC3F7;
39 left: -65vmin;
40 top: 50%;
41 transform: translateY(-50%);
42 animation: circleMain 4s ease-in-out infinite alternate;
43 }
44
45 /* Second circle - slightly darker, offset */
46 .circle-2 {
47 width: 130vmin;
48 height: 130vmin;
49 background-color: rgba(41, 182, 246, 0.5);
50 left: -65vmin;
51 top: 50%;
52 transform: translateY(-50%);
53 animation: circle2 4s ease-in-out infinite alternate;
54 }
55
56 /* Third circle - darker ring effect */
57 .circle-3 {
58 width: 130vmin;
59 height: 130vmin;
60 background-color: rgba(2, 136, 209, 0.4);
61 left: -65vmin;
62 top: 50%;
63 transform: translateY(-50%);
64 animation: circle3 4s ease-in-out infinite alternate;
65 }
66
67 @keyframes circleMain {
68 0% {
69 left: -30vmin;
70 top: 30%;
71 transform: translateY(0%);
72 }
73 50% {
74 left: -55vmin;
75 top: 50%;
76 transform: translateY(-50%);
77 }
78 100% {
79 left: -30vmin;
80 top: 70%;
81 transform: translateY(-100%);
82 }
83 }
84
85 @keyframes circle2 {
86 0% {
87 left: -25vmin;
88 top: 25%;
89 transform: translateY(0%);
90 }
91 50% {
92 left: -50vmin;
93 top: 50%;
94 transform: translateY(-50%);
95 }
96 100% {
97 left: -25vmin;
98 top: 75%;
99 transform: translateY(-100%);
100 }
101 }
102
103 @keyframes circle3 {
104 0% {
105 left: -20vmin;
106 top: 20%;
107 transform: translateY(0%);
108 }
109 50% {
110 left: -45vmin;
111 top: 50%;
112 transform: translateY(-50%);
113 }
114 100% {
115 left: -20vmin;
116 top: 80%;
117 transform: translateY(-100%);
118 }
119 }
120</style>
121</head>
122<body>
123<div class="scene">
124 <div class="circle circle-3"></div>
125 <div class="circle circle-2"></div>
126 <div class="circle circle-main"></div>
127</div>
128
129<script>
130 // Use canvas for more precise rendering
131 const canvas = document.createElement('canvas');
132 const ctx = canvas.getContext('2d');
133 document.body.innerHTML = '';
134 document.body.style.margin = '0';
135 document.body.style.overflow = 'hidden';
136 document.body.style.background = '#1565C0';
137 canvas.style.display = 'block';
138 document.body.appendChild(canvas);
139
140 function resize() {
141 canvas.width = window.innerWidth;
142 canvas.height = window.innerHeight;
143 }
144 resize();
145 window.addEventListener('resize', resize);
146
147 const duration = 4000; // 4 seconds per cycle
148 let startTime = null;
149
150 function easeInOut(t) {
151 return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
152 }
153
154 function drawScene(timestamp) {
155 if (!startTime) startTime = timestamp;
156 const elapsed = (timestamp - startTime) % (duration * 2);
157 // ping-pong
158 let t = elapsed / duration;
159 if (t > 1) t = 2 - t;
160 const e = easeInOut(t);
161
162 const W = canvas.width;
163 const H = canvas.height;
164
165 // Background
166 ctx.fillStyle = '#1565C0';
167 ctx.fillRect(0, 0, W, H);
168
169 const r = Math.min(W, H) * 0.65;
170
171 // Circle positions animate: center moves from upper-left area to lower-left area
172 // At t=0: circle center roughly at (-0.1*W, 0.1*H) - top left corner visible
173 // At t=1: circle center roughly at (-0.1*W, 0.9*H) - bottom left corner visible
174 // The main circle stays mostly on the left side
175
176 // Main circle center x: oscillates slightly
177 const cx0 = -r * 0.1;
178 const cy0 = H * 0.15 - r * 0.1;
179 const cx1 = -r * 0.1;
180 const cy1 = H * 0.85 + r * 0.1;
181
182 const cx = cx0 + (cx1 - cx0) * e;
183 const cy = cy0 + (cy1 - cy0) * e;
184
185 // Draw 3 circles with slight offsets to create layered ring effect
186 // Outermost (darkest overlay)
187 const offset = r * 0.06;
188
189 // Layer 3 - slightly offset, semi-transparent darker
190 ctx.beginPath();
191 ctx.arc(cx + offset * 0.5, cy - offset * 0.3, r + offset, 0, Math.PI * 2);
192 ctx.fillStyle = 'rgba(21, 101, 192, 0.55)';
193 ctx.fill();
194
195 // Layer 2 - medium offset
196 ctx.beginPath();
197 ctx.arc(cx + offset * 0.3, cy - offset * 0.2, r + offset * 0.5, 0, Math.PI * 2);
198 ctx.fillStyle = 'rgba(41, 182, 246, 0.35)';
199 ctx.fill();
200
201 // Main circle - light blue
202 ctx.beginPath();
203 ctx.arc(cx, cy, r, 0, Math.PI * 2);
204 ctx.fillStyle = '#4FC3F7';
205 ctx.fill();
206
207 requestAnimationFrame(drawScene);
208 }
209
210 requestAnimationFrame(drawScene);
211</script>
212</body>
213</html>