summaryrefslogtreecommitdiff
path: root/frontend/public/mission-tactical.svg
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/public/mission-tactical.svg')
-rw-r--r--frontend/public/mission-tactical.svg335
1 files changed, 335 insertions, 0 deletions
diff --git a/frontend/public/mission-tactical.svg b/frontend/public/mission-tactical.svg
new file mode 100644
index 0000000..342af2a
--- /dev/null
+++ b/frontend/public/mission-tactical.svg
@@ -0,0 +1,335 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" role="img" aria-label="Tactical observability mesh"
+ font-family="'JetBrains Mono', 'Inter', monospace">
+ <defs>
+ <!-- Background gradient: deep dusk -> night -->
+ <radialGradient id="bgGlow" cx="50%" cy="55%" r="65%">
+ <stop offset="0%" stop-color="#1a2548"/>
+ <stop offset="55%" stop-color="#0e1530"/>
+ <stop offset="100%" stop-color="#070a18"/>
+ </radialGradient>
+ <!-- Globe fill: very subtle inner depth -->
+ <radialGradient id="globeFill" cx="38%" cy="36%" r="65%">
+ <stop offset="0%" stop-color="rgba(232,184,122,0.08)"/>
+ <stop offset="60%" stop-color="rgba(217,106,138,0.04)"/>
+ <stop offset="100%" stop-color="rgba(11,17,36,0)"/>
+ </radialGradient>
+ <!-- Soft glow for active nodes -->
+ <radialGradient id="nodeGlow">
+ <stop offset="0%" stop-color="#e8b87a" stop-opacity="0.85"/>
+ <stop offset="60%" stop-color="#e8b87a" stop-opacity="0.10"/>
+ <stop offset="100%" stop-color="#e8b87a" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="nodeMag">
+ <stop offset="0%" stop-color="#d96a8a" stop-opacity="0.95"/>
+ <stop offset="60%" stop-color="#d96a8a" stop-opacity="0.10"/>
+ <stop offset="100%" stop-color="#d96a8a" stop-opacity="0"/>
+ </radialGradient>
+ <!-- Scanline pattern -->
+ <pattern id="scan" width="2" height="3" patternUnits="userSpaceOnUse">
+ <rect width="2" height="3" fill="rgba(0,0,0,0)"/>
+ <rect width="2" height="1" fill="rgba(240,234,223,0.025)"/>
+ </pattern>
+ <!-- Pulse animation for the central reticle -->
+ <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="1.6" result="b"/>
+ <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+ </filter>
+ </defs>
+
+ <!-- Backdrop -->
+ <rect width="600" height="600" fill="url(#bgGlow)"/>
+ <rect width="600" height="600" fill="url(#scan)"/>
+
+ <!-- Outer hairline frame + corner brackets (matches Heisei UI language) -->
+ <g stroke="rgba(240,234,223,0.55)" fill="none" stroke-width="1">
+ <!-- corner brackets, 18px legs -->
+ <path d="M14,14 L14,32 M14,14 L32,14"/>
+ <path d="M586,14 L568,14 M586,14 L586,32"/>
+ <path d="M14,586 L14,568 M14,586 L32,586"/>
+ <path d="M586,586 L568,586 M586,586 L586,568"/>
+ </g>
+ <rect x="14" y="14" width="572" height="572" fill="none"
+ stroke="rgba(240,234,223,0.10)" stroke-width="0.5"/>
+
+ <!-- Tactical header strip -->
+ <g font-size="9" letter-spacing="2.5" fill="rgba(240,234,223,0.55)">
+ <text x="32" y="40">SORYU // OBSERVABILITY MESH</text>
+ <text x="568" y="40" text-anchor="end" fill="#e8b87a">REC <tspan fill="#d96a8a">●</tspan>
+ <animate attributeName="opacity" values="1;0.4;1" dur="1.4s" repeatCount="indefinite"/>
+ </text>
+ </g>
+ <g font-size="8" letter-spacing="1.8" fill="rgba(240,234,223,0.40)">
+ <text x="32" y="54">35.6764°N · 139.6500°E</text>
+ <text x="568" y="54" text-anchor="end">v1.0.0 / LIVE</text>
+ </g>
+
+ <!-- Faint grid behind the globe -->
+ <g stroke="rgba(154,215,224,0.08)" stroke-width="0.5" fill="none">
+ <line x1="60" y1="300" x2="540" y2="300"/>
+ <line x1="300" y1="60" x2="300" y2="540"/>
+ </g>
+
+ <!-- ============ GLOBE ============ -->
+ <!-- Centered at (300,320), radius 200 -->
+ <g transform="translate(300 320)">
+ <!-- Filled disc -->
+ <circle r="200" fill="url(#globeFill)"/>
+ <!-- Equator + main rings (orthographic projection) -->
+ <g fill="none" stroke="rgba(232,184,122,0.55)" stroke-width="1.1">
+ <circle r="200"/>
+ </g>
+ <!-- Latitude ellipses (front-only effect via stroke-dasharray on back) -->
+ <g fill="none" stroke="rgba(232,184,122,0.42)" stroke-width="0.7">
+ <ellipse rx="200" ry="170"/>
+ <ellipse rx="200" ry="120"/>
+ <ellipse rx="200" ry="60"/>
+ <ellipse rx="200" ry="0.4"/> <!-- equator line emphasis -->
+ </g>
+ <!-- Longitude ellipses (rotated) -->
+ <g fill="none" stroke="rgba(232,184,122,0.42)" stroke-width="0.7">
+ <ellipse rx="60" ry="200"/>
+ <ellipse rx="120" ry="200"/>
+ <ellipse rx="170" ry="200"/>
+ </g>
+ <!-- Tilted accent rings for depth -->
+ <g fill="none" stroke="rgba(217,106,138,0.55)" stroke-width="0.9"
+ transform="rotate(-22)">
+ <ellipse rx="200" ry="80"/>
+ </g>
+ <g fill="none" stroke="rgba(154,215,224,0.45)" stroke-width="0.7"
+ transform="rotate(28)">
+ <ellipse rx="200" ry="40"/>
+ </g>
+
+ <!-- ============ NODES + MESH LINKS ============ -->
+ <!-- Coordinates roughly evoke continents on a tilted globe -->
+ <g>
+ <!-- Mesh links: each path has an id so animated pulses can ride along it.
+ The arc itself shows a flowing dash pattern, and a glowing dot
+ travels along it via <animateMotion>. -->
+ <g fill="none" stroke-linecap="round">
+ <!-- arc 1 (amber) NODE-A → TYO -->
+ <path id="arc1" d="M -120,-70 Q -40,-180 60,-90"
+ stroke="rgba(232,184,122,0.55)" stroke-width="0.9"
+ stroke-dasharray="2 6" stroke-dashoffset="0" filter="url(#softGlow)">
+ <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="1.6s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="0.65;1;0.65" dur="2.6s" repeatCount="indefinite"/>
+ </path>
+ <!-- arc 2 (amber) TYO → SE -->
+ <path id="arc2" d="M 60,-90 Q 130,-30 150, 60"
+ stroke="rgba(232,184,122,0.55)" stroke-width="0.9"
+ stroke-dasharray="2 6" filter="url(#softGlow)">
+ <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="1.9s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="0.65;1;0.65" dur="2.9s" repeatCount="indefinite"/>
+ </path>
+ <!-- arc 3 (amber) SE → SW -->
+ <path id="arc3" d="M 150, 60 Q 60,150 -30,130"
+ stroke="rgba(232,184,122,0.55)" stroke-width="0.9"
+ stroke-dasharray="2 6" filter="url(#softGlow)">
+ <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="2.1s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="0.6;0.95;0.6" dur="3.1s" repeatCount="indefinite"/>
+ </path>
+ <!-- arc 4 (amber) SW → NW (closes ring) -->
+ <path id="arc4" d="M -30,130 Q -120,80 -120,-70"
+ stroke="rgba(232,184,122,0.55)" stroke-width="0.9"
+ stroke-dasharray="2 6" filter="url(#softGlow)">
+ <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="1.7s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="0.6;0.9;0.6" dur="2.7s" repeatCount="indefinite"/>
+ </path>
+ <!-- arc 5 (magenta) NW → SE diagonal -->
+ <path id="arc5" d="M -120,-70 Q 0,-30 150, 60"
+ stroke="rgba(217,106,138,0.55)" stroke-width="0.9"
+ stroke-dasharray="3 7" filter="url(#softGlow)">
+ <animate attributeName="stroke-dashoffset" from="0" to="-40" dur="2.4s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="0.55;0.95;0.55" dur="3.4s" repeatCount="indefinite"/>
+ </path>
+ <!-- arc 6 (magenta) TYO → SW diagonal -->
+ <path id="arc6" d="M 60,-90 Q -10, 60 -30,130"
+ stroke="rgba(217,106,138,0.45)" stroke-width="0.8"
+ stroke-dasharray="3 7" filter="url(#softGlow)">
+ <animate attributeName="stroke-dashoffset" from="0" to="-40" dur="2.8s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="0.5;0.9;0.5" dur="3.8s" repeatCount="indefinite"/>
+ </path>
+ </g>
+
+ <!-- Traveling data packets (glowing dots ride each arc).
+ Each packet is a tiny circle with <animateMotion> referencing
+ the arc path via <mpath>. Stagger begin times so packets feel asynchronous. -->
+ <g>
+ <!-- amber packets -->
+ <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)">
+ <animateMotion dur="2.8s" repeatCount="indefinite" rotate="auto" begin="0s">
+ <mpath href="#arc1"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" repeatCount="indefinite"/>
+ </circle>
+ <circle r="2.0" fill="#e8b87a" filter="url(#softGlow)">
+ <animateMotion dur="2.8s" repeatCount="indefinite" rotate="auto" begin="1.2s">
+ <mpath href="#arc1"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" repeatCount="indefinite" begin="1.2s"/>
+ </circle>
+
+ <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)">
+ <animateMotion dur="3.2s" repeatCount="indefinite" rotate="auto" begin="0.4s">
+ <mpath href="#arc2"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="3.2s" repeatCount="indefinite" begin="0.4s"/>
+ </circle>
+
+ <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)">
+ <animateMotion dur="3.0s" repeatCount="indefinite" rotate="auto" begin="0.9s">
+ <mpath href="#arc3"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.0s" repeatCount="indefinite" begin="0.9s"/>
+ </circle>
+
+ <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)">
+ <animateMotion dur="2.6s" repeatCount="indefinite" rotate="auto" begin="1.6s">
+ <mpath href="#arc4"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.6s" repeatCount="indefinite" begin="1.6s"/>
+ </circle>
+
+ <!-- magenta packets (longer arcs, brighter core) -->
+ <circle r="2.6" fill="#d96a8a" filter="url(#softGlow)">
+ <animateMotion dur="3.6s" repeatCount="indefinite" rotate="auto" begin="0.2s">
+ <mpath href="#arc5"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="3.6s" repeatCount="indefinite" begin="0.2s"/>
+ </circle>
+ <circle r="2.0" fill="#d96a8a" filter="url(#softGlow)">
+ <animateMotion dur="3.6s" repeatCount="indefinite" rotate="auto" begin="2.0s">
+ <mpath href="#arc5"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="3.6s" repeatCount="indefinite" begin="2.0s"/>
+ </circle>
+
+ <circle r="2.4" fill="#d96a8a" filter="url(#softGlow)">
+ <animateMotion dur="4.0s" repeatCount="indefinite" rotate="auto" begin="1.0s">
+ <mpath href="#arc6"/>
+ </animateMotion>
+ <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="4.0s" repeatCount="indefinite" begin="1.0s"/>
+ </circle>
+ </g>
+
+ <!-- Active nodes (amber primary) -->
+ <g>
+ <!-- Tokyo (origin / pulse) -->
+ <circle cx="60" cy="-90" r="14" fill="url(#nodeGlow)"/>
+ <circle cx="60" cy="-90" r="3" fill="#e8b87a"/>
+ <circle cx="60" cy="-90" r="3" fill="none" stroke="#e8b87a" stroke-width="1">
+ <animate attributeName="r" values="3;18;3" dur="3s" repeatCount="indefinite"/>
+ <animate attributeName="opacity" values="1;0;1" dur="3s" repeatCount="indefinite"/>
+ </circle>
+
+ <!-- Other nodes — subtle independent pulses -->
+ <circle cx="-120" cy="-70" r="10" fill="url(#nodeGlow)"/>
+ <circle cx="-120" cy="-70" r="2.4" fill="#e8b87a">
+ <animate attributeName="opacity" values="0.7;1;0.7" dur="2.2s" repeatCount="indefinite"/>
+ </circle>
+ <circle cx="-120" cy="-70" r="2.4" fill="none" stroke="#e8b87a" stroke-width="0.8">
+ <animate attributeName="r" values="2.4;13;2.4" dur="3.4s" repeatCount="indefinite" begin="0.7s"/>
+ <animate attributeName="opacity" values="0.9;0;0.9" dur="3.4s" repeatCount="indefinite" begin="0.7s"/>
+ </circle>
+
+ <circle cx="150" cy="60" r="12" fill="url(#nodeMag)"/>
+ <circle cx="150" cy="60" r="2.6" fill="#d96a8a">
+ <animate attributeName="opacity" values="0.7;1;0.7" dur="2.8s" repeatCount="indefinite" begin="0.4s"/>
+ </circle>
+ <circle cx="150" cy="60" r="2.6" fill="none" stroke="#d96a8a" stroke-width="0.8">
+ <animate attributeName="r" values="2.6;14;2.6" dur="3.6s" repeatCount="indefinite" begin="1.4s"/>
+ <animate attributeName="opacity" values="0.9;0;0.9" dur="3.6s" repeatCount="indefinite" begin="1.4s"/>
+ </circle>
+
+ <circle cx="-30" cy="130" r="9" fill="url(#nodeGlow)"/>
+ <circle cx="-30" cy="130" r="2.2" fill="#e8b87a">
+ <animate attributeName="opacity" values="0.7;1;0.7" dur="2.4s" repeatCount="indefinite" begin="1.1s"/>
+ </circle>
+
+ <!-- Smaller relays — gentle blink so they feel alive -->
+ <g fill="#9ad7e0">
+ <circle cx="-160" cy="40" r="1.6">
+ <animate attributeName="opacity" values="0.4;1;0.4" dur="2.0s" repeatCount="indefinite" begin="0.0s"/>
+ </circle>
+ <circle cx="20" cy="-160" r="1.6">
+ <animate attributeName="opacity" values="0.4;1;0.4" dur="2.4s" repeatCount="indefinite" begin="0.5s"/>
+ </circle>
+ <circle cx="170" cy="-30" r="1.6">
+ <animate attributeName="opacity" values="0.4;1;0.4" dur="2.8s" repeatCount="indefinite" begin="1.0s"/>
+ </circle>
+ <circle cx="-80" cy="170" r="1.6">
+ <animate attributeName="opacity" values="0.4;1;0.4" dur="2.2s" repeatCount="indefinite" begin="1.5s"/>
+ </circle>
+ <circle cx="100" cy="160" r="1.6">
+ <animate attributeName="opacity" values="0.4;1;0.4" dur="2.6s" repeatCount="indefinite" begin="2.0s"/>
+ </circle>
+ </g>
+ </g>
+
+ <!-- Node label (Tokyo origin) -->
+ <g font-size="7.5" letter-spacing="1.5" fill="rgba(240,234,223,0.78)">
+ <line x1="60" y1="-90" x2="120" y2="-130" stroke="rgba(232,184,122,0.55)" stroke-width="0.6"/>
+ <text x="124" y="-127" fill="#e8b87a">NODE-001 · TYO</text>
+ <text x="124" y="-117">42ms · 99.998%</text>
+ </g>
+ </g>
+
+ <!-- Concentric reticle around the globe -->
+ <g fill="none" stroke="rgba(232,184,122,0.30)" stroke-width="0.6" stroke-dasharray="2 4">
+ <circle r="225"/>
+ </g>
+ <g fill="none" stroke="rgba(232,184,122,0.18)" stroke-width="0.5">
+ <circle r="245"/>
+ </g>
+ </g>
+
+ <!-- ============ HUD CROSSHAIR (centered) ============ -->
+ <g stroke="rgba(232,184,122,0.55)" stroke-width="0.8" fill="none">
+ <line x1="300" y1="100" x2="300" y2="130"/>
+ <line x1="300" y1="510" x2="300" y2="540"/>
+ <line x1="80" y1="320" x2="110" y2="320"/>
+ <line x1="490" y1="320" x2="520" y2="320"/>
+ </g>
+
+ <!-- ============ Bottom telemetry strip ============ -->
+ <g transform="translate(0 555)">
+ <!-- Mini bar chart -->
+ <g fill="#9ad7e0" opacity="0.7">
+ <rect x="32" y="0" width="3" height="14"/>
+ <rect x="38" y="4" width="3" height="10"/>
+ <rect x="44" y="-2" width="3" height="16"/>
+ <rect x="50" y="2" width="3" height="12"/>
+ <rect x="56" y="-4" width="3" height="18"/>
+ <rect x="62" y="0" width="3" height="14"/>
+ <rect x="68" y="-3" width="3" height="17"/>
+ <rect x="74" y="1" width="3" height="13"/>
+ <rect x="80" y="-5" width="3" height="19"/>
+ <rect x="86" y="-1" width="3" height="15"/>
+ <rect x="92" y="3" width="3" height="11"/>
+ <rect x="98" y="-6" width="3" height="20"/>
+ <rect x="104" y="-2" width="3" height="16"/>
+ <rect x="110" y="0" width="3" height="14"/>
+ </g>
+ <text x="32" y="32" font-size="8" letter-spacing="1.6" fill="rgba(240,234,223,0.45)">TELEMETRY · 1m</text>
+
+ <!-- Stat blocks -->
+ <g font-size="9" letter-spacing="1.6" fill="rgba(240,234,223,0.7)">
+ <text x="240" y="6" fill="rgba(154,215,224,0.85)">VELOCITY</text>
+ <text x="240" y="22" fill="#f0eadf" font-size="14" letter-spacing="0.5">603 km/h</text>
+
+ <text x="380" y="6" fill="rgba(154,215,224,0.85)">ENERGY</text>
+ <text x="380" y="22" fill="#f0eadf" font-size="14" letter-spacing="0.5">32.0 MJ</text>
+
+ <text x="500" y="6" fill="rgba(154,215,224,0.85)">UPTIME</text>
+ <text x="500" y="22" fill="#e8b87a" font-size="14" letter-spacing="0.5">99.998%</text>
+ </g>
+ </g>
+
+ <!-- Subtle vertical kanji watermark on the right -->
+ <g font-family="'Noto Serif JP', serif" font-size="11" letter-spacing="6"
+ fill="rgba(240,234,223,0.18)" writing-mode="tb">
+ <text x="572" y="120">観測</text>
+ </g>
+</svg>
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-20 22:31:12 +0000