From aad83088ce231e6e14dc8ebc289c84b76f6b2858 Mon Sep 17 00:00:00 2001
From: Arka Jyoti Adhikary <arkajyotiadhikary15@gmail.com>
Date: Sun, 24 Nov 2024 22:57:10 +0530
Subject: [PATCH] animation issue

---
 src/common/Card.js | 31 +++++++------------------------
 1 file changed, 7 insertions(+), 24 deletions(-)

diff --git a/src/common/Card.js b/src/common/Card.js
index 9240fca22890f..8f3e36e1fb70d 100644
--- a/src/common/Card.js
+++ b/src/common/Card.js
@@ -184,12 +184,12 @@ class Card {
     const decorations = [];
     const spacing = this.width / 6;
 
-    // Same positioning logic
+    // Ensure decorations are within the viewBox
     const positions = [
-      { x: spacing, y: -decorSize / 2 },
-      { x: this.width - spacing, y: -decorSize / 2 },
-      { x: -decorSize / 2, y: this.height / 3 },
-      { x: -decorSize / 2, y: (this.height / 3) * 2 },
+      { x: spacing, y: decorSize / 2 },
+      { x: this.width - spacing, y: decorSize / 2 },
+      { x: decorSize / 2, y: this.height / 3 },
+      { x: decorSize / 2, y: (this.height / 3) * 2 },
       { x: this.width - decorSize / 2, y: this.height / 3 },
       { x: this.width - decorSize / 2, y: (this.height / 3) * 2 },
       { x: spacing, y: this.height - decorSize / 2 },
@@ -198,8 +198,8 @@ class Card {
 
     positions.forEach((pos) => {
       const shapeType = _.random(0, 3); // 0: hexagon, 1: circle, 2: square, 3: triangle
-      const opacity = _.random(0.3, 0.7);
-      const strokeWidth = _.random(0.5, 2);
+      const opacity = _.random(0.5, 0.9); // Ensure higher opacity for visibility
+      const strokeWidth = _.random(1, 2);
       const rotation = _.random(0, 360);
 
       let shape = "";
@@ -267,28 +267,11 @@ class Card {
           break;
       }
 
-      // Randomly add connecting lines
-      const hasLine = _.random(0, 1) === 1;
-      const line = hasLine
-        ? `
-        <line 
-          x1="${decorSize / 2}"
-          y1="${decorSize / 2}"
-          x2="${decorSize}"
-          y2="${decorSize / 2}"
-          stroke="${this.colors.titleColor}"
-          stroke-width="${strokeWidth / 2}"
-          opacity="${opacity}"
-        />
-      `
-        : "";
-
       decorations.push(`
         <g transform="translate(${pos.x}, ${pos.y}) rotate(${rotation}, ${decorSize / 2}, ${decorSize / 2})" 
            class="decoration" 
            style="--tx:${pos.x}px; --ty:${pos.y}px;">
           ${shape}
-          ${line}
         </g>
       `);
     });