From 4cabed104d94272e71b44a4c0f6d3b4959d99b68 Mon Sep 17 00:00:00 2001
From: Harshit Gupta <harshitgupta0910@gmail.com>
Date: Fri, 25 Oct 2024 00:52:23 +0530
Subject: [PATCH] make an attractive cursor for user

---
 index.html | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a2bf05a..0231056 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,18 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
+        <style>
+            .circle {
+                height: 24px;
+                width: 24px;
+                border-radius: 50%;
+                position: fixed;
+                background-color: black;  /* Default color of circles */
+                pointer-events: none;     /* Prevent interaction with circles */
+                z-index: 9999;
+                transition: transform 0.1s ease-out;
+            }
+        </style>
     <style>
         /* Base styles */
         header {
@@ -1450,7 +1462,79 @@ <h2>Words from Our Clients <span class="highlight">Inspiring Testimonials of Sat
                 });
             };
         </script>
-
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+
+  <script>
+      // Store the mouse coordinates
+      const coords = { x: 0, y: 0 };
+
+      // Select all circles (you can add more circles to HTML as needed)
+      const circles = document.querySelectorAll(".circle");
+
+      // Customize the colors for the circles (optional)
+      const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
+
+      // Initialize circle positions and colors
+      circles.forEach((circle, index) => {
+          circle.x = 0;
+          circle.y = 0;
+          circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
+      });
+
+      // Update mouse coordinates on move
+      window.addEventListener("mousemove", (e) => {
+          coords.x = e.clientX;
+          coords.y = e.clientY;
+      });
+
+      // Animation loop for circles
+      function animateCircles() {
+          let x = coords.x;
+          let y = coords.y;
+
+          circles.forEach((circle, index) => {
+              // Use template literals with backticks
+              circle.style.left = `${x - 12}px`;   // Offset for center alignment
+              circle.style.top = `${y - 12}px`;
+
+              circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
+
+              circle.x = x;
+              circle.y = y;
+
+              const nextCircle = circles[index + 1] || circles[0];
+              x += (nextCircle.x - x) * 0.3;
+              y += (nextCircle.y - y) * 0.3;
+          });
+
+          requestAnimationFrame(animateCircles);
+      }
+
+      // Start animation
+      animateCircles();
+  </script>
 
 </body>