James Coleman
d5d63c52cb
- The violet strand, which stands for network ports, had no glow while the cyan one did, so the two halves of the icon read as different weights; each strand now carries a glow of its own colour. - The five MIDI pins glow cyan in place of the dimmer shadow they had, clipped to the inside of the socket so the glow does not spill over the anchor's ring. - The macOS and Windows icon files are rendered again from the new drawing. The menu bar icon is the anchor's outline alone, which did not change.
191 lines
12 KiB
XML
191 lines
12 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 512 512" width="100%" height="100%" id="midi-harbor-icon">
|
|
<defs>
|
|
<!-- Background Gradient -->
|
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#0a101d" />
|
|
<stop offset="50%" stop-color="#07172b" />
|
|
<stop offset="100%" stop-color="#020813" />
|
|
</linearGradient>
|
|
<!-- Ring Glow Gradient -->
|
|
<linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#00f2fe" />
|
|
<stop offset="50%" stop-color="#0066ff" />
|
|
<stop offset="100%" stop-color="#7b2cbf" />
|
|
</linearGradient>
|
|
<!-- Anchor Metal Gradient -->
|
|
<linearGradient id="anchorGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff" />
|
|
<stop offset="40%" stop-color="#e0e8f5" />
|
|
<stop offset="70%" stop-color="#94a3b8" />
|
|
<stop offset="100%" stop-color="#475569" />
|
|
</linearGradient>
|
|
<!-- Cable Outer Glow -->
|
|
<radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#00f2fe" stop-opacity="0.25" />
|
|
<stop offset="100%" stop-color="#00f2fe" stop-opacity="0" />
|
|
</radialGradient>
|
|
<!-- Drop Shadow Filters -->
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="12" result="blur" />
|
|
<feOffset in="blur" dx="0" dy="8" result="offset" />
|
|
<feFlood flood-color="#000000" flood-opacity="0.6" result="color" />
|
|
<feComposite in="color" in2="offset" operator="in" result="shadow" />
|
|
<feMerge>
|
|
<feMergeNode in="shadow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="metalShadow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="15" result="blur" />
|
|
<feOffset in="blur" dx="0" dy="10" result="offset" />
|
|
<feFlood flood-color="#000000" flood-opacity="0.7" result="color" />
|
|
<feComposite in="color" in2="offset" operator="in" result="shadow" />
|
|
<feMerge>
|
|
<feMergeNode in="shadow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow" filterUnits="userSpaceOnUse" x="0" y="0" width="512" height="512">
|
|
<feGaussianBlur stdDeviation="8" result="blur" />
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
|
</filter>
|
|
<filter id="violetGlow" filterUnits="userSpaceOnUse" x="0" y="0" width="512" height="512" color-interpolation-filters="sRGB">
|
|
<feFlood flood-color="#c084fc" flood-opacity="0.85" result="glowColor" />
|
|
<feComposite in="glowColor" in2="SourceAlpha" operator="in" result="glowSource" />
|
|
<feGaussianBlur in="glowSource" stdDeviation="12" result="outerGlow" />
|
|
<feGaussianBlur in="glowSource" stdDeviation="3" result="innerGlow" />
|
|
<feMerge>
|
|
<feMergeNode in="outerGlow" />
|
|
<feMergeNode in="innerGlow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="cyanGlow" filterUnits="userSpaceOnUse" x="0" y="0" width="512" height="512" color-interpolation-filters="sRGB">
|
|
<feFlood flood-color="#67e8f9" flood-opacity="0.85" result="glowColor" />
|
|
<feComposite in="glowColor" in2="SourceAlpha" operator="in" result="glowSource" />
|
|
<feGaussianBlur in="glowSource" stdDeviation="12" result="outerGlow" />
|
|
<feGaussianBlur in="glowSource" stdDeviation="3" result="innerGlow" />
|
|
<feMerge>
|
|
<feMergeNode in="outerGlow" />
|
|
<feMergeNode in="innerGlow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<clipPath id="socketInteriorClip" clipPathUnits="userSpaceOnUse">
|
|
<circle cx="256" cy="125" r="34" />
|
|
</clipPath>
|
|
<style>
|
|
.bg-ring { fill: none; stroke: url(#ringGrad); stroke-width: 3; opacity: 0.3; }
|
|
.data-stream { fill: none; stroke: #00f2fe; stroke-width: 2.5; stroke-dasharray: 6 8; opacity: 0.8; }
|
|
.anchor-body { fill: url(#anchorGrad); }
|
|
.midi-pin { fill: #07172b; stroke: #00f2fe; stroke-width: 1.5; }
|
|
.connection-node { fill: #00f2fe; filter: url(#glow); }
|
|
.status-pulse { fill: #10b981; filter: url(#glow); }
|
|
</style>
|
|
</defs>
|
|
<g id="layer-background" inkscape:label="Background" inkscape:groupmode="layer">
|
|
<g id="background-tile" inkscape:label="Tile and border">
|
|
<!-- App Icon Background -->
|
|
<rect width="512" height="512" rx="112" fill="url(#bgGrad)" id="tile" />
|
|
<!-- Outer Border Highlight -->
|
|
<rect x="2" y="2" width="508" height="508" rx="110" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-opacity="0.1" id="border-highlight" />
|
|
</g>
|
|
<g id="ambient-glow" inkscape:label="Ambient glow">
|
|
<!-- Center Ambient Glow -->
|
|
<circle cx="256" cy="256" r="200" fill="url(#centerGlow)" id="center-glow" />
|
|
</g>
|
|
</g>
|
|
<g id="layer-topology" inkscape:label="Topology" inkscape:groupmode="layer">
|
|
<!-- Network & Hardware Topology Mesh (Harbor Node Web) -->
|
|
<g opacity="0.4" id="topology-mesh" inkscape:label="Harbor mesh">
|
|
<g id="orbital-rings" inkscape:label="Orbital rings">
|
|
<!-- Orbital Rings -->
|
|
<circle cx="256" cy="256" r="180" class="bg-ring" stroke-dasharray="12 12" id="outer-orbit" />
|
|
<circle cx="256" cy="256" r="130" class="bg-ring" id="inner-orbit" />
|
|
</g>
|
|
<g id="connection-lines" inkscape:label="Connection lines">
|
|
<!-- Connection Lines (USB, Network, BLE, Virtual) -->
|
|
<path d="M 100 180 L 170 210 M 412 180 L 342 210 M 120 340 L 180 310 M 392 340 L 332 310" stroke="#00f2fe" stroke-width="2" opacity="0.5" stroke-dasharray="4 4" id="diagonal-links" />
|
|
<path d="M 256 70 L 256 120 M 256 390 L 256 440" stroke="#00f2fe" stroke-width="2" opacity="0.5" stroke-dasharray="4 4" id="vertical-links" />
|
|
</g>
|
|
<g id="peripheral-ports" inkscape:label="Peripheral ports">
|
|
<!-- Peripheral Nodes -->
|
|
<!-- Hardware (USB) -->
|
|
<circle cx="100" cy="180" r="8" fill="#07172b" stroke="#00f2fe" stroke-width="2" id="hardware-port" />
|
|
<!-- Network (RTP) -->
|
|
<circle cx="412" cy="180" r="8" fill="#07172b" stroke="#00f2fe" stroke-width="2" id="network-port" />
|
|
<!-- Bluetooth LE -->
|
|
<circle cx="120" cy="340" r="8" fill="#07172b" stroke="#00f2fe" stroke-width="2" id="bluetooth-port" />
|
|
<!-- Virtual Port -->
|
|
<circle cx="392" cy="340" r="8" fill="#07172b" stroke="#00f2fe" stroke-width="2" id="virtual-port" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g id="layer-cables" inkscape:label="Connection cables" inkscape:groupmode="layer">
|
|
<!-- Auto-Repairing Connection Swirls (MIDI Cable + Harbor Anchor Motif) -->
|
|
<g id="connection-cables" inkscape:label="Cable strands">
|
|
<g id="cyan-cable" inkscape:label="Hardware and virtual">
|
|
<!-- Left Cable Strand (Hardware/Virtual) -->
|
|
<path d="M 100 180 C 140 240, 180 340, 256 380" fill="none" stroke="#00f2fe" stroke-width="5" stroke-linecap="round" opacity="0.8" filter="url(#cyanGlow)" id="cyan-strand" />
|
|
</g>
|
|
<g id="violet-cable" inkscape:label="Network and RTP-MIDI">
|
|
<!-- Right Cable Strand (Network/RTP) -->
|
|
<path d="M 412 180 C 372 240, 332 340, 256 380" fill="none" stroke="#7b2cbf" stroke-width="5" stroke-linecap="round" opacity="0.8" filter="url(#violetGlow)" id="violet-strand" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g id="layer-anchor" inkscape:label="MIDI anchor" inkscape:groupmode="layer">
|
|
<!-- CENTRAL ANCHOR & MIDI DIN CONNECTOR HYBRID -->
|
|
<g filter="url(#shadow)" id="anchor-assembly" inkscape:label="Anchor assembly">
|
|
<g id="metal-silhouette" inkscape:label="Single metal silhouette">
|
|
<!-- MIDI socket note head with one lower anchor-fluke flag. -->
|
|
<path d="M 141.000 310.000 L 181.000 310.000 L 168.000 322.000 C 172.000 350.000 198.000 363.000 242.000 365.000 L 242.000 202.000 L 165.000 202.000 C 163.874 202.000 162.836 201.628 162.000 201.000 L 162.000 203.000 C 162.000 204.657 160.657 206.000 159.000 206.000 L 153.000 206.000 C 151.343 206.000 150.000 204.657 150.000 203.000 L 150.000 179.000 C 150.000 177.343 151.343 176.000 153.000 176.000 L 159.000 176.000 C 160.657 176.000 162.000 177.343 162.000 179.000 L 162.000 181.000 C 162.836 180.372 163.874 180.000 165.000 180.000 L 242.000 180.000 L 242.000 170.926 C 222.320 164.935 208.000 146.640 208.000 125.000 C 208.000 98.490 229.490 77.000 256.000 77.000 C 282.510 77.000 304.000 98.490 304.000 125.000 C 304.000 146.640 289.680 164.935 270.000 170.926 L 270.000 180.000 L 347.000 180.000 C 348.126 180.000 349.164 180.372 350.000 181.000 L 350.000 179.000 C 350.000 177.343 351.343 176.000 353.000 176.000 L 359.000 176.000 C 360.657 176.000 362.000 177.343 362.000 179.000 L 362.000 203.000 C 362.000 204.657 360.657 206.000 359.000 206.000 L 353.000 206.000 C 351.343 206.000 350.000 204.657 350.000 203.000 L 350.000 201.000 C 349.164 201.628 348.126 202.000 347.000 202.000 L 270.000 202.000 L 270.000 404.000 C 270.000 407.314 267.314 410.000 264.000 410.000 L 248.000 410.000 C 247.127 410.000 246.298 409.814 245.550 409.479 C 198.464 404.741 150.000 379.287 150.000 320.000 Z M 292.000 125.000 C 292.000 105.118 275.882 89.000 256.000 89.000 C 236.118 89.000 220.000 105.118 220.000 125.000 C 220.000 144.882 236.118 161.000 256.000 161.000 C 275.882 161.000 292.000 144.882 292.000 125.000 Z" class="anchor-body" id="anchor-silhouette" filter="url(#metalShadow)" />
|
|
</g>
|
|
<g id="midi-socket" inkscape:label="MIDI socket">
|
|
<g id="socket-rim" inkscape:label="Socket interior and rim">
|
|
<!-- MIDI socket interior and rim. -->
|
|
<circle cx="256" cy="125" r="36" fill="#07172b" id="socket-interior" />
|
|
<circle cx="256" cy="125" r="35" fill="none" stroke="#00f2fe" stroke-width="2" opacity="0.6" id="socket-outline" />
|
|
</g>
|
|
<!-- MIDI 5-PIN Configuration Inside the Anchor Shackling Ring -->
|
|
<!-- 180-degree arc standard MIDI layout -->
|
|
<g filter="url(#cyanGlow)" clip-path="url(#socketInteriorClip)" id="midi-pins" inkscape:label="Five MIDI pins">
|
|
<!-- Pin 1 (Sound / Control) -->
|
|
<circle cx="230" cy="133" r="4.5" class="midi-pin" />
|
|
<!-- Pin 2 (Shield/Ground) -->
|
|
<circle cx="240" cy="113" r="4.5" class="midi-pin" />
|
|
<!-- Pin 3 (Master Center) -->
|
|
<circle cx="256" cy="105" r="5" fill="#00f2fe" />
|
|
<!-- Pin 4 (Data +) -->
|
|
<circle cx="272" cy="113" r="4.5" class="midi-pin" />
|
|
<!-- Pin 5 (Data -) -->
|
|
<circle cx="282" cy="133" r="4.5" class="midi-pin" />
|
|
</g>
|
|
</g>
|
|
<g id="heartbeat" inkscape:label="Heartbeat">
|
|
<!-- Center Daemon "Alive" Heartbeat Core -->
|
|
<circle cx="256" cy="191" r="6" fill="#10b981" filter="url(#glow)" id="heartbeat-light" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g id="layer-wireless" inkscape:label="Wireless signal" inkscape:groupmode="layer">
|
|
<g id="wireless-waves" inkscape:label="Signal arcs">
|
|
<!-- Bluetooth & Network Wireless Waves Overlaying the Anchor Stock -->
|
|
<path d="M 236 70 C 248 62, 264 62, 276 70" fill="none" stroke="#00f2fe" stroke-width="3" stroke-linecap="round" opacity="0.9" filter="url(#glow)" id="inner-wave" />
|
|
<path d="M 224 56 C 244 42, 268 42, 288 56" fill="none" stroke="#00f2fe" stroke-width="3" stroke-linecap="round" opacity="0.5" id="outer-wave" />
|
|
</g>
|
|
</g>
|
|
<g id="layer-indicators" inkscape:label="Status lights" inkscape:groupmode="layer">
|
|
<g id="link-status" inkscape:label="Active links">
|
|
<!-- Status / Health Indicators (Daemon Persistence Nodes) -->
|
|
<!-- Active Link (Green) -->
|
|
<circle cx="170" cy="210" r="4" class="status-pulse" id="left-link-status" />
|
|
<circle cx="342" cy="210" r="4" class="status-pulse" id="right-link-status" />
|
|
</g>
|
|
<g id="data-particles" inkscape:label="Data particles">
|
|
<!-- Subtle Data Flow Particles -->
|
|
<circle cx="256" cy="260" r="2.5" fill="#00f2fe" opacity="0.9" id="upper-particle" />
|
|
<circle cx="256" cy="310" r="2.5" fill="#00f2fe" opacity="0.9" id="lower-particle" />
|
|
</g>
|
|
</g>
|
|
</svg>
|