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>Animation</title>
7 <style>
8 body {
9 background-color: #f5f5f5;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .dot {
17 width: 20px;
18 height: 20px;
19 background-color: red;
20 border-radius: 50%;
21 position: relative;
22 }
23 .curve {
24 position: absolute;
25 width: 50px;
26 height: 10px;
27 background-image: linear-gradient(to right, red, purple);
28 border-radius: 10px;
29 transform-origin: center;
30 }
31 </style>
32</head>
33<body>
34 <div class="dot"></div>
35 <script>
36 // Get the dot element
37 const dot = document.querySelector('.dot');
38
39 // Define the animation
40 let currentFrame = 0;
41 const frames = [
42 { backgroundColor: 'red', curve: null },
43 { backgroundColor: 'red', curve: { rotate: 45, color: 'red' } },
44 { backgroundColor: 'red', curve: { rotate: 90, color: 'purple' } },
45 { backgroundColor: 'red', curve: { rotate: 135, color: 'purple' } },
46 { backgroundColor: 'red', curve: { rotate: 180, color: 'purple' } },
47 { backgroundColor: 'red', curve: { rotate: 225, color: 'purple' } },
48 { backgroundColor: 'red', curve: { rotate: 270, color: 'purple' } },
49 { backgroundColor: 'red', curve: { rotate: 315, color: 'purple' } },
50 { backgroundColor: 'red', curve: null },
51 ];
52
53 // Animate the dot
54 function animate() {
55 if (currentFrame >= frames.length) {
56 currentFrame = 0;
57 }
58
59 const frame = frames[currentFrame];
60 dot.style.background = frame.backgroundColor;
61
62 // Remove existing curve
63 const existingCurve = document.querySelector('.curve');
64 if (existingCurve) {
65 existingCurve.remove();
66 }
67
68 // Add new curve if necessary
69 if (frame.curve) {
70 const curve = document.createElement('div');
71 curve.classList.add('curve');
72 curve.style.transform = `rotate(${frame.curve.rotate}deg)`;
73 curve.style.backgroundImage = `linear-gradient(to right, ${frame.curve.color}, purple)`;
74 dot.appendChild(curve);
75 }
76
77 currentFrame++;
78 requestAnimationFrame(animate);
79 }
80
81 animate();
82 </script>
83</body>
84</html>