🔥 Enhanced Fire Logo with Sharp Realistic Flames
✨ Sharp Flame Edges: - Replaced rounded borders with custom clip-path polygons - Created jagged, realistic flame shapes for all fire elements - Sharp pointed tips and irregular edges like real fire - Different polygon patterns for main flame, left flame, and right flame 🎨 Enhanced Animation: - Added more complex flickering with 4 keyframe stages - Enhanced scaling and rotation variations - Added subtle hue-rotate filters for color shifting - More realistic flame movement patterns 🌟 Improved Particles: - Sharp-edged particles using octagonal clip-paths - Added rotation animations to particle floating - Different polygon shapes for visual variety - More dynamic movement with combined transforms The fire logo now looks much more realistic with sharp, jagged flame edges that flicker naturally
This commit is contained in:
Randall Stillwell
parent
cdb2e5f8ac
commit
4d4540c3e5
1 changed files with 106 additions and 16 deletions
|
|
@ -37,7 +37,6 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
.fire-left, .fire-main-flame, .fire-right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
}
|
||||
|
||||
.fire-main-flame {
|
||||
|
|
@ -49,6 +48,27 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
? '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;
|
||||
}
|
||||
|
|
@ -61,6 +81,23 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
? '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;
|
||||
}
|
||||
|
|
@ -73,6 +110,23 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
? '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;
|
||||
}
|
||||
|
|
@ -89,6 +143,7 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -98,6 +153,7 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -108,6 +164,7 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -128,69 +185,102 @@ export default function AnimatedFireLogo({ size = 80 }) {
|
|||
|
||||
@keyframes fire-flicker {
|
||||
0% {
|
||||
transform: translateX(-50%) rotate(-2deg) scaleY(1);
|
||||
transform: translateX(-50%) rotate(-1deg) scaleY(1) scaleX(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);
|
||||
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% {
|
||||
transform: translateX(-50%) rotate(-1deg) scaleY(0.95);
|
||||
transform: translateX(-50%) rotate(-1deg) scaleY(0.95) scaleX(0.98);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fire-flicker-left {
|
||||
0% {
|
||||
transform: rotate(-3deg) scaleY(1) scaleX(1);
|
||||
transform: rotate(-2deg) scaleY(1) scaleX(1);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(1deg) scaleY(1.12) scaleX(0.88);
|
||||
filter: hue-rotate(-2deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(2deg) scaleY(1.1) scaleX(0.9);
|
||||
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(-1deg) scaleY(0.9) scaleX(1.1);
|
||||
transform: rotate(-2deg) scaleY(0.90) scaleX(1.12);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fire-flicker-right {
|
||||
0% {
|
||||
transform: rotate(2deg) scaleY(1) scaleX(1);
|
||||
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(-1deg) scaleY(1.05) scaleX(1.1);
|
||||
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.9);
|
||||
transform: rotate(3deg) scaleY(0.95) scaleX(0.90);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float-1 {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) scale(1.2);
|
||||
transform: translateY(-15px) scale(1.2) rotate(180deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float-2 {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1) rotate(0deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px) scale(0.8);
|
||||
transform: translateY(-12px) scale(0.8) rotate(-180deg);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float-3 {
|
||||
0%, 100% {
|
||||
transform: translateX(-50%) translateY(0px) scale(1);
|
||||
transform: translateX(-50%) translateY(0px) scale(1) rotate(0deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(-18px) scale(1.5);
|
||||
transform: translateX(-50%) translateY(-18px) scale(1.5) rotate(360deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue