<?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>
