<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 542" preserveAspectRatio="none" fill="none">
 <defs>
  <linearGradient id="sky" x2="0" y2="410" gradientUnits="userSpaceOnUse"><stop stop-color="#e9eddb"/><stop offset=".65" stop-color="#f2ddba"/><stop offset="1" stop-color="#ddb893"/></linearGradient>
  <linearGradient id="canal" x2="0" y1="386" y2="510" gradientUnits="userSpaceOnUse"><stop stop-color="#628e91"/><stop offset="1" stop-color="#194e50"/></linearGradient>
  <linearGradient id="light"><stop stop-color="#e4b856"/><stop offset="1" stop-color="#fff0d4"/></linearGradient>
  <pattern id="brick" width="18" height="12" patternUnits="userSpaceOnUse"><path d="M0 0h18M0 6h18M9 0v6M0 6v6" stroke="#fff0d4" stroke-opacity=".12" stroke-width=".6"/></pattern>
  <g id="window"><path fill="#283f3d" stroke="#e2cfaa" stroke-width="2" d="M0 0h14v25H0z"/><path fill="#ebc679" d="M2 12h10v11H2z"/><path stroke="#e2cfaa" stroke-width="1.5" d="M7 0v25M0 10h14"/><path stroke="#4e4636" stroke-width="2" d="M-2 27h18"/></g>
  <g id="bike" stroke="#253f3e" stroke-width="1.8" stroke-linejoin="round"><circle cx="0" cy="0" r="10"/><circle cx="32" cy="0" r="10"/><path d="m0 0 10-18 8 18H0l22-15 10 15-7-23h6M6-19h9M18 0h5"/></g>
 </defs>
 <path fill="url(#sky)" d="M0 0h390v542H0z"/>
 <g stroke="#b4bba1" stroke-width="1" opacity=".25"><path d="M-20 98q120-40 196-12t240-22M-15 110q120-40 196-12t240-22M60 0q-8 46 22 74m238-74q10 23-15 66"/><path stroke-dasharray="3 5" d="M0 149q115-15 168-37t222-1"/></g>
 <!-- Lower the whole street, preserving the houses' proportions and details. -->
 <g transform="translate(0 32)">
 <g id="distant-roofs" fill="#8d9e91" opacity=".35"><path d="M0 308v-96l16-10 16 10v96m279 0V194h12v-9h18v9h12v114m-260 0v-95l19-14 19 14v95m119 0v-122l13-9 13 9v122"/></g>
 <!-- Narrow, irregular canal houses share the map's brick and water palette. -->
 <g id="canal-house-roofs" stroke="#645948" stroke-width="1.4" stroke-linejoin="round">
  <path fill="#8b6850" d="M-13 359V228l21-25 27 25v131Z"/>
  <path fill="#c98168" d="M35 359V211h8v-15h9v-13h22v13h9v15h8v148Z"/>
  <path fill="#d5bc85" d="M92 359V235l26-28 28 28v124Z"/>
  <path fill="#895c49" d="M147 359V206h7v-12h10v-16h20v16h10v12h7v153Z"/>
  <path fill="#628e91" d="M202 359V220q0-12 10-15l12-17 12 17q10 3 10 15v139Z"/>
  <path fill="#bd795d" d="M247 359V239l26-29 27 29v120Z"/>
  <path fill="#b19a72" d="M301 359V199h8v-12h30v12h8v160Z"/>
  <path fill="#936451" d="M348 359V226l26-22 27 22v133Z"/>
 </g>
 <path fill="url(#brick)" d="M0 235h390v123H0z"/>
 <g stroke="#f5e7c8" stroke-width="3"><path d="M35 213h56m56-5h54m46 32h53m1-39h47M-13 230h48M92 237h54M348 229h53"/></g>
 <g>
  <use href="#window" x="4" y="247"/><use href="#window" x="4" y="290"/>
  <use href="#window" x="46" y="229"/><use href="#window" x="68" y="229"/><use href="#window" x="46" y="272"/><use href="#window" x="68" y="272"/>
  <use href="#window" x="101" y="251"/><use href="#window" x="124" y="251"/><use href="#window" x="101" y="292"/><use href="#window" x="124" y="292"/>
  <use href="#window" x="156" y="224"/><use href="#window" x="179" y="224"/><use href="#window" x="156" y="264"/><use href="#window" x="179" y="264"/>
  <use href="#window" x="209" y="234"/><use href="#window" x="230" y="234"/><use href="#window" x="209" y="277"/><use href="#window" x="230" y="277"/>
  <use href="#window" x="255" y="253"/><use href="#window" x="278" y="253"/>
  <use href="#window" x="310" y="217"/><use href="#window" x="330" y="217"/><use href="#window" x="310" y="260"/><use href="#window" x="330" y="260"/>
  <use href="#window" x="358" y="245"/><use href="#window" x="379" y="245"/><use href="#window" x="358" y="287"/>
 </g>
 <g fill="#314b43" stroke="#d9bd8b" stroke-width="2"><path d="M7 329h17v30H7zm41-15h15v45H48zm24 0h12v45H72zm35 15h23v30h-23zm102-14h19v44h-19zm103-10h22v54h-22zm53 17h18v37h-18z"/></g>
 <!-- A small brown café, striped awning, plants and a handwritten street poster. -->
 <path fill="#463e30" d="M151 304h46v55h-46z"/><path fill="url(#light)" d="M156 325h19v28h-19zm25 0h11v28h-11z"/>
 <path fill="#234a43" stroke="#d8b87c" d="M146 302h57v17h-57z"/>
 <text x="174" y="313" fill="#f4dfad" text-anchor="middle" font-family="Georgia,serif" font-size="8" letter-spacing="1">CAFÉ</text>
 <path fill="#385e51" d="M251 300h46l7 18h-59z"/><path stroke="#e9d7ae" stroke-width="7" d="m256 301-3 16m18-16v16m15-16 4 16"/>
 <path fill="#efd19b" d="m281 331 12-1 1 20-12 1z"/><path stroke="#9b654e" d="m284 335 6-1m-6 4h6m-5 4h4"/>
 <g fill="#71865b"><ellipse cx="50" cy="267" rx="9" ry="4"/><ellipse cx="233" cy="271" rx="8" ry="5"/><ellipse cx="337" cy="298" rx="8" ry="5"/></g><g fill="#bd6e58"><circle cx="45" cy="265" r="2"/><circle cx="53" cy="263" r="2"/><circle cx="233" cy="267" r="2"/></g>
 <path fill="#c1b293" d="M0 359h390v24H0z"/><path stroke="#a1947c" stroke-width="1" d="M0 368h390M0 377h390m-360-18-9 24m54-24-9 24m54-24-9 24m54-24-9 24m54-24-9 24m54-24-9 24m54-24-9 24m54-24-9 24"/>
 <path fill="#7e7760" d="M0 381h390v11H0z"/><path fill="url(#canal)" d="M0 392h390v118H0z"/>
 <g stroke="#e4ba77" opacity=".32" stroke-width="3"><path d="M45 403h30m-25 8h16m84-6h39m-35 9h29m-28 11h23m-14 11h12m140-33h25m-19 10h14"/></g>
 <g stroke="#9cbcb0" opacity=".45" stroke-linecap="round"><path d="M9 425h24m51 5h27m177 9h39m-107 27h32m-245-8h43m48 24h30m203-15h24M181 496h35"/></g>
 <!-- Houseboat on the quiet water. -->
 <g transform="translate(31 404)"><path fill="#3d514b" stroke="#d1c19c" d="m0 26 97 1-10 13H14Z"/><path fill="#cab993" stroke="#685c44" d="M13 4h65v23H13Z"/><path fill="#5c7064" d="M9 1h73v5H9z"/><g fill="#edcd85" stroke="#6a7563" stroke-width="2"><path d="M20 11h13v10H20zm22 0h13v10H42zm22 0h8v16h-8z"/></g><path stroke="#544f3b" stroke-width="3" d="M67 0v-10"/><path stroke="#a9b29b" d="M15 43h67m-58 5h41"/></g>
 <use href="#bike" x="112" y="363"/>
 <!-- Canal rail and a single glowing street lamp. -->
 <g stroke="#344b42" stroke-width="2.5"><path d="M209 372h181m-173 0v16m26-16v16m26-16v16m26-16v16m26-16v16m26-16v16m26-16v16M335 366v-81m-7-2h14l-3 15h-8z"/></g>
 <circle cx="335" cy="288" r="16" fill="#f5da94" opacity=".15"/><path fill="#f8d990" d="M330 285h10l-2 11h-6z"/><path stroke="#344b42" stroke-width="2" d="m326 283 9-6 9 6m-9-6v-4"/>
 <!-- Soft tree canopy frames the street instead of hiding the architecture. -->
 <path stroke="#65745b" stroke-width="5" d="M15 372 9 272m4 49 20-32m-22 11L0 283"/>
 <g fill="#80916b"><circle cx="3" cy="267" r="26"/><circle cx="21" cy="276" r="20"/><circle cx="-7" cy="294" r="23"/></g><g fill="#a4ac7c" opacity=".65"><circle cx="10" cy="252" r="16"/><circle cx="27" cy="268" r="12"/></g>
 <path stroke="#526653" opacity=".55" d="m285 167 6-3 6 3m9-12 5-2 5 2"/>
 </g>
</svg>
