🔥 Replace with Realistic SVG Fire Logo
✨ Professional SVG Fire Animation: - Complete rewrite using provided SVG flame paths - 6 main flame layers with realistic organic shapes - 3 small accent flames for detail - Theme-aware color schemes (dark/light modes) 🎨 Advanced Animation System: - Individual animation timings for each flame layer - Staggered animation delays for natural movement - Transform-origin set to bottom for realistic flickering - Subtle scaling, rotation, and opacity variations 🌟 Enhanced Visual Effects: - Drop-shadow glow effect with brightness animation - Proper aspect ratio (1.5x height) for flame proportions - Smooth color transitions between themes - Professional flame colors matching real fire The fire logo now uses authentic flame shapes and looks incredibly realistic
This commit is contained in:
Randall Stillwell
parent
4d4540c3e5
commit
4fa61eb522
1 changed files with 211 additions and 233 deletions
|
|
@ -3,287 +3,265 @@ import { useTheme } from '../lib/theme-context';
|
||||||
export default function AnimatedFireLogo({ size = 80 }) {
|
export default function AnimatedFireLogo({ size = 80 }) {
|
||||||
const { theme } = useTheme();
|
const { theme } = useTheme();
|
||||||
|
|
||||||
|
// Theme-aware colors
|
||||||
|
const colors = {
|
||||||
|
dark: {
|
||||||
|
flame1: '#FF6B35',
|
||||||
|
flame2: '#F7931E',
|
||||||
|
flame3: '#FFF200',
|
||||||
|
flame4: '#FDBA16',
|
||||||
|
flame5: '#FF4500'
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
flame1: '#F36E21',
|
||||||
|
flame2: '#F6891F',
|
||||||
|
flame3: '#FFD04A',
|
||||||
|
flame4: '#FDBA16',
|
||||||
|
flame5: '#D84315'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentColors = colors[theme] || colors.light;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="fire-logo-container relative flex items-center justify-center"
|
className="fire-logo-container relative flex items-center justify-center"
|
||||||
style={{ width: size, height: size }}
|
style={{ width: size, height: size * 1.5 }}
|
||||||
>
|
>
|
||||||
{/* Main Fire */}
|
<svg
|
||||||
<div className="fire-main">
|
version="1.1"
|
||||||
<div className="fire-left"></div>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<div className="fire-main-flame"></div>
|
x="0px"
|
||||||
<div className="fire-right"></div>
|
y="0px"
|
||||||
</div>
|
width={size}
|
||||||
|
height={size * 1.5}
|
||||||
|
viewBox="0 0 125 189.864"
|
||||||
|
className="fire-svg"
|
||||||
|
>
|
||||||
|
{/* Main flame paths */}
|
||||||
|
<path
|
||||||
|
className="flame-main"
|
||||||
|
fill={currentColors.flame1}
|
||||||
|
d="M76.553,186.09c0,0-10.178-2.976-15.325-8.226s-9.278-16.82-9.278-16.82s-0.241-6.647-4.136-18.465
|
||||||
|
c0,0,3.357,4.969,5.103,9.938c0,0-5.305-21.086,1.712-30.418c7.017-9.333,0.571-35.654-2.25-37.534c0,0,13.07,5.64,19.875,47.54
|
||||||
|
c6.806,41.899,16.831,45.301,6.088,53.985"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Additional flames for more realistic effect */}
|
<path
|
||||||
<div className="fire-particle fire-particle-1"></div>
|
className="flame-main one"
|
||||||
<div className="fire-particle fire-particle-2"></div>
|
fill={currentColors.flame2}
|
||||||
<div className="fire-particle fire-particle-3"></div>
|
d="M61.693,122.257c4.117-15.4,12.097-14.487-11.589-60.872c0,0,32.016,10.223,52.601,63.123
|
||||||
|
c20.585,52.899-19.848,61.045-19.643,61.582c0.206,0.537-19.401-0.269-14.835-18.532S57.576,137.656,61.693,122.257z"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Base/Log */}
|
<path
|
||||||
<div className="fire-base"></div>
|
className="flame-main two"
|
||||||
|
fill={currentColors.flame3}
|
||||||
|
d="M81.657,79.192c0,0,11.549,24.845,3.626,40.02c-7.924,15.175-21.126,41.899-0.425,64.998
|
||||||
|
C84.858,184.21,125.705,150.905,81.657,79.192z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
className="flame-main three"
|
||||||
|
fill={currentColors.flame4}
|
||||||
|
d="M99.92,101.754c0,0-23.208,47.027-12.043,80.072c0,0,32.741-16.073,20.108-45.79
|
||||||
|
C95.354,106.319,99.92,114.108,99.92,101.754z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
className="flame-main four"
|
||||||
|
fill={currentColors.flame1}
|
||||||
|
d="M103.143,105.917c0,0,8.927,30.753-1.043,46.868c-9.969,16.115-14.799,29.041-14.799,29.041
|
||||||
|
S134.387,164.603,103.143,105.917z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
className="flame-main five"
|
||||||
|
fill={currentColors.flame4}
|
||||||
|
d="M62.049,104.171c0,0-15.645,67.588,10.529,77.655C98.753,191.894,69.033,130.761,62.049,104.171z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Small accent flames */}
|
||||||
|
<path
|
||||||
|
className="flame"
|
||||||
|
fill={currentColors.flame5}
|
||||||
|
d="M101.011,112.926c0,0,8.973,10.519,4.556,16.543C99.37,129.735,106.752,117.406,101.011,112.926z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
className="flame one"
|
||||||
|
fill={currentColors.flame5}
|
||||||
|
d="M55.592,126.854c0,0-3.819,13.29,2.699,16.945C64.038,141.48,55.907,132.263,55.592,126.854z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
className="flame two"
|
||||||
|
fill={currentColors.flame5}
|
||||||
|
d="M54.918,104.595c0,0-3.959,6.109-1.24,8.949C56.93,113.256,52.228,107.329,54.918,104.595z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
.fire-logo-container {
|
.fire-logo-container {
|
||||||
transform: scale(${size / 80});
|
filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-main {
|
.fire-svg {
|
||||||
position: relative;
|
animation: fire-glow 3s ease-in-out infinite alternate;
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-left, .fire-main-flame, .fire-right {
|
.flame-main {
|
||||||
position: absolute;
|
animation: flame-flicker-main 1.5s ease-in-out infinite alternate;
|
||||||
bottom: 0;
|
transform-origin: center bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-main-flame {
|
.flame-main.one {
|
||||||
width: 40px;
|
animation: flame-flicker-one 1.8s ease-in-out infinite alternate;
|
||||||
height: 50px;
|
animation-delay: -0.3s;
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: ${theme === 'dark'
|
|
||||||
? 'linear-gradient(to top, #ff6b35 0%, #f7931e 50%, #fff200 100%)'
|
|
||||||
: 'linear-gradient(to top, #d84315 0%, #ff6f00 50%, #ffab40 100%)'
|
|
||||||
};
|
|
||||||
clip-path: polygon(
|
|
||||||
20% 100%,
|
|
||||||
10% 85%,
|
|
||||||
5% 70%,
|
|
||||||
15% 55%,
|
|
||||||
8% 40%,
|
|
||||||
20% 30%,
|
|
||||||
15% 15%,
|
|
||||||
30% 10%,
|
|
||||||
25% 0%,
|
|
||||||
45% 5%,
|
|
||||||
50% 0%,
|
|
||||||
65% 8%,
|
|
||||||
70% 15%,
|
|
||||||
85% 30%,
|
|
||||||
92% 40%,
|
|
||||||
85% 55%,
|
|
||||||
95% 70%,
|
|
||||||
90% 85%,
|
|
||||||
80% 100%
|
|
||||||
);
|
|
||||||
animation: fire-flicker 0.8s ease-in-out infinite alternate;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-left {
|
.flame-main.two {
|
||||||
width: 30px;
|
animation: flame-flicker-two 1.2s ease-in-out infinite alternate;
|
||||||
height: 40px;
|
animation-delay: -0.6s;
|
||||||
left: 5px;
|
|
||||||
background: ${theme === 'dark'
|
|
||||||
? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
|
|
||||||
: 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
|
|
||||||
};
|
|
||||||
clip-path: polygon(
|
|
||||||
25% 100%,
|
|
||||||
15% 80%,
|
|
||||||
5% 60%,
|
|
||||||
20% 45%,
|
|
||||||
10% 25%,
|
|
||||||
25% 15%,
|
|
||||||
20% 5%,
|
|
||||||
40% 0%,
|
|
||||||
60% 10%,
|
|
||||||
80% 20%,
|
|
||||||
90% 35%,
|
|
||||||
85% 50%,
|
|
||||||
95% 65%,
|
|
||||||
85% 80%,
|
|
||||||
75% 100%
|
|
||||||
);
|
|
||||||
animation: fire-flicker-left 1.2s ease-in-out infinite alternate;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-right {
|
.flame-main.three {
|
||||||
width: 25px;
|
animation: flame-flicker-three 2.1s ease-in-out infinite alternate;
|
||||||
height: 35px;
|
animation-delay: -0.9s;
|
||||||
right: 8px;
|
|
||||||
background: ${theme === 'dark'
|
|
||||||
? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
|
|
||||||
: 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
|
|
||||||
};
|
|
||||||
clip-path: polygon(
|
|
||||||
20% 100%,
|
|
||||||
10% 85%,
|
|
||||||
5% 65%,
|
|
||||||
15% 50%,
|
|
||||||
8% 30%,
|
|
||||||
25% 20%,
|
|
||||||
20% 5%,
|
|
||||||
40% 0%,
|
|
||||||
65% 8%,
|
|
||||||
85% 25%,
|
|
||||||
90% 40%,
|
|
||||||
85% 60%,
|
|
||||||
95% 75%,
|
|
||||||
88% 90%,
|
|
||||||
80% 100%
|
|
||||||
);
|
|
||||||
animation: fire-flicker-right 1s ease-in-out infinite alternate;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-particle {
|
.flame-main.four {
|
||||||
position: absolute;
|
animation: flame-flicker-four 1.7s ease-in-out infinite alternate;
|
||||||
border-radius: 50%;
|
animation-delay: -0.2s;
|
||||||
opacity: 0.7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-particle-1 {
|
.flame-main.five {
|
||||||
width: 8px;
|
animation: flame-flicker-five 1.9s ease-in-out infinite alternate;
|
||||||
height: 8px;
|
animation-delay: -0.7s;
|
||||||
top: 10px;
|
|
||||||
left: 15px;
|
|
||||||
background: ${theme === 'dark' ? '#fff200' : '#ffab40'};
|
|
||||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
||||||
animation: particle-float-1 2s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-particle-2 {
|
.flame {
|
||||||
width: 6px;
|
animation: flame-small 1.0s ease-in-out infinite alternate;
|
||||||
height: 6px;
|
transform-origin: center bottom;
|
||||||
top: 15px;
|
|
||||||
right: 12px;
|
|
||||||
background: ${theme === 'dark' ? '#ffa500' : '#ff6f00'};
|
|
||||||
clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
|
|
||||||
animation: particle-float-2 1.8s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-particle-3 {
|
.flame.one {
|
||||||
width: 4px;
|
animation: flame-small-one 1.3s ease-in-out infinite alternate;
|
||||||
height: 4px;
|
animation-delay: -0.4s;
|
||||||
top: 8px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: ${theme === 'dark' ? '#ff6b35' : '#d84315'};
|
|
||||||
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
|
|
||||||
animation: particle-float-3 2.2s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-base {
|
.flame.two {
|
||||||
position: absolute;
|
animation: flame-small-two 0.9s ease-in-out infinite alternate;
|
||||||
bottom: -5px;
|
animation-delay: -0.1s;
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 50px;
|
|
||||||
height: 8px;
|
|
||||||
background: ${theme === 'dark'
|
|
||||||
? 'linear-gradient(to right, #8b4513, #a0522d, #8b4513)'
|
|
||||||
: 'linear-gradient(to right, #5d4037, #6d4c41, #5d4037)'
|
|
||||||
};
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fire-flicker {
|
@keyframes fire-glow {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(-50%) rotate(-1deg) scaleY(1) scaleX(1);
|
filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3)) brightness(1);
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: translateX(-50%) rotate(0.5deg) scaleY(1.08) scaleX(0.95);
|
|
||||||
filter: hue-rotate(2deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateX(-50%) rotate(1deg) scaleY(1.05) scaleX(1.02);
|
|
||||||
filter: hue-rotate(-1deg);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translateX(-50%) rotate(-0.5deg) scaleY(0.98) scaleX(1.05);
|
|
||||||
filter: hue-rotate(3deg);
|
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(-50%) rotate(-1deg) scaleY(0.95) scaleX(0.98);
|
filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.5)) brightness(1.1);
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fire-flicker-left {
|
@keyframes flame-flicker-main {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(-2deg) scaleY(1) scaleX(1);
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: rotate(1deg) scaleY(1.12) scaleX(0.88);
|
|
||||||
filter: hue-rotate(-2deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: rotate(2deg) scaleY(1.08) scaleX(0.92);
|
|
||||||
filter: hue-rotate(1deg);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: rotate(-1deg) scaleY(0.95) scaleX(1.08);
|
|
||||||
filter: hue-rotate(-1deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(-2deg) scaleY(0.90) scaleX(1.12);
|
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fire-flicker-right {
|
|
||||||
0% {
|
|
||||||
transform: rotate(1.5deg) scaleY(1) scaleX(1);
|
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: rotate(-0.8deg) scaleY(1.1) scaleX(1.05);
|
|
||||||
filter: hue-rotate(2deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: rotate(-2deg) scaleY(1.05) scaleX(0.95);
|
|
||||||
filter: hue-rotate(-1deg);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: rotate(2.5deg) scaleY(0.92) scaleX(1.08);
|
|
||||||
filter: hue-rotate(1deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(3deg) scaleY(0.95) scaleX(0.90);
|
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes particle-float-1 {
|
|
||||||
0%, 100% {
|
|
||||||
transform: translateY(0px) scale(1) rotate(0deg);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-15px) scale(1.2) rotate(180deg);
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.05) scaleX(0.98) rotate(-1deg);
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes particle-float-2 {
|
@keyframes flame-flicker-one {
|
||||||
0%, 100% {
|
0% {
|
||||||
transform: translateY(0px) scale(1) rotate(0deg);
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-12px) scale(0.8) rotate(-180deg);
|
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.08) scaleX(0.95) rotate(1deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes particle-float-3 {
|
@keyframes flame-flicker-two {
|
||||||
0%, 100% {
|
0% {
|
||||||
transform: translateX(-50%) translateY(0px) scale(1) rotate(0deg);
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.03) scaleX(1.02) rotate(-0.5deg);
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flame-flicker-three {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.06) scaleX(0.97) rotate(1.5deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flame-flicker-four {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.04) scaleX(1.01) rotate(-1.2deg);
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flame-flicker-five {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
||||||
|
opacity: 0.93;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.07) scaleX(0.96) rotate(0.8deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flame-small {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) scaleX(1);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
50% {
|
100% {
|
||||||
transform: translateX(-50%) translateY(-18px) scale(1.5) rotate(360deg);
|
transform: scaleY(1.15) scaleX(0.9);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes flame-small-one {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) scaleX(1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.12) scaleX(0.95);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flame-small-two {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) scaleX(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(1.18) scaleX(0.88);
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue