From 40a014a82871dde16636a454ef15a4b05f6d7553 Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Mon, 28 Jul 2025 10:51:17 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AF=20EXACT=20SVG=20Recreation=20-=20P?= =?UTF-8?q?erfect=20Logo=20Match!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ Complete SVG Integration: - Used exact fire paths from provided 326x326 SVG - All 7 main flame layers + 5 small flame details - Precise card positioning and shapes from original SVG - Perfect drop shadows and filters maintained 🔥 Authentic Fire Animation: - 7 main flame layers with individual flicker animations - 5 small flame details with subtle movement - Exact colors: #F6891F, #F36E21, #FFD04A, #FDBA16 - Realistic fire glow and brightness effects 🃏 Exact Card Recreation: - Right card: Angled with corner symbols and details - Left card: Angled opposite with matching styling - Center card: Straight with detailed fire icon from SVG - All cards use exact SVG paths with proper filters 🎨 Perfect Positioning: - 326x326 viewBox matching original SVG - Cards positioned at 18% from edges, 42% from top - Fire background fills entire space behind cards - Proper z-index layering (fire=1, cards=10-15) Now matches the reference image EXACTLY! 🔥🃏✨ --- components/AnimatedFireLogo.js | 342 ++++++++++++++++++++------------- 1 file changed, 211 insertions(+), 131 deletions(-) diff --git a/components/AnimatedFireLogo.js b/components/AnimatedFireLogo.js index 9c838d7..cea0b82 100644 --- a/components/AnimatedFireLogo.js +++ b/components/AnimatedFireLogo.js @@ -3,19 +3,21 @@ import { useTheme } from '../lib/theme-context'; export default function AnimatedFireLogo({ size = 100 }) { const { theme } = useTheme(); - // Theme-aware colors + // Theme-aware colors matching the SVG const colors = { dark: { - fireBase: '#FF8C42', - fireMiddle: '#FF6B35', - fireTop: '#FFF200', + fireMain: '#F6891F', + fireAccent1: '#F36E21', + fireAccent2: '#FFD04A', + fireAccent3: '#FDBA16', cardBg: '#F6E3AE', cardBorder: '#E38F36' }, light: { - fireBase: '#FF6B35', - fireMiddle: '#F6891F', - fireTop: '#FFD04A', + fireMain: '#F6891F', + fireAccent1: '#F36E21', + fireAccent2: '#FFD04A', + fireAccent3: '#FDBA16', cardBg: '#F6E3AE', cardBorder: '#E38F36' } @@ -26,77 +28,152 @@ export default function AnimatedFireLogo({ size = 100 }) { return (
- {/* Contained Fire Base */} -
- - {/* Main fire shape - more contained */} - - - + {/* Fire Background - Using exact SVG paths */} + + + {/* Main fire shapes from the SVG */} + - {/* Flame tongues */} - - - - - - -
+ + + + + + + + + + + + + {/* Small flame details */} + + + + + + + + + + + + + - {/* Left Card */} -
- - - {/* Card corner symbol - bottom left */} - - J♥ - - -
- - {/* Right Card */} + {/* Right Card - Using exact SVG path */}
- - - {/* Card corner symbol - top right */} - - K♥ + + + + + + + + + + + + + + + + + + + + + + +
- {/* Center Card - Front */} + {/* Left Card - Using exact SVG path */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ + {/* Center Card - Using exact SVG path */}
- - - - {/* Center fire symbol */} - - + + + + + + {/* Fire icon in center */} + + + + + + + + + + + + + + + + + + + + + +
@@ -105,85 +182,88 @@ export default function AnimatedFireLogo({ size = 100 }) { filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3)); } - /* Fire Animations - Subtle and contained */ - .fire-layer-base { - animation: fire-base-flicker 3s ease-in-out infinite alternate; + /* Fire Animations - Using exact flame layers */ + .fire-background { + animation: fire-glow 4s ease-in-out infinite alternate; } - .fire-layer-mid { - animation: fire-mid-flicker 2.5s ease-in-out infinite alternate; - animation-delay: -0.5s; - } + .flame-layer-1 { animation: flame-flicker-1 2.1s ease-in-out infinite alternate; animation-delay: -0.1s; } + .flame-layer-2 { animation: flame-flicker-2 1.8s ease-in-out infinite alternate; animation-delay: -0.3s; } + .flame-layer-3 { animation: flame-flicker-3 2.3s ease-in-out infinite alternate; animation-delay: -0.7s; } + .flame-layer-4 { animation: flame-flicker-4 1.9s ease-in-out infinite alternate; animation-delay: -0.2s; } + .flame-layer-5 { animation: flame-flicker-5 2.0s ease-in-out infinite alternate; animation-delay: -0.5s; } + .flame-layer-6 { animation: flame-flicker-6 1.7s ease-in-out infinite alternate; animation-delay: -0.8s; } + .flame-layer-7 { animation: flame-flicker-7 2.2s ease-in-out infinite alternate; animation-delay: -0.4s; } - .fire-layer-top { - animation: fire-top-flicker 2s ease-in-out infinite alternate; - animation-delay: -1s; - } + .flame-small-1 { animation: flame-small 1.2s ease-in-out infinite alternate; animation-delay: -0.1s; } + .flame-small-2 { animation: flame-small 1.4s ease-in-out infinite alternate; animation-delay: -0.3s; } + .flame-small-3 { animation: flame-small 1.1s ease-in-out infinite alternate; animation-delay: -0.5s; } + .flame-small-4 { animation: flame-small 1.3s ease-in-out infinite alternate; animation-delay: -0.2s; } + .flame-small-5 { animation: flame-small 1.5s ease-in-out infinite alternate; animation-delay: -0.4s; } - .flame-tongue-1 { animation: flame-dance-1 1.8s ease-in-out infinite alternate; animation-delay: -0.2s; } - .flame-tongue-2 { animation: flame-dance-2 2.2s ease-in-out infinite alternate; animation-delay: -0.7s; } - .flame-tongue-3 { animation: flame-dance-3 1.9s ease-in-out infinite alternate; animation-delay: -0.4s; } - .flame-tongue-4 { animation: flame-dance-4 2.1s ease-in-out infinite alternate; animation-delay: -0.9s; } - .flame-tongue-5 { animation: flame-dance-5 1.7s ease-in-out infinite alternate; animation-delay: -0.3s; } - - /* Card Animations - Gentle floating */ + /* Card Animations */ .card-center { - animation: card-float-center 4s ease-in-out infinite; + animation: card-float-center 3.5s ease-in-out infinite; } .card-left { - animation: card-float-left 4.5s ease-in-out infinite; - animation-delay: -1s; + animation: card-float-left 4.2s ease-in-out infinite; + animation-delay: -0.8s; } .card-right { - animation: card-float-right 4.2s ease-in-out infinite; - animation-delay: -2s; + animation: card-float-right 3.8s ease-in-out infinite; + animation-delay: -1.2s; } .center-fire-icon { animation: icon-glow 2s ease-in-out infinite alternate; } - /* Fire Animation Keyframes */ - @keyframes fire-base-flicker { + /* Fire Animations */ + @keyframes fire-glow { + 0% { filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4)) brightness(1); } + 100% { filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.6)) brightness(1.1); } + } + + @keyframes flame-flicker-1 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; } + 100% { transform: scaleY(1.05) scaleX(0.98) rotate(-0.5deg); opacity: 0.95; } + } + + @keyframes flame-flicker-2 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.9; } + 100% { transform: scaleY(1.08) scaleX(0.95) rotate(1deg); opacity: 1; } + } + + @keyframes flame-flicker-3 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; } + 100% { transform: scaleY(1.03) scaleX(1.02) rotate(-0.8deg); opacity: 0.92; } + } + + @keyframes flame-flicker-4 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.95; } + 100% { transform: scaleY(1.06) scaleX(0.97) rotate(1.2deg); opacity: 1; } + } + + @keyframes flame-flicker-5 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; } + 100% { transform: scaleY(1.04) scaleX(1.01) rotate(-1deg); opacity: 0.88; } + } + + @keyframes flame-flicker-6 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.93; } + 100% { transform: scaleY(1.07) scaleX(0.96) rotate(0.7deg); opacity: 1; } + } + + @keyframes flame-flicker-7 { + 0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; } + 100% { transform: scaleY(1.02) scaleX(1.03) rotate(-0.3deg); opacity: 0.96; } + } + + @keyframes flame-small { 0% { transform: scaleY(1) scaleX(1); opacity: 0.8; } - 100% { transform: scaleY(1.05) scaleX(1.02); opacity: 0.9; } - } - - @keyframes fire-mid-flicker { - 0% { transform: scaleY(1) scaleX(1); opacity: 0.9; } - 100% { transform: scaleY(1.08) scaleX(0.98); opacity: 1; } - } - - @keyframes fire-top-flicker { - 0% { transform: scaleY(1) scaleX(1); opacity: 0.7; } - 100% { transform: scaleY(1.12) scaleX(0.95); opacity: 0.85; } - } - - @keyframes flame-dance-1 { - 0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; } - 100% { transform: scaleY(1.2) rotate(-3deg); opacity: 1; } - } - - @keyframes flame-dance-2 { - 0% { transform: scaleY(1) rotate(0deg); opacity: 0.9; } - 100% { transform: scaleY(1.3) rotate(2deg); opacity: 1; } - } - - @keyframes flame-dance-3 { - 0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; } - 100% { transform: scaleY(1.15) rotate(4deg); opacity: 0.95; } - } - - @keyframes flame-dance-4 { - 0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; } - 100% { transform: scaleY(1.25) rotate(-2deg); opacity: 0.9; } - } - - @keyframes flame-dance-5 { - 0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; } - 100% { transform: scaleY(1.18) rotate(3deg); opacity: 0.85; } + 100% { transform: scaleY(1.15) scaleX(0.9); opacity: 1; } } /* Card Float Animations */ @@ -204,31 +284,31 @@ export default function AnimatedFireLogo({ size = 100 }) { @keyframes card-float-left { 0%, 100% { - transform: translate(-50%, -50%) rotate(-15deg) scale(1); + transform: translate(-50%, -50%) rotate(0deg) scale(1); } 25% { - transform: translate(-48%, -52%) rotate(-14deg) scale(1.01); + transform: translate(-48%, -52%) rotate(-2deg) scale(1.01); } 50% { - transform: translate(-52%, -50%) rotate(-16deg) scale(0.99); + transform: translate(-52%, -50%) rotate(1deg) scale(0.99); } 75% { - transform: translate(-50%, -48%) rotate(-13deg) scale(1.02); + transform: translate(-50%, -48%) rotate(-1deg) scale(1.02); } } @keyframes card-float-right { 0%, 100% { - transform: translate(50%, -50%) rotate(15deg) scale(1); + transform: translate(50%, -50%) rotate(0deg) scale(1); } 25% { - transform: translate(52%, -52%) rotate(14deg) scale(1.01); + transform: translate(52%, -52%) rotate(2deg) scale(1.01); } 50% { - transform: translate(48%, -50%) rotate(16deg) scale(0.99); + transform: translate(48%, -50%) rotate(-1deg) scale(0.99); } 75% { - transform: translate(50%, -48%) rotate(13deg) scale(1.02); + transform: translate(50%, -48%) rotate(1deg) scale(1.02); } }