Back

SVG Drawing Match #1284

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"Floating city above a surreal ocean of clouds"

Qwen-2.5-32B

Player 1

ELO: 749.376 748.098 (-1.3)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(153,204,255);stop-opacity:1" />
    </linearGradient>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(204,255,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#grad1)" />
  <g fill="url(#grad2)">
    <circle cx="150" cy="200" r="50" />
    <circle cx="200" cy="150" r="30" />
    <circle cx="100" cy="150" r="30" />
  </g>
  <g fill="#87CEEB">
    <path d="M150,100 L100,150 L200,150 Z" />
    <path d="M150,100 L100,130 L200,130 Z" />
  </g>
  <g fill="#ADD8E6">
    <path d="M150,100 L120,130 L180,130 Z" />
    <path d="M150,100 L130,150 L170,150 Z" />
  </g>
  <g fill="#87CEFA">
    <circle cx="150" cy="100" r="20" />
    <circle cx="120" cy="120" r="10" />
    <circle cx="180" cy="120" r="10" />
  </g>
  <g fill="#6495ED">
    <circle cx="130" cy="140" r="10" />
    <circle cx="170" cy="140" r="10" />
  </g>
  <g fill="#00BFFF">
    <circle cx="140" cy="160" r="5" />
    <circle cx="160" cy="160" r="5" />
  </g>
  <g stroke="#87CEFA" stroke-width="2" fill="none">
    <path d="M100,150 Q150,80 200,150" />
  </g>
  <g fill="#FFFFFF" stroke="#87CEFA" stroke-width="1">
    <circle cx="140" cy="180" r="5" />
    <circle cx="160" cy="180" r="5" />
  </g>
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,301.824 1,303.102 (+1.3)

Winner

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Gradients -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0e0042" />
      <stop offset="40%" stop-color="#2a0066" />
      <stop offset="70%" stop-color="#4d3a9e" />
      <stop offset="100%" stop-color="#8c7dc4" />
    </linearGradient>
    
    <linearGradient id="cloudGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="70%" stop-color="#e0e6ff" />
      <stop offset="100%" stop-color="#c4d0ff" />
    </linearGradient>
    
    <linearGradient id="pinkCloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#ffcce6" />
    </linearGradient>
    
    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffd700" />
      <stop offset="50%" stop-color="#ffb347" />
      <stop offset="100%" stop-color="#ffd700" />
    </linearGradient>
    
    <linearGradient id="silverGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f0f0" />
      <stop offset="50%" stop-color="#c0c0c0" />
      <stop offset="100%" stop-color="#e6e6e6" />
    </linearGradient>
    
    <linearGradient id="bronzeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#cd7f32" />
      <stop offset="50%" stop-color="#a05a2c" />
      <stop offset="100%" stop-color="#cd7f32" />
    </linearGradient>
    
    <linearGradient id="crystalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#7fb6ff" stop-opacity="0.7" />
      <stop offset="50%" stop-color="#4c9aff" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#0078ff" stop-opacity="0.7" />
    </linearGradient>

    <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
    </linearGradient>
    
    <radialGradient id="sunsetGlow" cx="50%" cy="180%" r="80%" fx="50%" fy="100%">
      <stop offset="0%" stop-color="#ff7e5f" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#feb47b" stop-opacity="0" />
    </radialGradient>
    
    <!-- Patterns -->
    <pattern id="islandPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="#6a4c32" opacity="0.3" />
    </pattern>
    
    <!-- Filters -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Atmospheric glow -->
  <ellipse cx="150" cy="220" rx="200" ry="100" fill="url(#sunsetGlow)" />
  
  <!-- Stars -->
  <g id="stars">
    <circle cx="30" cy="25" r="0.8" fill="white" />
    <circle cx="50" cy="40" r="0.6" fill="white" />
    <circle cx="80" cy="15" r="1" fill="white" />
    <circle cx="120" cy="30" r="0.7" fill="white" />
    <circle cx="150" cy="20" r="1.2" fill="white" />
    <circle cx="200" cy="25" r="0.9" fill="white" />
    <circle cx="230" cy="15" r="0.6" fill="white" />
    <circle cx="260" cy="35" r="1" fill="white" />
    <circle cx="280" cy="20" r="0.7" fill="white" />
    <circle cx="20" cy="60" r="0.6" fill="white" />
    <circle cx="100" cy="45" r="0.5" fill="white" />
    <circle cx="170" cy="50" r="0.8" fill="white" />
    <circle cx="240" cy="55" r="0.6" fill="white" />
    <!-- Smaller distant stars -->
    <circle cx="15" cy="35" r="0.4" fill="white" opacity="0.7" />
    <circle cx="65" cy="25" r="0.3" fill="white" opacity="0.7" />
    <circle cx="95" cy="20" r="0.4" fill="white" opacity="0.7" />
    <circle cx="130" cy="15" r="0.3" fill="white" opacity="0.7" />
    <circle cx="180" cy="30" r="0.4" fill="white" opacity="0.7" />
    <circle cx="220" cy="40" r="0.3" fill="white" opacity="0.7" />
    <circle cx="250" cy="20" r="0.4" fill="white" opacity="0.7" />
    <circle cx="270" cy="45" r="0.3" fill="white" opacity="0.7" />
  </g>

  <!-- Moon -->
  <circle cx="35" cy="40" r="15" fill="#fffaf0" opacity="0.15" />
  <circle cx="35" cy="40" r="12" fill="#fffaf0" opacity="0.2" />
  
  <!-- Cloud ocean base -->
  <path d="M0,180 
           C40,175 60,190 80,185 
           C100,180 120,160 150,165 
           C180,170 210,190 240,180 
           C270,170 290,180 300,175 
           L300,300 L0,300 Z" 
        fill="#b3c9ff" opacity="0.8" />
  
  <!-- Cloud layers -->
  <g id="clouds">
    <!-- Lower layer clouds -->
    <path d="M-10,200 
             C20,195 40,205 60,200 
             C80,195 100,185 120,190 
             C140,195 160,205 180,200 
             C200,195 220,185 240,190 
             C260,195 280,205 310,200 
             L310,300 L-10,300 Z" 
          fill="url(#cloudGradient)" opacity="0.9" />
          
    <!-- Mid layer clouds -->
    <path d="M-20,220 
             C0,215 20,225 40,220 
             C60,215 80,205 100,210 
             C120,215 140,225 160,220 
             C180,215 200,205 220,210 
             C240,215 260,225 280,220 
             C300,215 320,225 340,220
             L340,300 L-20,300 Z" 
          fill="white" opacity="0.8" />
          
    <!-- Top wispy layer -->
    <path d="M-30,170 
             C0,165 30,180 60,170 
             C90,160 120,150 150,160 
             C180,170 210,180 240,170 
             C270,160 300,170 330,165
             L330,210 
             C300,215 270,205 240,210 
             C210,215 180,205 150,210 
             C120,215 90,205 60,210 
             C30,215 0,205 -30,210 Z" 
          fill="white" opacity="0.6" />
    
    <!-- Cloud puffs -->
    <circle cx="50" cy="185" r="15" fill="white" opacity="0.7" />
    <circle cx="70" cy="180" r="20" fill="white" opacity="0.6" />
    <circle cx="150" cy="175" r="18" fill="white" opacity="0.7" />
    <circle cx="180" cy="185" r="22" fill="white" opacity="0.6" />
    <circle cx="230" cy="170" r="16" fill="white" opacity="0.7" />
    <circle cx="260" cy="180" r="19" fill="white" opacity="0.6" />
    
    <!-- Pink-hued clouds -->
    <circle cx="90" cy="190" r="12" fill="url(#pinkCloudGradient)" opacity="0.4" />
    <circle cx="200" cy="185" r="15" fill="url(#pinkCloudGradient)" opacity="0.4" />
    <path d="M120,175 C130,170 140,175 150,170" stroke="#ffcce6" stroke-width="5" stroke-opacity="0.3" fill="none" />
  </g>
  
  <!-- Floating islands -->
  <g id="floatingIslands">
    <!-- Central large island -->
    <g id="mainIsland">
      <path d="M110,130 
               C120,135 130,130 145,132 
               C160,134 175,140 185,138 
               C195,136 205,130 215,132 
               C225,134 230,140 240,138
               C250,136 250,130 245,125
               C240,120 230,115 220,110
               C210,105 200,108 190,110
               C180,112 170,110 160,108
               C150,106 140,110 130,112
               C120,114 110,118 105,122
               C100,126 100,125 110,130 Z" 
            fill="#8b5a2b" />
      
      <ellipse cx="175" cy="130" rx="70" ry="15" fill="url(#islandPattern)" />
      
      <!-- Island edge details -->
      <path d="M110,132 
               C120,137 130,132 145,134 
               C160,136 175,142 185,140" 
            fill="none" stroke="#6a4c32" stroke-width="1" stroke-opacity="0.5" />
      
      <!-- Hanging roots/vines -->
      <path d="M130,132 C128,140 127,150 130,160" fill="none" stroke="#5d4037" stroke-width="0.7" />
      <path d="M150,134 C152,145 149,155 145,165" fill="none" stroke="#5d4037" stroke-width="0.8" />
      <path d="M170,135 C168,150 172,165 170,175" fill="none" stroke="#5d4037" stroke-width="0.7" />
      <path d="M190,133 C193,145 188,155 192,165" fill="none" stroke="#5d4037" stroke-width="0.8" />
      <path d="M210,132 C208,140 212,150 210,160" fill="none" stroke="#5d4037" stroke-width="0.7" />
      
      <!-- Island vegetation -->
      <circle cx="140" cy="125" r="4" fill="#2e7d32" />
      <circle cx="190" cy="125" r="3" fill="#2e7d32" />
      <polygon points="160,118 165,118 162.5,110" fill="#2e7d32" />
      <polygon points="215,122 219,122 217,115" fill="#2e7d32" />
      
      <!-- Waterfalls -->
      <path d="M145,135 
               C145,145 146,155 145,165 
               C144,175 145,185 145,195" 
            fill="none" stroke="#a6dbff" stroke-width="2" stroke-opacity="0.7" stroke-dasharray="1,2" />
      
      <path d="M195,135 
               C195,150 196,165 195,180" 
            fill="none" stroke="#a6dbff" stroke-width="2" stroke-opacity="0.7" stroke-dasharray="1,2" />
    </g>
    
    <!-- Smaller island left -->
    <g id="leftIsland" transform="translate(-40, 15) scale(0.6)">
      <path d="M110,130 
               C120,135 130,130 145,132 
               C160,134 175,140 185,138 
               C195,136 205,130 205,125
               C205,120 200,115 190,110
               C180,105 170,108 160,110
               C150,112 140,110 130,112
               C120,114 110,118 105,122
               C100,126 100,125 110,130 Z" 
            fill="#8b5a2b" />
      
      <ellipse cx="155" cy="130" rx="50" ry="10" fill="url(#islandPattern)" />
      
      <!-- Hanging roots -->
      <path d="M130,132 C128,140 127,150 130,160" fill="none" stroke="#5d4037" stroke-width="0.7" />
      <path d="M150,134 C152,145 149,155 145,165" fill="none" stroke="#5d4037" stroke-width="0.8" />
      <path d="M170,135 C168,150 172,165 170,175" fill="none" stroke="#5d4037" stroke-width="0.7" />
      
      <!-- Vegetation -->
      <circle cx="140" cy="125" r="3" fill="#2e7d32" />
      <polygon points="160,125 164,125 162,120" fill="#2e7d32" />
    </g>
    
    <!-- Smaller island right -->
    <g id="rightIsland" transform="translate(80, 30) scale(0.5)">
      <path d="M110,130 
               C120,135 130,130 145,132 
               C160,134 175,140 185,138 
               C195,136 205,130 205,125
               C205,120 200,115 190,110
               C180,105 170,108 160,110
               C150,112 140,110 130,112
               C120,114 110,118 105,122
               C100,126 100,125 110,130 Z" 
            fill="#8b5a2b" />
      
      <ellipse cx="155" cy="130" rx="50" ry="10" fill="url(#islandPattern)" />
      
      <!-- Hanging roots -->
      <path d="M130,132 C128,140 127,150 130,160" fill="none" stroke="#5d4037" stroke-width="0.7" />
      <path d="M150,134 C152,145 149,155 145,165" fill="none" stroke="#5d4037" stroke-width="0.8" />
      <path d="M170,135 C168,150 172,165 170,175" fill="none" stroke="#5d4037" stroke-width="0.7" />
      
      <!-- Vegetation -->
      <circle cx="145" cy="125" r="3" fill="#2e7d32" />
      <polygon points="165,125 169,125 167,120" fill="#2e7d32" />
    </g>
    
    <!-- Floating rocks -->
    <circle cx="90" cy="150" r="3" fill="#8b5a2b" />
    <circle cx="100" cy="145" r="2" fill="#8b5a2b" />
    <circle cx="240" cy="145" r="4" fill="#8b5a2b" />
    <circle cx="255" cy="150" r="2" fill="#8b5a2b" />
  </g>
  
  <!-- City buildings -->
  <g id="cityBuildings">
    <!-- Central spire/tower -->
    <g id="centralTower">
      <polygon points="175,40 185,60 165,60" fill="url(#goldGradient)" />
      <rect x="165" y="60" width="20" height="40" fill="url(#goldGradient)" />
      <polygon points="162,100 188,100 190,110 160,110" fill="url(#goldGradient)" />
      <rect x="165" y="110" width="20" height="20" fill="url(#goldGradient)" />
      
      <!-- Windows -->
      <rect x="170" y="65" width="10" height="5" fill="#7fb6ff" opacity="0.7" />
      <rect x="170" y="75" width="10" height="5" fill="#7fb6ff" opacity="0.7" />
      <rect x="170" y="85" width="10" height="5" fill="#7fb6ff" opacity="0.7" />
      <rect x="170" y="95" width="10" height="5" fill="#7fb6ff" opacity="0.7" />
      <rect x="170" y="115" width="10" height="5" fill="#7fb6ff" opacity="0.7" />
      
      <!-- Tower details -->
      <line x1="165" y1="70" x2="185" y2="70" stroke="#ffcc00" stroke-width="0.5" />
      <line x1="165" y1="80" x2="185" y2="80" stroke="#ffcc00" stroke-width="0.5" />
      <line x1="165" y1="90" x2="185" y2="90" stroke="#ffcc00" stroke-width="0.5" />
      <line x1="160" y1="110" x2="190" y2="110" stroke="#ffcc00" stroke-width="0.5" />
      
      <!-- Antenna -->
      <line x1="175" y1="40" x2="175" y2="25" stroke="#c0c0c0" stroke-width="1" />
      <circle cx="175" cy="23" r="2" fill="#ff5555" />
      
      <!-- Glow effect -->
      <ellipse cx="175" cy="45" rx="15" ry="10" fill="#ffcc00" opacity="0.2" filter="url(#glow)" />
    </g>
    
    <!-- Left side buildings -->
    <g id="leftBuildings">
      <!-- Crystal structure -->
      <polygon points="130,70 145,80 135,110 120,100" fill="url(#crystalGradient)" />
      <polygon points="145,80 155,75 145,105 135,110" fill="url(#crystalGradient)" />
      
      <!-- Crystal details -->
      <line x1="130" y1="75" x2="135" y2="105" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
      <line x1="133" y1="80" x2="140" y2="95" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
      <line x1="145" y1="80" x2="135" y2="110" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
      <line x1="145" y1="80" x2="145" y2="105" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
      
      <!-- Cylindrical tower -->
      <rect x="105" y="85" width="10" height="25" rx="5" ry="5" fill="url(#silverGradient)" />
      <ellipse cx="110" cy="85" rx="5" ry="2" fill="url(#silverGradient)" />
      <ellipse cx="110" cy="110" rx="5" ry="2" fill="#a0a0a0" />
      
      <!-- Bronze building -->
      <rect x="120" y="100" width="8" height="15" fill="url(#bronzeGradient)" />
      <polygon points="120,100 128,100 129,97 119,97" fill="url(#bronzeGradient)" />
      
      <!-- Dome structure -->
      <ellipse cx="140" cy="115" rx="10" ry="5" fill="#a0a0a0" />
      <path d="M130,115 Q140,100 150,115" fill="url(#silverGradient)" />
      
      <!-- Windows -->
      <circle cx="135" cy="85" r="2" fill="#7fb6ff" opacity="0.8" />
      <circle cx="130" cy="95" r="2" fill="#7fb6ff" opacity="0.8" />
      <circle cx="137" cy="105" r="2" fill="#7fb6ff" opacity="0.8" />
      <rect x="107" y="90" width="6" height="3" fill="#7fb6ff" opacity="0.7" />
      <rect x="107" y="97" width="6" height="3" fill="#7fb6ff" opacity="0.7" />
      <rect x="107" y="104" width="6" height="3" fill="#7fb6ff" opacity="0.7" />
      <rect x="122" y="102" width="4" height="2" fill="#7fb6ff" opacity="0.7" />
      <rect x="122" y="107" width="4" height="2" fill="#7fb6ff" opacity="0.7" />
      <rect x="122" y="112" width="4" height="2" fill="#7fb6ff" opacity="0.7" />
      <rect x="135" y="110" width="10" height="2" fill="#7fb6ff" opacity="0.7" />
    </g>
    
    <!-- Right side buildings -->
    <g id="rightBuildings">
      <!-- Futuristic structure -->
      <polygon points="200,75 220,75 225,85 210,100 195,85" fill="url(#goldGradient)" />
      <rect x="205" y="100" width="10" height="15" fill="url(#goldGradient)" />
      
      <!-- Dome structure -->
      <ellipse cx="230" cy="105" rx="15" ry="5" fill="#a0a0a0" />
      <path d="M215,105 Q230,85 245,105" fill="url(#crystalGradient)" />
      
      <!-- Bronze building -->
      <rect x="230" y="95" width="7" height="10" fill="url(#bronzeGradient)" />
      <polygon points="230,95 237,95 239,92 228,92" fill="url(#bronzeGradient)" />
      
      <!-- Spires -->
      <polygon points="195,90 200,90 197.5,75" fill="url(#silverGradient)" />
      <polygon points="225,90 230,90 227.5,80" fill="url(#silverGradient)" />
      
      <!-- Windows -->
      <circle cx="210" cy="85" r="3" fill="#7fb6ff" opacity="0.8" />
      <rect x="207" y="105" width="6" height="3" fill="#7fb6ff" opacity="0.7" />
      <rect x="207" y="110" width="6" height="3" fill="#7fb6ff" opacity="0.7" />
      <rect x="225" y="100" width="10" height="2" fill="#7fb6ff" opacity="0.7" />
      <circle cx="230" cy="95" r="2" fill="#7fb6ff" opacity="0.8" />
      <rect x="231" y="97" width="5" height="2" fill="#7fb6ff" opacity="0.7" />
      <rect x="231" y="101" width="5" height="2" fill="#7fb6ff" opacity="0.7" />
    </g>
    
    <!-- Connecting bridges -->
    <g id="bridges">
      <path d="M145,90 C155,85 165,85 165,80" fill="none" stroke="#c0c0c0" stroke-width="1.5" />
      <path d="M185,80 C195,85 200,85 210,85" fill="none" stroke="#c0c0c0" stroke-width="1.5" />
      <path d="M140,110 C150,115 160,115 165,115" fill="none" stroke="#c0c0c0" stroke-width="1.5" />
      <path d="M185,115 C195,115 200,115 210,105" fill="none" stroke="#c0c0c0" stroke-width="1.5" />
      <path d="M110,95 C115,90 120,87 130,85" fill="none" stroke="#c0c0c0" stroke-width="1" />
      <path d="M124,105 C127,103 130,102 132,102" fill="none" stroke="#c0c0c0" stroke-width="1" />
      <path d="M215,92 C220,93 225,94 230,94" fill="none" stroke="#c0c0c0" stroke-width="1" />
      
      <!-- Bridge details -->
      <path d="M145,90 C155,85 165,85 165,80" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-dasharray="1,2" />
      <path d="M185,80 C195,85 200,85 210,85" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-dasharray="1,2" />
      <path d="M140,110 C150,115 160,115 165,115" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-dasharray="1,2" />
      <path d="M185,115 C195,115 200,115 210,105" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-dasharray="1,2" />
    </g>
    
    <!-- Island to buildings connections -->
    <g id="islandConnections">
      <line x1="145" y1="130" x2="145" y2="115" stroke="#a0a0a0" stroke-width="1.5" />
      <line x1="175" y1="130" x2="175" y2="115" stroke="#a0a0a0" stroke-width="2" />
      <line x1="210" y1="130" x2="210" y2="115" stroke="#a0a0a0" stroke-width="1.5" />
      
      <!-- Support structures -->
      <path d="M145,125 L140,120 L145,115" fill="none" stroke="#a0a0a0" stroke-width="0.8" />
      <path d="M145,125 L150,120 L145,115" fill="none" stroke="#a0a0a0" stroke-width="0.8" />
      <path d="M175,125 L170,120 L175,115" fill="none" stroke="#a0a0a0" stroke-width="0.8" />
      <path d="M175,125 L180,120 L175,115" fill="none" stroke="#a0a0a0" stroke-width="0.8" />
      <path d="M210,125 L205,120 L210,115" fill="none" stroke="#a0a0a0" stroke-width="0.8" />
      <path d="M210,125 L215,120 L210,115" fill="none" stroke="#a0a0a0" stroke-width="0.8" />
    </g>
    
    <!-- Light beams -->
    <g id="lightBeams" opacity="0.6">
      <path d="M175,40 L150,20" stroke="url(#beamGradient)" stroke-width="2" />
      <path d="M175,40 L200,15" stroke="url(#beamGradient)" stroke-width="2" />
      <path d="M110,85 L95,65" stroke="url(#beamGradient)" stroke-width="1.5" />
      <path d="M230,95 L250,75" stroke="url(#beamGradient)" stroke-width="1.5" />
      
      <!-- Searchlight beams -->
      <path d="M175,130 L165,150" stroke="url(#beamGradient)" stroke-width="3" />
      <path d="M175,130 L185,160" stroke="url(#beamGradient)" stroke-width="2" />
    </g>
  </g>
  
  <!-- Flying elements -->
  <g id="flyingElements">
    <!-- Birds -->
    <g id="birds">
      <path d="M50,70 C52,68 54,70 55,70 C56,70 58,68 60,70" fill="none" stroke="#000" stroke-width="0.7" />
      <path d="M80,60 C82,58 84,60 85,60 C86,60 88,58 90,60" fill="none" stroke="#000" stroke-width="0.7" />
      <path d="M240,70 C242,68 244,70 245,70 C246,70 248,68 250,70" fill="none" stroke="#000" stroke-width="0.7" />
      <path d="M260,80 C262,78 264,80 265,80 C266,80 268,78 270,80" fill="none" stroke="#000" stroke-width="0.7" />
      <path d="M40,90 C42,88 44,90 45,90 C46,90 48,88 50,90" fill="none" stroke="#000" stroke-width="0.7" />
      
      <!-- Detailed birds -->
      <path d="M55,50 L58,52 L61,50" fill="none" stroke="#000" stroke-width="0.7" />
      <path d="M190,60 L195,57 L200,60 L195,58 L195,62" fill="none" stroke="#000" stroke-width="0.7" />
      <path d="M110,55 L115,53 L120,55 L115,54 L115,56" fill="none" stroke="#000" stroke-width="0.7" />
    </g>
    
    <!-- Flying machines -->
    <g id="flyingMachines">
      <!-- Airship -->
      <ellipse cx="220" cy="50" rx="10" ry="4" fill="url(#silverGradient)" />
      <rect x="218" y="54" width="4" height="3" fill="#a0a0a0" />
      <line x1="215" y1="50" x2="210" y2="50" stroke="#a0a0a0" stroke-width="0.5" />
      <line x1="225" y1="50" x2="230" y2="50" stroke="#a0a0a0" stroke-width="0.5" />
      <circle cx="220" cy="50" r="1" fill="#7fb6ff" opacity="0.8" />
      
      <!-- Small airship -->
      <ellipse cx="150" cy="70" rx="8" ry="3" fill="url(#bronzeGradient)" />
      <rect x="149" y="73" width="2" height="2" fill="#a0a0a0" />
      <line x1="146" y1="70" x2="142" y2="70" stroke="#a0a0a0" stroke-width="0.5" />
      <line x1="154" y1="70" x2="158" y2="70" stroke="#a0a0a0" stroke-width="0.5" />
      
      <!-- Flying vehicle -->
      <circle cx="70" cy="100" r="3" fill="url(#goldGradient)" />
      <path d="M67,100 L73,100" stroke="#a0a0a0" stroke-width="1" />
      <path d="M70,97 L70,103" stroke="#a0a0a0" stroke-width="1" />
      <circle cx="70" cy="100" r="1" fill="#7fb6ff" />
      
      <!-- Another flying vehicle -->
      <rect x="100" y="70" width="6" height="4" rx="2" ry="2" fill="url(#silverGradient)" />
      <circle cx="103" cy="70" r="1" fill="#7fb6ff" opacity="0.8" />
      <line x1="100" y1="72" x2="97" y2="72" stroke="#a0a0a0" stroke-width="0.5" />
      <line x1="106" y1="72" x2="109" y2="72" stroke="#a0a0a0" stroke-width="0.5" />
    </g>
  </g>
  
  <!-- Rising mist/vapor -->
  <g id="mist">
    <path d="M70,170 C72,160 76,155 78,145" fill="none" stroke="white" stroke-width="1" stroke-opacity="0.4" />
    <path d="M120,160 C123,150 121,145 125,135" fill="none" stroke="white" stroke-width="1" stroke-opacity="0.4" />
    <path d="M180,160 C183,150 179,145 181,135" fill="none" stroke="white" stroke-width="1" stroke-opacity="0.4" />
    <path d="M230,165 C232,155 236,150 234,140" fill="none" stroke="white" stroke-width="1" stroke-opacity="0.4" />
    
    <path d="M85,180 C87,175 89,170 88,165" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.3" />
    <path d="M140,180 C142,175 139,170 141,165" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.3" />
    <path d="M200,180 C202,175 204,170 203,165" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.3" />
    <path d="M250,180 C252,175 249,170 251,165" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.3" />
  </g>
  
  <!-- Cloud overlay -->
  <g id="cloudOverlay">
    <path d="M-30,240 
             C0,235 30,250 60,240 
             C90,230 120,220 150,230 
             C180,240 210,250 240,240 
             C270,230 300,240 330,235
             L330,300 L-30,300 Z" 
          fill="white" opacity="0.3" />
    
    <!-- Cloud wisps -->
    <path d="M30,160 C40,155 50,160 60,155" stroke="white" stroke-width="2" stroke-opacity="0.5" fill="none" />
    <path d="M110,150 C120,145 130,150 140,145" stroke="white" stroke-width="3" stroke-opacity="0.4" fill="none" />
    <path d="M210,155 C220,150 230,155 240,150" stroke="white" stroke-width="2" stroke-opacity="0.5" fill="none" />
    <path d="M250,165 C260,160 270,165 280,160" stroke="white" stroke-width="3" stroke-opacity="0.4" fill="none" />
  </g>
</svg>

GPT-4o

Judge & Evaluator

The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 2

Judge's Analysis

Player 2's submission effectively captures the concept of a 'floating city above a surreal ocean of clouds' with its intricate details and dynamic composition.

The use of varied shapes and colors adds creativity and complexity, enhancing the visual appeal.

In contrast, Player 1's image, while aesthetically pleasing, lacks the complexity and detail needed to fully convey the prompt's theme.

These metrics analyze technical aspects of both SVG drawings. Look for differences that might explain the judge's decision. Use the "View Code" button above to see the SVG code for each drawing.

Shapes Metrics

Total Shapes

The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.

Player 1

Player 2

189

Rectangles

The number of rectangle elements (rect) in the SVG.

Player 1

Player 2

Circles

The number of circle elements (circle) in the SVG.

Player 1

Player 2

Ellipses

The number of ellipse elements (ellipse) in the SVG.

Player 1

—

Player 2

Lines

The number of line elements (line) in the SVG.

Player 1

—

Player 2

Polygons

The number of polygon elements (polygon) in the SVG.

Player 1

—

Player 2

Paths

The number of path elements (path) in the SVG.

Player 1

Player 2

Groups

The number of group elements (g) in the SVG.

Player 1

Player 2

Visual Effects Metrics

Gradients

The number of gradient definitions (linearGradient, radialGradient) in the SVG.

Player 1

Player 2

Patterns

The number of pattern definitions (pattern) in the SVG.

Player 1

—

Player 2

Filters

The number of filter definitions (filter) in the SVG.

Player 1

—

Player 2

Masks

The number of mask definitions (mask) in the SVG.

Player 1

—

Player 2

—

Clip Paths

The number of clipping path definitions (clipPath) in the SVG.

Player 1

—

Player 2

—

Elements with Opacity

The number of elements with opacity attributes in the SVG.

Player 1

—

Player 2

Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1

Player 2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1

Player 2

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1

—

Player 2

—

Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1

—

Player 2

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1

Player 2

223

Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1

—

Player 2

Defs Elements

The number of elements defined within the defs element in the SVG.

Player 1

Player 2

Use Elements

The number of use elements (use) in the SVG.

Player 1

—

Player 2

—

Text Metrics

Text Elements

The number of text elements (text) in the SVG.

Player 1

—

Player 2

—

AI Judging Process

Creativity

Originality, innovative use of shapes and unique approach to the prompt.

Prompt Adherence

How accurately the SVG captures the essence of the prompt.

Visual Appeal

Aesthetic quality including composition, color usage and overall visual impact.

How does judging work?

SVG drawings are converted to static PNG images for evaluation. The AI judge receives the original prompt and both images, then determines which drawing better fulfills the evaluation criteria without seeing animations, interactivity, or SVG code.