File size: 2,477 Bytes
76c69f7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import { motion } from "motion/react";
export default function AnimatedLogo({ className = "w-8 h-8" }: { className?: string }) {
return (
<motion.svg
className={className}
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
>
<defs>
<linearGradient id="crypto-grad-1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#4f46e5" /> {/* Indigo 600 */}
<stop offset="100%" stopColor="#0ea5e9" /> {/* Sky 500 */}
</linearGradient>
<linearGradient id="crypto-grad-2" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#2dd4bf" /> {/* Teal 400 */}
<stop offset="100%" stopColor="#3b82f6" /> {/* Blue 500 */}
</linearGradient>
<filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
{/* Background glowing element */}
<motion.polygon
points="50,5 90,27.5 90,72.5 50,95 10,72.5 10,27.5"
fill="url(#crypto-grad-1)"
fillOpacity="0.1"
stroke="url(#crypto-grad-2)"
strokeWidth="2"
filter="url(#neon-glow)"
initial={{ scale: 0.8, opacity: 0, rotate: -30 }}
animate={{ scale: 1, opacity: 1, rotate: 0 }}
transition={{ duration: 1.2, ease: "easeOut" }}
/>
{/* Abstract Sharp 'S' inside */}
<motion.path
d="M 65 35 L 35 35 L 35 50 L 65 50 L 65 65 L 35 65"
stroke="url(#crypto-grad-2)"
strokeWidth="10"
strokeLinecap="square"
strokeLinejoin="miter"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.5, ease: "easeInOut", delay: 0.4 }}
/>
{/* Accent bridging line */}
<motion.line
x1="20"
y1="50"
x2="80"
y2="50"
stroke="url(#crypto-grad-1)"
strokeWidth="4"
filter="url(#neon-glow)"
initial={{ scaleX: 0, opacity: 0 }}
animate={{ scaleX: 1, opacity: 1 }}
transition={{ duration: 1, ease: "easeOut", delay: 1 }}
/>
</motion.svg>
);
}
|