nordisk/facett

.nornir/minimap-inset.svg

<svg xmlns="http://www.w3.org/2000/svg" width="720" height="420" viewBox="0 0 720 420" font-family="ui-sans-serif,system-ui,sans-serif">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1b2436"/>
      <stop offset="1" stop-color="#2b3a55"/>
    </linearGradient>
    <marker id="arw" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto">
      <path d="M0,0 L7,3 L0,6 Z" fill="#8fb8ff"/>
    </marker>
  </defs>

  <!-- main 3D viewport -->
  <rect x="8" y="8" width="704" height="404" rx="10" fill="url(#sky)" stroke="#3d517a"/>
  <text x="26" y="40" fill="#cfe0ff" font-size="17" font-weight="700">facett-map3d — 3D OSM city (orbit view)</text>

  <!-- faux extruded blocks -->
  <g fill="#4a5f8a" stroke="#6f88bd" stroke-width="1">
    <rect x="90"  y="250" width="52" height="70"/>
    <rect x="160" y="220" width="46" height="100"/>
    <rect x="222" y="270" width="60" height="60"/>
    <rect x="300" y="200" width="44" height="130"/>
    <rect x="360" y="255" width="58" height="72"/>
  </g>
  <text x="26" y="395" fill="#7f93bd" font-size="12">42°  ⤢2.3  ▲18k tris   [1]top [2]iso [3]obl  R reset</text>

  <!-- minimap inset (bottom-right) -->
  <g>
    <rect x="512" y="212" width="184" height="184" rx="6" fill="#0f1626" fill-opacity="0.9" stroke="#8697bd"/>
    <text x="604" y="230" fill="#9fb3e0" font-size="11" text-anchor="middle" font-weight="600">minimap</text>

    <!-- footprint scatter -->
    <g fill="#5a6d97">
      <circle cx="540" cy="270" r="1.6"/><circle cx="552" cy="286" r="1.6"/><circle cx="566" cy="262" r="1.6"/>
      <circle cx="580" cy="300" r="1.6"/><circle cx="596" cy="278" r="1.6"/><circle cx="612" cy="264" r="1.6"/>
      <circle cx="628" cy="296" r="1.6"/><circle cx="644" cy="272" r="1.6"/><circle cx="660" cy="288" r="1.6"/>
      <circle cx="548" cy="320" r="1.6"/><circle cx="574" cy="338" r="1.6"/><circle cx="602" cy="330" r="1.6"/>
      <circle cx="632" cy="344" r="1.6"/><circle cx="660" cy="322" r="1.6"/><circle cx="588" cy="356" r="1.6"/>
      <circle cx="618" cy="366" r="1.6"/>
    </g>

    <!-- view cone from the focus -->
    <path d="M604,304 L560,244 L648,244 Z" fill="#8fb8ff" fill-opacity="0.22" stroke="#8fb8ff" stroke-opacity="0.7"/>
    <!-- heading arrow -->
    <line x1="604" y1="304" x2="604" y2="250" stroke="#8fb8ff" stroke-width="1.5" marker-end="url(#arw)"/>
    <!-- you-are-here focus dot -->
    <circle cx="604" cy="304" r="4.2" fill="#8fb8ff" stroke="#e8f0ff" stroke-width="1.4"/>
  </g>

  <!-- callouts -->
  <g font-size="12" fill="#cfe0ff">
    <text x="700" y="410" text-anchor="end" fill="#7f93bd">turn the camera → the cone swings by the same angle (proven headless)</text>
  </g>
</svg>