Загрузка...

Анимированное SVG-лого V с градиентом и эффектом свечения. Идеально для брендинга, индикатора загрузки или декоративных элементов.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="512" height="512">
<defs>
<!-- Coral to Gold Gradient -->
<linearGradient id="vGrad" x1="0%" y1="30%" x2="100%" y2="70%">
<stop offset="0%" stop-color="#F97316"/>
<stop offset="50%" stop-color="#FB923C"/>
<stop offset="100%" stop-color="#EAB308"/>
</linearGradient>
<!-- Ignition Glow Gradient -->
<radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FEF3C7"/>
<stop offset="25%" stop-color="#FBBF24"/>
<stop offset="50%" stop-color="#F97316" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#F97316" stop-opacity="0"/>
</radialGradient>
</defs>
<style>
.glow-outer {
animation: pulseUp 2.5s ease-in-out infinite;
}
.glow-inner {
animation: pulseUp 2.5s ease-in-out infinite;
animation-delay: 0.1s;
}
.glow-core {
animation: pulseUpCore 2.5s ease-in-out infinite;
animation-delay: 0.15s;
}
@keyframes pulseUp {
0%, 100% {
transform: translateY(0);
opacity: 0.9;
}
50% {
transform: translateY(-8px);
opacity: 1;
}
}
@keyframes pulseUpCore {
0%, 100% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(-8px);
opacity: 1;
filter: brightness(1.2);
}
}
</style>
<!-- V Shape -->
<path
d="M 17 26
Q 16 22, 21 24
L 50 60
L 79 24
Q 84 22, 83 26
L 52 74
Q 50 78, 48 74
Z"
fill="url(#vGrad)"
/>
<!-- Inner Triangle Cutout -->
<path
d="M 30 33
L 50 56
L 70 33
Q 50 48, 30 33 Z"
fill="#000"
/>
<!-- Animated Glow Layers -->
<ellipse class="glow-outer" cx="50" cy="52" rx="10" ry="8" fill="url(#glowGrad)" opacity="0.6"/>
<ellipse class="glow-inner" cx="50" cy="52" rx="6" ry="5" fill="#FBBF24" opacity="0.8"/>
<ellipse class="glow-core" cx="50" cy="52" rx="2.5" ry="2" fill="#FEF3C7"/>
</svg>