qwen3.6-flash

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>
    <!-- Sky Gradient -->
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#87CEEB" />
      <stop offset="100%" stop-color="#E0F7FA" />
    </linearGradient>
    
    <!-- Building Materials -->
    <linearGradient id="wall-light" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#F0F0F0" />
      <stop offset="100%" stop-color="#D0D0D0" />
    </linearGradient>
    <linearGradient id="wall-dark" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#B0B0B0" />
      <stop offset="100%" stop-color="#808080" />
    </linearGradient>
    <linearGradient id="roof" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#555555" />
      <stop offset="100%" stop-color="#333333" />
    </linearGradient>
    <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#4682B4" />
      <stop offset="100%" stop-color="#191970" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="800" height="600" fill="url(#sky)" />

  <!-- Ground Plane -->
  <polygon points="0,300 800,300 800,600 0,600" fill="#E8E8E8" />
  
  <!-- Grid Lines for Perspective -->
  <g stroke="#D0D0D0" stroke-width="1">
    <line x1="0" y1="320" x2="800" y2="320" />
    <line x1="0" y1="350" x2="800" y2="350" />
    <line x1="0" y1="400" x2="800" y2="400" />
    <line x1="0" y1="480" x2="800" y2="480" />
    
    <line x1="200" y1="300" x2="100" y2="600" />
    <line x1="400" y1="300" x2="300" y2="600" />
    <line x1="600" y1="300" x2="500" y2="600" />
  </g>

  <!-- Roads -->
  <g fill="#555555">
    <!-- Horizontal Road -->
    <polygon points="0,300 800,300 800,340 0,340" />
    <!-- Vertical Road -->
    <polygon points="380,300 420,300 500,600 300,600" />
  </g>
  
  <!-- Road Markings -->
  <g stroke="#FFFFFF" stroke-width="2" stroke-dasharray="10,10">
    <line x1="0" y1="320" x2="800" y2="320" />
    <line x1="390" y1="300" x2="400" y2="600" />
  </g>

  <!-- ================= BUILDINGS ================= -->

  <!-- Building 1: Tall Skyscraper (Back Left) -->
  <g transform="translate(100, 200)">
    <!-- Left Face -->
    <polygon points="0,0 40,20 40,180 0,160" fill="url(#wall-dark)" />
    <!-- Right Face -->
    <polygon points="40,20 120,60 120,220 40,180" fill="url(#glass)" />
    <!-- Roof -->
    <polygon points="0,0 40,20 120,60 80,40" fill="url(#roof)" />
    <!-- Antenna -->
    <line x1="60" y1="30" x2="60" y2="-20" stroke="#333" stroke-width="2" />
  </g>

  <!-- Building 2: Medium Office (Back Right) -->
  <g transform="translate(500, 180)">
    <!-- Left Face -->
    <polygon points="0,0 30,15 30,120 0,105" fill="url(#wall-light)" />
    <!-- Right Face -->
    <polygon points="30,15 100,50 100,155 30,120" fill="url(#wall-dark)" />
    <!-- Roof -->
    <polygon points="0,0 30,15 100,50 70,35" fill="url(#roof)" />
  </g>

  <!-- Building 3: Small Residential (Front Left) -->
  <g transform="translate(50, 380)">
    <!-- Left Face -->
    <polygon points="0,0 20,10 20,80 0,70" fill="url(#wall-light)" />
    <!-- Right Face -->
    <polygon points="20,10 60,30 60,100 20,80" fill="url(#wall-dark)" />
    <!-- Roof -->
    <polygon points="0,0 20,10 60,30 40,20" fill="url(#roof)" />
    <!-- Door -->
    <polygon points="25,50 35,55 35,80 25,75" fill="#333" />
  </g>

  <!-- Building 4: Large Block (Front Right) -->
  <g transform="translate(450, 400)">
    <!-- Left Face -->
    <polygon points="0,0 40,20 40,150 0,130" fill="url(#wall-light)" />
    <!-- Right Face -->
    <polygon points="40,20 140,70 140,200 40,150" fill="url(#wall-dark)" />
    <!-- Roof -->
    <polygon points="0,0 40,20 140,70 100,50" fill="url(#roof)" />
    <!-- Windows on Left Face -->
    <polygon points="10,30 20,35 20,45 10,40" fill="#87CEEB" />
    <polygon points="10,60 20,65 20,75 10,70" fill="#87CEEB" />
    <polygon points="10,90 20,95 20,105 10,100" fill="#87CEEB" />
    <!-- Windows on Right Face -->
    <polygon points="60,50 80,60 80,70 60,60" fill="#87CEEB" />
    <polygon points="100,70 120,80 120,90 100,80" fill="#87CEEB" />
    <polygon points="60,90 80,100 80,110 60,100" fill="#87CEEB" />
    <polygon points="100,110 120,120 120,130 100,120" fill="#87CEEB" />
  </g>

  <!-- Building 5: Tiny House (Far Left) -->
  <g transform="translate(20, 480)">
    <!-- Left Face -->
    <polygon points="0,0 15,7.5 15,50 0,42.5" fill="url(#wall-light)" />
    <!-- Right Face -->
    <polygon points="15,7.5 45,22.5 45,72.5 15,57.5" fill="url(#wall-dark)" />
    <!-- Roof -->
    <polygon points="0,0 15,7.5 45,22.5 30,15" fill="url(#roof)" />
  </g>

  <!-- Trees (Simple Isometric) -->
  <g transform="translate(350, 350)">
    <!-- Trunk -->
    <polygon points="0,0 5,2.5 5,15 0,12.5" fill="#8B4513" />
    <!-- Leaves -->
    <polygon points="0,0 10,5 0,10 -10,5" fill="#228B22" />
    <polygon points="0,5 10,10 0,15 -10,10" fill="#006400" />
  </g>

  <g transform="translate(450, 380)">
    <!-- Trunk -->
    <polygon points="0,0 5,2.5 5,15 0,12.5" fill="#8B4513" />
    <!-- Leaves -->
    <polygon points="0,0 10,5 0,10 -10,5" fill="#228B22" />
    <polygon points="0,5 10,10 0,15 -10,10" fill="#006400" />
  </g>

</svg>