Ole-Morten Duesund
49f584016e
Created comprehensive branding package for SkyView including: Assets Created: - SVG logo with animated radar theme for header - Multi-size favicon set (16px, 32px, 48px) - High-resolution app icon (512x512) for mobile/desktop - Aviation-themed radar design with animated aircraft blips UI Updates: - Updated HTML with proper favicon links and theme color - Enhanced header layout to include logo alongside version info - Added responsive CSS styling for new branding elements - Logo features animated radar sweep and aircraft tracking theme Technical Details: - All assets use SVG format for scalability and crisp display - Radar theme with cyan/blue color scheme matching app design - Logo includes animated elements (radar sweep, blinking aircraft) - Favicons optimized for different display sizes - Added proper meta tags for mobile app integration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
No EOL
4.9 KiB
XML
101 lines
No EOL
4.9 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<!-- Background gradient -->
|
|
<radialGradient id="bgGradient" cx="50%" cy="50%" r="70%">
|
|
<stop offset="0%" style="stop-color:#0066cc;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#003d66;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#001a26;stop-opacity:1" />
|
|
</radialGradient>
|
|
|
|
<!-- Radar sweep gradient -->
|
|
<linearGradient id="sweepGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#00aadd;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#0088bb;stop-opacity:0.3" />
|
|
</linearGradient>
|
|
|
|
<!-- Glow filter -->
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- Strong glow for center -->
|
|
<filter id="strongGlow" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="6" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background circle with border -->
|
|
<circle cx="256" cy="256" r="240" fill="url(#bgGradient)" stroke="#00d4ff" stroke-width="6"/>
|
|
|
|
<!-- Outer radar grid circles -->
|
|
<circle cx="256" cy="256" r="200" stroke="#00d4ff" stroke-width="4" fill="none" opacity="0.3" filter="url(#glow)"/>
|
|
<circle cx="256" cy="256" r="160" stroke="#00d4ff" stroke-width="3.5" fill="none" opacity="0.4"/>
|
|
<circle cx="256" cy="256" r="120" stroke="#00d4ff" stroke-width="3" fill="none" opacity="0.5"/>
|
|
<circle cx="256" cy="256" r="80" stroke="#00d4ff" stroke-width="2.5" fill="none" opacity="0.6"/>
|
|
<circle cx="256" cy="256" r="40" stroke="#00d4ff" stroke-width="2" fill="none" opacity="0.7"/>
|
|
|
|
<!-- Radar sweep line -->
|
|
<line x1="256" y1="256" x2="416" y2="140" stroke="url(#sweepGradient)" stroke-width="8" opacity="0.9" filter="url(#glow)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 256 256" to="360 256 256" dur="4s" repeatCount="indefinite"/>
|
|
</line>
|
|
|
|
<!-- Cross hairs -->
|
|
<line x1="256" y1="40" x2="256" y2="472" stroke="#00d4ff" stroke-width="2" opacity="0.3"/>
|
|
<line x1="40" y1="256" x2="472" y2="256" stroke="#00d4ff" stroke-width="2" opacity="0.3"/>
|
|
|
|
<!-- Diagonal cross hairs -->
|
|
<line x1="120" y1="120" x2="392" y2="392" stroke="#00d4ff" stroke-width="1.5" opacity="0.2"/>
|
|
<line x1="392" y1="120" x2="120" y2="392" stroke="#00d4ff" stroke-width="1.5" opacity="0.2"/>
|
|
|
|
<!-- Aircraft blips of various types -->
|
|
<!-- Commercial aircraft -->
|
|
<circle cx="350" cy="180" r="8" fill="#00ff00" filter="url(#glow)">
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="180" cy="350" r="8" fill="#00ff00" opacity="0.8">
|
|
<animate attributeName="opacity" values="0.8;0.4;0.8" dur="2.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Military aircraft -->
|
|
<circle cx="320" cy="320" r="8" fill="#ffff00" opacity="0.9">
|
|
<animate attributeName="opacity" values="0.9;0.5;0.9" dur="1.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- General aviation -->
|
|
<circle cx="160" cy="200" r="6" fill="#00ff88" opacity="0.7">
|
|
<animate attributeName="opacity" values="0.7;0.3;0.7" dur="3s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="300" cy="120" r="6" fill="#00ff88" opacity="0.6">
|
|
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="2.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Helicopter -->
|
|
<circle cx="140" cy="300" r="6" fill="#ff8800" opacity="0.8">
|
|
<animate attributeName="opacity" values="0.8;0.4;0.8" dur="1.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Emergency aircraft -->
|
|
<circle cx="380" cy="280" r="8" fill="#ff0000" opacity="1" filter="url(#glow)">
|
|
<animate attributeName="opacity" values="1;0.6;1" dur="1s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Center beacon with strong glow -->
|
|
<circle cx="256" cy="256" r="12" fill="#00d4ff" filter="url(#strongGlow)"/>
|
|
<circle cx="256" cy="256" r="8" fill="#ffffff" opacity="0.9"/>
|
|
<circle cx="256" cy="256" r="4" fill="#00d4ff"/>
|
|
|
|
<!-- Range rings with labels -->
|
|
<text x="256" y="90" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#00d4ff" opacity="0.6">200 km</text>
|
|
<text x="256" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff" opacity="0.5">160 km</text>
|
|
<text x="256" y="170" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#00d4ff" opacity="0.4">120 km</text>
|
|
</svg> |