Qwen3.7 Max

Prompt

Generate a valid standalone SVG of a city plan with a 3D-style representation of buildings.

Rules:
- SVG only
- no Markdown
- no external images
- no JavaScript
- include roads or city blocks
- include multiple buildings
- make at least some buildings appear 3D or isometric
- use simple vector shapes

Model answer

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
  <defs>
    <style>
      .road { fill: #555; stroke: #444; stroke-width: 2; }
      .grass { fill: #8fbc8f; }
      .bldg-top { fill: #e0e0e0; stroke: #333; stroke-width: 1; stroke-linejoin: round; }
      .bldg-front { fill: #b0b0b0; stroke: #333; stroke-width: 1; stroke-linejoin: round; }
      .bldg-side { fill: #808080; stroke: #333; stroke-width: 1; stroke-linejoin: round; }
      .window { fill: #aaddff; opacity: 0.6; }
    </style>
  </defs>

  <!-- Background / Ground -->
  <rect width="800" height="600" class="grass" />

  <!-- Roads (Grid System) -->
  <g id="roads">
    <!-- Horizontal Roads -->
    <rect x="0" y="100" width="800" height="60" class="road" />
    <rect x="0" y="300" width="800" height="60" class="road" />
    <rect x="0" y="500" width="800" height="60" class="road" />
    
    <!-- Vertical Roads -->
    <rect x="150" y="0" width="60" height="600" class="road" />
    <rect x="400" y="0" width="60" height="600" class="road" />
    <rect x="650" y="0" width="60" height="600" class="road" />
    
    <!-- Road Markings -->
    <line x1="0" y1="130" x2="800" y2="130" stroke="#fff" stroke-width="2" stroke-dasharray="10,10" opacity="0.5"/>
    <line x1="0" y1="330" x2="800" y2="330" stroke="#fff" stroke-width="2" stroke-dasharray="10,10" opacity="0.5"/>
    <line x1="0" y1="530" x2="800" y2="530" stroke="#fff" stroke-width="2" stroke-dasharray="10,10" opacity="0.5"/>
    <line x1="180" y1="0" x2="180" y2="600" stroke="#fff" stroke-width="2" stroke-dasharray="10,10" opacity="0.5"/>
    <line x1="430" y1="0" x2="430" y2="600" stroke="#fff" stroke-width="2" stroke-dasharray="10,10" opacity="0.5"/>
    <line x1="680" y1="0" x2="680" y2="600" stroke="#fff" stroke-width="2" stroke-dasharray="10,10" opacity="0.5"/>
  </g>

  <!-- City Blocks / Buildings (Pseudo-3D / Oblique Projection) -->
  <!-- Drawing order: Back to Front, Left to Right to handle occlusion -->

  <!-- Block 1: Top Left (Tall Office) -->
  <g transform="translate(30, 20)">
    <!-- Side Face -->
    <polygon points="80,20 110,5 110,125 80,140" class="bldg-side" />
    <!-- Front Face -->
    <rect x="10" y="20" width="70" height="120" class="bldg-front" />
    <!-- Top Face -->
    <polygon points="10,20 40,5 110,5 80,20" class="bldg-top" />
    <!-- Windows -->
    <rect x="20" y="30" width="15" height="20" class="window" />
    <rect x="50" y="30" width="15" height="20" class="window" />
    <rect x="20" y="60" width="15" height="20" class="window" />
    <rect x="50" y="60" width="15" height="20" class="window" />
    <rect x="20" y="90" width="15" height="20" class="window" />
    <rect x="50" y="90" width="15" height="20" class="window" />
  </g>

  <!-- Block 2: Top Middle (Wide Commercial) -->
  <g transform="translate(230, 40)">
    <polygon points="140,30 170,15 170,95 140,110" class="bldg-side" />
    <rect x="20" y="30" width="120" height="80" class="bldg-front" />
    <polygon points="20,30 50,15 170,15 140,30" class="bldg-top" />
    <!-- Storefronts -->
    <rect x="30" y="70" width="30" height="40" fill="#444" />
    <rect x="70" y="70" width="30" height="40" fill="#444" />
    <rect x="110" y="70" width="30" height="40" fill="#444" />
  </g>

  <!-- Block 3: Top Right (Skyscraper) -->
  <g transform="translate(480, 10)">
    <polygon points="100,10 140,-10 140,180 100,200" class="bldg-side" />
    <rect x="20" y="10" width="80" height="190" class="bldg-front" />
    <polygon points="20,10 60,-10 140,-10 100,10" class="bldg-top" />
    <!-- Vertical Windows -->
    <rect x="30" y="20" width="10" height="170" class="window" />
    <rect x="50" y="20" width="10" height="170" class="window" />
    <rect x="70" y="20" width="10" height="170" class="window" />
  </g>

  <!-- Block 4: Middle Left (Apartment) -->
  <g transform="translate(20, 180)">
    <polygon points="100,30 130,15 130,135 100,150" class="bldg-side" />
    <rect x="20" y="30" width="80" height="120" class="bldg-front" />
    <polygon points="20,30 50,15 130,15 100,30" class="bldg-top" />
    <rect x="30" y="40" width="20" height="20" class="window" />
    <rect x="70" y="40" width="20" height="20" class="window" />
    <rect x="30" y="80" width="20" height="20" class="window" />
    <rect x="70" y="80" width="20" height="20" class="window" />
  </g>

  <!-- Block 5: Center Park Area (No building, just trees) -->
  <g transform="translate(250, 200)">
    <circle cx="40" cy="80" r="20" fill="#2d5a27" />
    <circle cx="90" cy="60" r="25" fill="#3a7a32" />
    <circle cx="120" cy="90" r="18" fill="#2d5a27" />
    <rect x="38" y="80" width="4" height="20" fill="#5c4033" />
    <rect x="88" y="60" width="4" height="25" fill="#5c4033" />
    <rect x="118" y="90" width="4" height="15" fill="#5c4033" />
  </g>

  <!-- Block 6: Middle Right (L-Shape Building) -->
  <g transform="translate(490, 190)">
    <!-- Part A -->
    <polygon points="60,40 90,25 90,125 60,140" class="bldg-side" />
    <rect x="20" y="40" width="40" height="100" class="bldg-front" />
    <polygon points="20,40 50,25 90,25 60,40" class="bldg-top" />
    <!-- Part B (Wing) -->
    <polygon points="120,70 150,55 150,125 120,140" class="bldg-side" />
    <rect x="60" y="70" width="60" height="70" class="bldg-front" />
    <polygon points="60,70 90,55 150,55 120,70" class="bldg-top" />
  </g>

  <!-- Block 7: Bottom Left (Industrial) -->
  <g transform="translate(40, 380)">
    <polygon points="90,50 120,35 120,135 90,150" class="bldg-side" />
    <rect x="10" y="50" width="80" height="100" class="bldg-front" />
    <polygon points="10,50 4