nordisk/facett

facett-map3d/.nornir/assets/pitched-roofs-and-colours.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 300" font-family="ui-sans-serif,system-ui,sans-serif" font-size="13">
  <rect width="780" height="300" fill="#0f1720"/>
  <text x="16" y="26" fill="#e6edf3" font-size="15" font-weight="700">Pitched roofs + OSM colours — the extrusion → roof → colour pipeline</text>

  <!-- pipeline row -->
  <g fill="#8fd6ff" text-anchor="middle">
    <rect x="16"  y="46" width="150" height="44" rx="6" fill="#132234" stroke="#2b4a66"/>
    <text x="91"  y="66">OSM tags</text><text x="91" y="82" fill="#7fb0cc" font-size="11">roof:shape · *:colour</text>
    <rect x="196" y="46" width="160" height="44" rx="6" fill="#132234" stroke="#2b4a66"/>
    <text x="276" y="66">Way fields</text><text x="276" y="82" fill="#7fb0cc" font-size="11">roof_shape · b/roof colour</text>
    <rect x="386" y="46" width="176" height="44" rx="6" fill="#132234" stroke="#2b4a66"/>
    <text x="474" y="66">resolve_prism_style</text><text x="474" y="82" fill="#7fb0cc" font-size="11">default gabled · class tint</text>
    <rect x="592" y="46" width="172" height="44" rx="6" fill="#132234" stroke="#2b4a66"/>
    <text x="678" y="66">extrude_prism_styled</text><text x="678" y="82" fill="#7fb0cc" font-size="11">walls · eave · roof</text>
  </g>
  <g stroke="#6fd3f5" stroke-width="2" fill="none">
    <path d="M166 68 H196"/><path d="M356 68 H386"/><path d="M562 68 H592"/>
  </g>

  <!-- opt-in knob -->
  <text x="16" y="120" fill="#e6edf3" font-weight="600">RoofStyle knob (opt-in, golden-safe)</text>
  <g text-anchor="middle" font-size="12">
    <rect x="16" y="130" width="150" height="34" rx="6" fill="#1a2b1a" stroke="#3a663a"/>
    <text x="91" y="151" fill="#9fe0a0">Flat = byte-stable</text>
    <rect x="196" y="130" width="200" height="34" rx="6" fill="#2b241a" stroke="#66553a"/>
    <text x="296" y="151" fill="#e0c79f">Pitched = roofs + colours</text>
  </g>

  <!-- roof geometry sketches -->
  <text x="16" y="200" fill="#e6edf3" font-weight="600">roof geometry (sits on the eave cap)</text>
  <g stroke="#e6edf3" stroke-width="1.5" fill="none">
    <!-- flat -->
    <rect x="40" y="240" width="80" height="34" fill="#2a3a4a"/>
    <line x1="40" y1="240" x2="120" y2="240"/>
    <text x="80" y="292" fill="#7fb0cc" font-size="11" text-anchor="middle">Flat</text>
    <!-- gabled -->
    <rect x="210" y="248" width="80" height="26" fill="#2a3a4a"/>
    <polygon points="210,248 250,224 290,248" fill="#b05c42" stroke="#e6edf3"/>
    <line x1="250" y1="224" x2="250" y2="224"/>
    <text x="250" y="292" fill="#7fb0cc" font-size="11" text-anchor="middle">Gabled (ridge on long axis)</text>
    <!-- hipped -->
    <rect x="420" y="248" width="80" height="26" fill="#2a3a4a"/>
    <polygon points="420,248 460,222 500,248" fill="#96646c" stroke="#e6edf3"/>
    <text x="460" y="292" fill="#7fb0cc" font-size="11" text-anchor="middle">Hipped (apex over centroid)</text>
  </g>

  <!-- colours -->
  <g font-size="11">
    <text x="600" y="196" fill="#e6edf3" font-weight="600" font-size="13">colours</text>
    <rect x="600" y="208" width="16" height="16" fill="#b05c42"/><text x="622" y="220" fill="#7fb0cc">tile → terracotta</text>
    <rect x="600" y="230" width="16" height="16" fill="#4a4e56"/><text x="622" y="242" fill="#7fb0cc">slate → charcoal</text>
    <rect x="600" y="252" width="16" height="16" fill="#969aa0"/><text x="622" y="264" fill="#7fb0cc">metal → zinc</text>
    <rect x="600" y="274" width="16" height="16" fill="#f5f5f5"/><text x="622" y="286" fill="#7fb0cc">building:colour facade</text>
  </g>
</svg>