4fa61eb522
✨ 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
268 lines
No EOL
7.6 KiB
JavaScript
268 lines
No EOL
7.6 KiB
JavaScript
import { useTheme } from '../lib/theme-context';
|
|
|
|
export default function AnimatedFireLogo({ size = 80 }) {
|
|
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 (
|
|
<div
|
|
className="fire-logo-container relative flex items-center justify-center"
|
|
style={{ width: size, height: size * 1.5 }}
|
|
>
|
|
<svg
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
x="0px"
|
|
y="0px"
|
|
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"
|
|
/>
|
|
|
|
<path
|
|
className="flame-main one"
|
|
fill={currentColors.flame2}
|
|
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"
|
|
/>
|
|
|
|
<path
|
|
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>{`
|
|
.fire-logo-container {
|
|
filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
|
|
}
|
|
|
|
.fire-svg {
|
|
animation: fire-glow 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.flame-main {
|
|
animation: flame-flicker-main 1.5s ease-in-out infinite alternate;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.flame-main.one {
|
|
animation: flame-flicker-one 1.8s ease-in-out infinite alternate;
|
|
animation-delay: -0.3s;
|
|
}
|
|
|
|
.flame-main.two {
|
|
animation: flame-flicker-two 1.2s ease-in-out infinite alternate;
|
|
animation-delay: -0.6s;
|
|
}
|
|
|
|
.flame-main.three {
|
|
animation: flame-flicker-three 2.1s ease-in-out infinite alternate;
|
|
animation-delay: -0.9s;
|
|
}
|
|
|
|
.flame-main.four {
|
|
animation: flame-flicker-four 1.7s ease-in-out infinite alternate;
|
|
animation-delay: -0.2s;
|
|
}
|
|
|
|
.flame-main.five {
|
|
animation: flame-flicker-five 1.9s ease-in-out infinite alternate;
|
|
animation-delay: -0.7s;
|
|
}
|
|
|
|
.flame {
|
|
animation: flame-small 1.0s ease-in-out infinite alternate;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.flame.one {
|
|
animation: flame-small-one 1.3s ease-in-out infinite alternate;
|
|
animation-delay: -0.4s;
|
|
}
|
|
|
|
.flame.two {
|
|
animation: flame-small-two 0.9s ease-in-out infinite alternate;
|
|
animation-delay: -0.1s;
|
|
}
|
|
|
|
@keyframes fire-glow {
|
|
0% {
|
|
filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3)) brightness(1);
|
|
}
|
|
100% {
|
|
filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.5)) brightness(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes flame-flicker-main {
|
|
0% {
|
|
transform: scaleY(1) scaleX(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scaleY(1.05) scaleX(0.98) rotate(-1deg);
|
|
opacity: 0.95;
|
|
}
|
|
}
|
|
|
|
@keyframes flame-flicker-one {
|
|
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-two {
|
|
0% {
|
|
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;
|
|
}
|
|
100% {
|
|
transform: scaleY(1.15) scaleX(0.9);
|
|
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>
|
|
</div>
|
|
);
|
|
}
|