perubahann icon/logo
This commit is contained in:
dios.one
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 582 KiB |
+13
-80
@@ -1,87 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<!-- Core glow gradient -->
|
||||
<radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"/>
|
||||
<stop offset="30%" stop-color="#80F0FF"/>
|
||||
<stop offset="70%" stop-color="#00CFFF"/>
|
||||
<stop offset="100%" stop-color="#0080CC"/>
|
||||
</radialGradient>
|
||||
<!-- Outer glow -->
|
||||
<radialGradient id="outerGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#00E5FF" stop-opacity="0.6"/>
|
||||
<stop offset="50%" stop-color="#CC44FF" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="#CC44FF" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<!-- Ray gradient -->
|
||||
<linearGradient id="rayGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FF44CC" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#FF44CC" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<!-- Background gradient -->
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0D1230"/>
|
||||
<stop offset="100%" stop-color="#080C1A"/>
|
||||
<stop offset="0%" stop-color="#2D1B69"/>
|
||||
<stop offset="100%" stop-color="#1A1145"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFD700"/>
|
||||
<stop offset="100%" stop-color="#B8860B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="greenGrad" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#00C9A7"/>
|
||||
<stop offset="100%" stop-color="#00E676"/>
|
||||
</linearGradient>
|
||||
<!-- Blur filter for glow -->
|
||||
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="15" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
<filter id="bigGlow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="30"/>
|
||||
</filter>
|
||||
<filter id="rayGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="512" height="512" rx="100" fill="url(#bgGrad)"/>
|
||||
|
||||
<!-- Stars -->
|
||||
<circle cx="80" cy="90" r="1.5" fill="white" opacity="0.5"/>
|
||||
<circle cx="430" cy="70" r="1" fill="white" opacity="0.4"/>
|
||||
<circle cx="400" cy="400" r="1.5" fill="white" opacity="0.3"/>
|
||||
<circle cx="60" cy="380" r="1" fill="white" opacity="0.5"/>
|
||||
<circle cx="150" cy="50" r="1" fill="white" opacity="0.3"/>
|
||||
<circle cx="350" cy="450" r="1" fill="white" opacity="0.4"/>
|
||||
<circle cx="450" cy="200" r="1" fill="white" opacity="0.3"/>
|
||||
<circle cx="70" cy="250" r="1.5" fill="white" opacity="0.4"/>
|
||||
<circle cx="200" cy="440" r="1" fill="white" opacity="0.3"/>
|
||||
<circle cx="440" cy="130" r="1" fill="white" opacity="0.5"/>
|
||||
|
||||
<!-- Outer glow behind everything -->
|
||||
<circle cx="256" cy="256" r="120" fill="url(#outerGlow)" filter="url(#bigGlow)"/>
|
||||
|
||||
<!-- Starburst rays -->
|
||||
<g transform="translate(256,256)" filter="url(#rayGlow)">
|
||||
<!-- 16 rays at various angles -->
|
||||
<line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(0)"/>
|
||||
<line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(22.5)"/>
|
||||
<line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(45)"/>
|
||||
<line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(67.5)"/>
|
||||
<line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(90)"/>
|
||||
<line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(112.5)"/>
|
||||
<line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(135)"/>
|
||||
<line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(157.5)"/>
|
||||
<line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(180)"/>
|
||||
<line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(202.5)"/>
|
||||
<line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(225)"/>
|
||||
<line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(247.5)"/>
|
||||
<line x1="0" y1="0" x2="160" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(270)"/>
|
||||
<line x1="0" y1="0" x2="130" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(292.5)"/>
|
||||
<line x1="0" y1="0" x2="155" y2="0" stroke="#FF44CC" stroke-width="2.5" opacity="0.8" transform="rotate(315)"/>
|
||||
<line x1="0" y1="0" x2="125" y2="0" stroke="#FF44CC" stroke-width="2" opacity="0.7" transform="rotate(337.5)"/>
|
||||
</g>
|
||||
|
||||
<!-- Orbital ring -->
|
||||
<ellipse cx="256" cy="256" rx="170" ry="55" fill="none" stroke="#00D4FF" stroke-width="3" opacity="0.8" transform="rotate(-25, 256, 256)"/>
|
||||
<ellipse cx="256" cy="256" rx="170" ry="55" fill="none" stroke="#00E5FF" stroke-width="1.5" opacity="0.4" transform="rotate(-25, 256, 256)" filter="url(#rayGlow)"/>
|
||||
|
||||
<!-- Core sphere -->
|
||||
<circle cx="256" cy="256" r="55" fill="url(#coreGlow)" filter="url(#softGlow)"/>
|
||||
<!-- Core highlight -->
|
||||
<circle cx="245" cy="244" r="25" fill="white" opacity="0.15"/>
|
||||
<circle cx="240" cy="240" r="12" fill="white" opacity="0.2"/>
|
||||
<text x="256" y="300" text-anchor="middle" font-family="Arial Black, sans-serif" font-weight="900" font-size="220" fill="url(#goldGrad)">40</text>
|
||||
<path d="M340 180 L370 120 L380 155 L410 145 L370 200 Z" fill="url(#greenGrad)"/>
|
||||
<text x="256" y="420" text-anchor="middle" font-family="Arial, sans-serif" font-weight="700" font-size="72" fill="white" letter-spacing="12">NOVA40</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,9 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* Nova40 Icon — matches the mobile app icon:
|
||||
* Glowing cyan sphere with magenta starburst rays and an orbital ring
|
||||
* on a dark navy background.
|
||||
* Nova40 Icon — renders the actual app icon PNG from assets.
|
||||
*/
|
||||
export default function Nova40Icon({ size = 48, className = '', rounded = true }) {
|
||||
return (
|
||||
@@ -23,74 +21,22 @@ export default function Nova40Icon({ size = 48, className = '', rounded = true }
|
||||
}
|
||||
|
||||
/**
|
||||
* Animated CSS-only version of the Nova40 icon for decorative use
|
||||
* Same PNG icon but with a subtle glow pulse animation around it.
|
||||
*/
|
||||
export function Nova40IconAnimated({ size = 64, className = '' }) {
|
||||
const coreSize = size * 0.3
|
||||
const rayLength = size * 0.38
|
||||
const ringRx = size * 0.42
|
||||
const ringRy = size * 0.14
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative flex-shrink-0 ${className}`}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg viewBox="0 0 100 100" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient id="iconCoreGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stopColor="#FFFFFF" />
|
||||
<stop offset="30%" stopColor="#80F0FF" />
|
||||
<stop offset="70%" stopColor="#00CFFF" />
|
||||
<stop offset="100%" stopColor="#0080CC" />
|
||||
</radialGradient>
|
||||
<filter id="iconSoftGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" />
|
||||
</filter>
|
||||
<filter id="iconRayGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Outer glow */}
|
||||
<circle cx="50" cy="50" r="25" fill="#00E5FF" opacity="0.15" filter="url(#iconSoftGlow)" />
|
||||
<circle cx="50" cy="50" r="30" fill="#CC44FF" opacity="0.08" filter="url(#iconSoftGlow)" />
|
||||
|
||||
{/* Starburst rays */}
|
||||
<g filter="url(#iconRayGlow)">
|
||||
{Array.from({ length: 16 }).map((_, i) => {
|
||||
const angle = (i * 360) / 16
|
||||
const len = i % 2 === 0 ? 38 : 30
|
||||
const rad = (angle * Math.PI) / 180
|
||||
return (
|
||||
<line
|
||||
key={i}
|
||||
x1="50"
|
||||
y1="50"
|
||||
x2={50 + len * Math.cos(rad)}
|
||||
y2={50 + len * Math.sin(rad)}
|
||||
stroke="#FF44CC"
|
||||
strokeWidth={i % 2 === 0 ? '0.8' : '0.5'}
|
||||
opacity={i % 2 === 0 ? 0.8 : 0.6}
|
||||
<div className="absolute -inset-2 bg-nova-primary/20 rounded-2xl blur-xl animate-pulse-slow" />
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="Nova40"
|
||||
width={size}
|
||||
height={size}
|
||||
className="relative w-full h-full object-cover rounded-xl"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</g>
|
||||
|
||||
{/* Orbital ring */}
|
||||
<ellipse
|
||||
cx="50" cy="50" rx="42" ry="14"
|
||||
fill="none" stroke="#00D4FF" strokeWidth="0.8" opacity="0.8"
|
||||
transform="rotate(-25, 50, 50)"
|
||||
/>
|
||||
|
||||
{/* Core sphere */}
|
||||
<circle cx="50" cy="50" r="12" fill="url(#iconCoreGlow)">
|
||||
<animate attributeName="r" values="12;13;12" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Highlight */}
|
||||
<circle cx="47" cy="47" r="5" fill="white" opacity="0.15" />
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user