assets/logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-labelledby="title desc">
  <title id="title">Model Compass</title>
  <desc id="desc">A neon compass needle crossing three model tradeoff orbits.</desc>
  <defs>
    <radialGradient id="bg" cx="50%" cy="42%" r="72%">
      <stop offset="0" stop-color="#18204a"/>
      <stop offset="0.58" stop-color="#090d20"/>
      <stop offset="1" stop-color="#04060d"/>
    </radialGradient>
    <linearGradient id="needle" x1="150" y1="374" x2="362" y2="138" gradientUnits="userSpaceOnUse">
      <stop stop-color="#7c3cff"/>
      <stop offset="0.48" stop-color="#ff4fd8"/>
      <stop offset="1" stop-color="#00f0ff"/>
    </linearGradient>
    <linearGradient id="orbit" x1="92" y1="130" x2="424" y2="380" gradientUnits="userSpaceOnUse">
      <stop stop-color="#00f0ff"/>
      <stop offset="0.5" stop-color="#7c3cff"/>
      <stop offset="1" stop-color="#ff4fd8"/>
    </linearGradient>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect x="8" y="8" width="496" height="496" rx="116" fill="url(#bg)"/>
  <rect x="14" y="14" width="484" height="484" rx="110" fill="none" stroke="#8d9cff" stroke-opacity=".2" stroke-width="4"/>

  <g fill="none" stroke-linecap="round">
    <circle cx="256" cy="256" r="154" stroke="#7f8cff" stroke-opacity=".18" stroke-width="3"/>
    <ellipse cx="256" cy="256" rx="174" ry="78" transform="rotate(-18 256 256)" stroke="url(#orbit)" stroke-opacity=".72" stroke-width="6"/>
    <ellipse cx="256" cy="256" rx="174" ry="78" transform="rotate(42 256 256)" stroke="#00f0ff" stroke-opacity=".22" stroke-width="4"/>
    <path d="M112 330c76-22 130-86 170-192" stroke="#ff4fd8" stroke-opacity=".25" stroke-width="4"/>
  </g>

  <g filter="url(#glow)">
    <circle cx="112" cy="238" r="8" fill="#00f0ff"/>
    <circle cx="386" cy="178" r="8" fill="#ff4fd8"/>
    <circle cx="360" cy="360" r="8" fill="#9b6cff"/>
  </g>

  <g transform="rotate(8 256 256)">
    <path d="M256 106 302 257 256 406 210 257Z" fill="#0b1024" stroke="#cbd3ff" stroke-opacity=".32" stroke-width="4"/>
    <path d="M256 106 302 257 256 244Z" fill="url(#needle)" filter="url(#glow)"/>
    <path d="M256 406 210 257 256 268Z" fill="#5a2fe8"/>
    <circle cx="256" cy="256" r="24" fill="#070a17" stroke="#00f0ff" stroke-width="6"/>
    <circle cx="256" cy="256" r="7" fill="#ffffff"/>
  </g>

  <g fill="#dce2ff" opacity=".82">
    <rect x="232" y="58" width="48" height="7" rx="3.5"/>
    <rect x="447" y="232" width="7" height="48" rx="3.5"/>
    <rect x="232" y="447" width="48" height="7" rx="3.5"/>
    <rect x="58" y="232" width="7" height="48" rx="3.5"/>
  </g>
</svg>