Back

SVG Drawing Match #664

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"Mushroom cityscape under a cosmic aurora sky"

Llama 3.0 70B (8192)

Player 1

ELO: 846.948 843.743 (-3.2)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <linearGradient id="aurora" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#FFC67D" stop-opacity="1"/>
      <stop offset="0.5" stop-color="#8BC34A" stop-opacity="0.8"/>
      <stop offset="1" stop-color="#45B3FA" stop-opacity="0.5"/>
    </linearGradient>
    <pattern id="mushroom-cap" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="#F7F7F7"/>
      <circle cx="10" cy="10" r="8" fill="#C6C6C6"/>
      <circle cx="10" cy="10" r="6" fill="#8B9467"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="300" height="300" fill="url(#aurora)"/>
  <g transform="translate(150, 200)">
    <g transform="rotate(30)">
      <rect x="-30" y="-50" width="60" height="100" fill="#8B9467" rx="10"/>
      <rect x="-25" y="-40" width="50" height="80" fill="url(#mushroom-cap)"/>
      <circle cx="0" cy="-60" r="10" fill="#F7F7F7"/>
    </g>
    <g transform="rotate(-30)">
      <rect x="-30" y="-50" width="60" height="100" fill="#8B9467" rx="10"/>
      <rect x="-25" y="-40" width="50" height="80" fill="url(#mushroom-cap)"/>
      <circle cx="0" cy="-60" r="10" fill="#F7F7F7"/>
    </g>
    <g transform="translate(50, 0)">
      <rect x="-20" y="-30" width="40" height="60" fill="#8B9467" rx="8"/>
      <rect x="-15" y="-20" width="30" height="40" fill="url(#mushroom-cap)"/>
      <circle cx="0" cy="-35" r="8" fill="#F7F7F7"/>
    </g>
    <g transform="translate(-50, 0)">
      <rect x="-20" y="-30" width="40" height="60" fill="#8B9467" rx="8"/>
      <rect x="-15" y="-20" width="30" height="40" fill="url(#mushroom-cap)"/>
      <circle cx="0" cy="-35" r="8" fill="#F7F7F7"/>
    </g>
  </g>
  <g transform="translate(100, 250)">
    <rect x="-15" y="-20" width="30" height="40" fill="#8B9467" rx="6"/>
    <rect x="-10" y="-15" width="20" height="30" fill="url(#mushroom-cap)"/>
    <circle cx="0" cy="-25" r="6" fill="#F7F7F7"/>
  </g>
  <g transform="translate(200, 250)">
    <rect x="-15" y="-20" width="30" height="40" fill="#8B9467" rx="6"/>
    <rect x="-10" y="-15" width="20" height="30" fill="url(#mushroom-cap)"/>
    <circle cx="0" cy="-25" r="6" fill="#F7F7F7"/>
  </g>
  <g transform="translate(250, 220)">
    <rect x="-10" y="-15" width="20" height="30" fill="#8B9467" rx="5"/>
    <rect x="-5" y="-10" width="10" height="20" fill="url(#mushroom-cap)"/>
    <circle cx="0" cy="-20" r="5" fill="#F7F7F7"/>
  </g>
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,228.344 1,231.549 (+3.2)

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>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a" />
      <stop offset="100%" stop-color="#1a0b35" />
    </linearGradient>
    
    <!-- Aurora gradients -->
    <linearGradient id="auroraGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00ff99" stop-opacity="0.5" />
      <stop offset="50%" stop-color="#80ffc0" stop-opacity="0.5" />
      <stop offset="100%" stop-color="#ff00ff" stop-opacity="0.5" />
    </linearGradient>
    
    <linearGradient id="auroraGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff00ff" stop-opacity="0.4" />
      <stop offset="50%" stop-color="#00ccff" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#00ff99" stop-opacity="0.4" />
    </linearGradient>
    
    <linearGradient id="auroraGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffcc00" stop-opacity="0.3" />
      <stop offset="50%" stop-color="#ff66cc" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#cc00ff" stop-opacity="0.3" />
    </linearGradient>
    
    <!-- Mushroom cap gradients -->
    <radialGradient id="redCapGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="70%" stop-color="#c53030" />
      <stop offset="100%" stop-color="#9b2525" />
    </radialGradient>
    
    <radialGradient id="orangeCapGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#ffa94d" />
      <stop offset="70%" stop-color="#e67700" />
      <stop offset="100%" stop-color="#b35c00" />
    </radialGradient>
    
    <radialGradient id="purpleCapGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#cc5de8" />
      <stop offset="70%" stop-color="#9c36b5" />
      <stop offset="100%" stop-color="#7b2a8a" />
    </radialGradient>
    
    <radialGradient id="blueCapGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#74c0fc" />
      <stop offset="70%" stop-color="#1c7ed6" />
      <stop offset="100%" stop-color="#1864ab" />
    </radialGradient>
    
    <radialGradient id="greenCapGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#69db7c" />
      <stop offset="70%" stop-color="#2b8a3e" />
      <stop offset="100%" stop-color="#1b5e20" />
    </radialGradient>
    
    <!-- Stem gradients -->
    <linearGradient id="stemGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#e9dac1" />
      <stop offset="50%" stop-color="#f8f0e3" />
      <stop offset="100%" stop-color="#e9dac1" />
    </linearGradient>
    
    <linearGradient id="stemGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#d4c4a8" />
      <stop offset="50%" stop-color="#e9dac1" />
      <stop offset="100%" stop-color="#d4c4a8" />
    </linearGradient>
    
    <!-- Glow 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>
    
    <filter id="smallGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Stars pattern -->
    <pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.5" fill="white" />
      <circle cx="25" cy="30" r="0.3" fill="white" />
      <circle cx="40" cy="15" r="0.4" fill="white" />
      <circle cx="55" cy="40" r="0.2" fill="white" />
      <circle cx="70" cy="25" r="0.5" fill="white" />
      <circle cx="85" cy="50" r="0.3" fill="white" />
      <circle cx="15" cy="65" r="0.4" fill="white" />
      <circle cx="30" cy="80" r="0.2" fill="white" />
      <circle cx="45" cy="70" r="0.3" fill="white" />
      <circle cx="60" cy="85" r="0.5" fill="white" />
      <circle cx="75" cy="60" r="0.4" fill="white" />
      <circle cx="90" cy="75" r="0.3" fill="white" />
      <circle cx="95" cy="95" r="0.2" fill="white" />
      
      <!-- Star clusters -->
      <circle cx="20" cy="20" r="0.8" fill="white" opacity="0.8" />
      <circle cx="22" cy="22" r="0.3" fill="white" opacity="0.6" />
      <circle cx="19" cy="23" r="0.4" fill="white" opacity="0.7" />
      
      <circle cx="80" cy="40" r="0.8" fill="white" opacity="0.8" />
      <circle cx="82" cy="38" r="0.3" fill="white" opacity="0.6" />
      <circle cx="78" cy="42" r="0.4" fill="white" opacity="0.7" />
    </pattern>
    
    <!-- Cosmic objects -->
    <radialGradient id="distantPlanet" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffcc88" />
      <stop offset="100%" stop-color="#ff8844" />
    </radialGradient>
    
    <radialGradient id="distantNebula" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ff88aa" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#ff88aa" stop-opacity="0" />
    </radialGradient>
  </defs>
  
  <!-- Background sky -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Distant cosmic objects -->
  <circle cx="40" cy="40" r="15" fill="url(#distantNebula)" />
  <circle cx="250" cy="50" r="20" fill="url(#distantNebula)" />
  <circle cx="280" cy="30" r="5" fill="url(#distantPlanet)" opacity="0.6" />
  
  <!-- Stars -->
  <rect x="0" y="0" width="300" height="200" fill="url(#stars)" opacity="0.8" />
  
  <!-- Aurora waves -->
  <path d="M0,80 C50,60 100,100 150,80 S250,40 300,60 L300,130 C250,150 200,120 150,140 S50,180 0,160 Z" fill="url(#auroraGradient1)">
    <animate attributeName="d" 
             values="M0,80 C50,60 100,100 150,80 S250,40 300,60 L300,130 C250,150 200,120 150,140 S50,180 0,160 Z;
                     M0,70 C50,90 100,70 150,90 S250,70 300,50 L300,120 C250,140 200,160 150,130 S50,150 0,170 Z;
                     M0,80 C50,60 100,100 150,80 S250,40 300,60 L300,130 C250,150 200,120 150,140 S50,180 0,160 Z"
             dur="20s" 
             repeatCount="indefinite" />
  </path>
  
  <path d="M0,40 C70,20 140,50 210,30 S280,10 300,30 L300,90 C230,110 160,80 90,100 S20,120 0,100 Z" fill="url(#auroraGradient2)">
    <animate attributeName="d" 
             values="M0,40 C70,20 140,50 210,30 S280,10 300,30 L300,90 C230,110 160,80 90,100 S20,120 0,100 Z;
                     M0,30 C70,50 140,20 210,40 S280,30 300,20 L300,80 C230,100 160,120 90,90 S20,70 0,90 Z;
                     M0,40 C70,20 140,50 210,30 S280,10 300,30 L300,90 C230,110 160,80 90,100 S20,120 0,100 Z"
             dur="25s" 
             repeatCount="indefinite" />
  </path>
  
  <path d="M0,20 C60,10 120,30 180,15 S240,5 300,15 L300,50 C240,65 180,55 120,70 S60,60 0,50 Z" fill="url(#auroraGradient3)">
    <animate attributeName="d" 
             values="M0,20 C60,10 120,30 180,15 S240,5 300,15 L300,50 C240,65 180,55 120,70 S60,60 0,50 Z;
                     M0,15 C60,25 120,15 180,30 S240,20 300,10 L300,45 C240,60 180,70 120,55 S60,45 0,55 Z;
                     M0,20 C60,10 120,30 180,15 S240,5 300,15 L300,50 C240,65 180,55 120,70 S60,60 0,50 Z"
             dur="30s" 
             repeatCount="indefinite" />
  </path>
  
  <!-- Large central mushroom building -->
  <g>
    <!-- Stem/building -->
    <path d="M140,300 L140,150 C140,140 150,135 160,135 C170,135 180,140 180,150 L180,300 Z" fill="url(#stemGradient)" />
    
    <!-- Architectural details -->
    <path d="M140,190 L140,185 C140,180 145,175 160,175 C175,175 180,180 180,185 L180,190 Z" fill="#e0d0b0" />
    <path d="M140,230 L140,225 C140,220 145,215 160,215 C175,215 180,220 180,225 L180,230 Z" fill="#e0d0b0" />
    
    <!-- Cap/roof -->
    <ellipse cx="160" cy="135" rx="50" ry="25" fill="url(#redCapGradient)" />
    
    <!-- Multi-level cap design -->
    <ellipse cx="160" cy="125" rx="30" ry="15" fill="#e63946" opacity="0.6" />
    <ellipse cx="160" cy="120" rx="15" ry="7" fill="#e63946" opacity="0.4" />
    
    <!-- Windows -->
    <g>
      <rect x="150" y="160" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="165" y="160" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="150" y="180" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="165" y="180" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="150" y="200" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="165" y="200" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="150" y="220" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="165" y="220" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="150" y="240" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="165" y="240" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="150" y="260" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
      <rect x="165" y="260" width="8" height="10" rx="2" fill="#ffffaa" filter="url(#glow)" />
    </g>
    
    <!-- Door -->
    <rect x="155" y="280" width="10" height="20" rx="5" fill="#aa7755" />
    <circle cx="158" cy="290" r="1" fill="#ffcc88" />
  </g>
  
  <!-- Left medium mushroom building -->
  <g>
    <!-- Stem/building -->
    <path d="M80,300 L80,190 C80,180 85,175 95,175 C105,175 110,180 110,190 L110,300 Z" fill="url(#stemGradient)" />
    
    <!-- Architectural detail -->
    <path d="M78,240 L112,240" stroke="#e0d0b0" stroke-width="2" fill="none" />
    <path d="M78,210 L112,210" stroke="#e0d0b0" stroke-width="2" fill="none" />
    
    <!-- Cap/roof -->
    <ellipse cx="95" cy="175" rx="35" ry="20" fill="url(#orangeCapGradient)" />
    <ellipse cx="95" cy="170" rx="25" ry="12" fill="#e67700" opacity="0.3" />
    
    <!-- Windows -->
    <g>
      <rect x="88" y="200" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" opacity="0.8" />
      <rect x="98" y="200" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" />
      <rect x="88" y="215" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" />
      <rect x="98" y="215" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" opacity="0.6" />
      <rect x="88" y="230" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" opacity="0.7" />
      <rect x="98" y="230" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" />
      <rect x="88" y="245" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" />
      <rect x="98" y="245" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" opacity="0.5" />
      <rect x="88" y="260" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" opacity="0.9" />
      <rect x="98" y="260" width="6" height="8" rx="1" fill="#ffffaa" filter="url(#glow)" />
    </g>
    
    <!-- Door -->
    <rect x="92" y="280" width="8" height="15" rx="4" fill="#aa7755" />
    <circle cx="95" cy="287" r="1" fill="#ffcc88" />
  </g>
  
  <!-- Right medium mushroom building -->
  <g>
    <!-- Stem/building -->
    <path d="M220,300 L219,180 C219,170 227,165 235,165 C243,165 251,170 251,180 L250,300 Z" fill="url(#stemGradient2)" />
    
    <!-- Balconies -->
    <path d="M215,200 L255,200" stroke="#e0d0b0" stroke-width="4" fill="none" />
    <path d="M217,230 L253,230" stroke="#e0d0b0" stroke-width="4" fill="none" />
    <path d="M219,260 L251,260" stroke="#e0d0b0" stroke-width="4" fill="none" />
    
    <!-- Cap/roof -->
    <ellipse cx="235" cy="165" rx="40" ry="22" fill="url(#purpleCapGradient)" />
    
    <!-- Tiered roof design -->
    <ellipse cx="235" cy="160" rx="30" ry="15" fill="#9c36b5" opacity="0.4" />
    <ellipse cx="235" cy="155" rx="20" ry="10" fill="#9c36b5" opacity="0.3" />
    <ellipse cx="235" cy="150" rx="10" ry="5" fill="#9c36b5" opacity="0.2" />
    
    <!-- Windows -->
    <g>
      <rect x="228" y="185" width="7" height="9" rx="3.5" fill="#ffffaa" filter="url(#glow)" />
      <rect x="240" y="185" width="7" height="9" rx="3.5" fill="#ffffaa" filter="url(#glow)" />
      
      <rect x="228" y="205" width="7" height="9" rx="1" fill="#ffffaa" filter="url(#glow)" />
      <rect x="240" y="205" width="7" height="9" rx="1" fill="#ffffaa" filter="url(#glow)" />
      
      <circle cx="231.5" cy="224.5" r="3.5" fill="#ffffaa" filter="url(#glow)" />
      <circle cx="243.5" cy="224.5" r="3.5" fill="#ffffaa" filter="url(#glow)" />
      
      <rect x="228" y="235" width="7" height="9" rx="1" fill="#ffffaa" filter="url(#glow)" />
      <rect x="240" y="235" width="7" height="9" rx="1" fill="#ffffaa" filter="url(#glow)" />
      
      <circle cx="231.5" cy="254.5" r="3.5" fill="#ffffaa" filter="url(#glow)" />
      <circle cx="243.5" cy="254.5" r="3.5" fill="#ffffaa" filter="url(#glow)" />
    </g>
    
    <!-- Door -->
    <rect x="232" y="280" width="10" height="20" rx="5" fill="#aa7755" />
    <path d="M232,290 L242,290" stroke="#ffcc88" stroke-width="0.5" fill="none" />
    <circle cx="235" cy="286" r="1" fill="#ffcc88" />
  </g>
  
  <!-- Blue tall thin mushroom building -->
  <g>
    <!-- Stem/building -->
    <path d="M50,300 L50,170 C50,165 53,160 58,160 C63,160 66,165 66,170 L66,300 Z" fill="url(#stemGradient2)" />
    
    <!-- Cap/roof -->
    <ellipse cx="58" cy="160" rx="18" ry="15" fill="url(#blueCapGradient)" />
    <ellipse cx="58" cy="155" rx="12" ry="10" fill="#1c7ed6" opacity="0.4" />
    
    <!-- Windows -->
    <g>
      <rect x="54" y="175" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <rect x="54" y="185" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" opacity="0.7" />
      <rect x="54" y="195" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <rect x="54" y="205" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" opacity="0.6" />
      <rect x="54" y="215" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <rect x="54" y="225" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" opacity="0.8" />
      <rect x="54" y="235" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <rect x="54" y="245" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" opacity="0.5" />
      <rect x="54" y="255" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <rect x="54" y="265" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" opacity="0.7" />
    </g>
    
    <!-- Door -->
    <rect x="55" y="280" width="6" height="12" rx="3" fill="#aa7755" />
    <circle cx="58" cy="286" r="0.8" fill="#ffcc88" />
  </g>
  
  <!-- Green small mushroom building -->
  <g>
    <!-- Stem/building -->
    <path d="M270,300 L270,230 C270,225 273,220 278,220 C283,220 286,225 286,230 L286,300 Z" fill="url(#stemGradient)" />
    
    <!-- Architectural detail -->
    <path d="M268,255 L288,255" stroke="#e0d0b0" stroke-width="1.5" fill="none" />
    
    <!-- Cap/roof -->
    <ellipse cx="278" cy="220" rx="18" ry="10" fill="url(#greenCapGradient)" />
    <ellipse cx="278" cy="217" rx="14" ry="7" fill="#2b8a3e" opacity="0.4" />
    
    <!-- Windows -->
    <g>
      <rect x="274" y="235" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <circle cx="276" cy="248" r="2" fill="#ffffaa" filter="url(#smallGlow)" />
      <rect x="274" y="260" width="4" height="6" rx="1" fill="#ffffaa" filter="url(#smallGlow)" />
      <circle cx="276" cy="273" r="2" fill="#ffffaa" filter="url(#smallGlow)" />
    </g>
    
    <!-- Door -->
    <rect x="275" y="285" width="6" height="12" rx="3" fill="#aa7755" />
    <circle cx="278" cy="291" r="0.8" fill="#ffcc88" />
  </g>
  
  <!-- Tiny mushroom building cluster -->
  <g>
    <!-- First tiny mushroom (purple) -->
    <path d="M15,300 L15,260 C15,258 18,256 20,256 C22,256 25,258 25,260 L25,300 Z" fill="url(#stemGradient)" />
    <ellipse cx="20" cy="256" rx="10" ry="6" fill="url(#purpleCapGradient)" />
    <rect x="18" y="270" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="18" y="280" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    
    <!-- Second tiny mushroom (red) -->
    <path d="M130,300 L130,250 C130,248 132,246 135,246 C138,246 140,248 140,250 L140,300 Z" fill="url(#stemGradient)" />
    <ellipse cx="135" cy="246" rx="12" ry="7" fill="url(#redCapGradient)" />
    <rect x="132" y="260" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="132" y="270" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="132" y="280" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    
    <!-- Third tiny mushroom (orange) -->
    <path d="M190,300 L190,255 C190,253 192,251 195,251 C198,251 200,253 200,255 L200,300 Z" fill="url(#stemGradient)" />
    <ellipse cx="195" cy="251" rx="11" ry="6" fill="url(#orangeCapGradient)" />
    <rect x="192" y="265" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="192" y="277" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    
    <!-- Fourth tiny mushroom (blue) -->
    <path d="M30,300 L30,265 C30,263 32,261 35,261 C38,261 40,263 40,265 L40,300 Z" fill="url(#stemGradient)" />
    <ellipse cx="35" cy="261" rx="9" ry="5" fill="url(#blueCapGradient)" />
    <rect x="33" y="273" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="33" y="285" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
  </g>
  
  <!-- Extra tiny buildings -->
  <g>
    <path d="M90,300 L90,270 C90,268 91,267 93,267 C95,267 96,268 96,270 L96,300 Z" fill="url(#stemGradient)" />
    <ellipse cx="93" cy="267" rx="8" ry="4" fill="url(#greenCapGradient)" />
    <rect x="91.5" y="280" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    
    <path d="M205,300 L205,275 C205,273 206,272 208,272 C210,272 211,273 211,275 L211,300 Z" fill="url(#stemGradient)" />
    <ellipse cx="208" cy="272" rx="7" ry="3.5" fill="url(#purpleCapGradient)" />
    <rect x="206.5" y="285" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
  </g>
  
  <!-- Connecting bridges/walkways -->
  
  <!-- Main bridge between central and right mushroom -->
  <g>
    <path d="M180,200 C195,205 205,195 220,200" stroke="#e9dac1" stroke-width="3" fill="none" />
    <rect x="185" y="197" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="195" y="197" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="205" y="197" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="215" y="197" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
  </g>
  
  <!-- Bridge between central and left mushroom -->
  <g>
    <path d="M140,220 C125,225 115,215 110,220" stroke="#e9dac1" stroke-width="3" fill="none" />
    <rect x="124" y="218" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="134" y="218" width="3" height="4" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
  </g>
  
  <!-- Bridge between left mushroom and blue building -->
  <g>
    <path d="M80,210 C73,213 69,207 66,210" stroke="#e9dac1" stroke-width="2" fill="none" />
    <rect x="70" y="208" width="2" height="3" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
  </g>
  
  <!-- Bridge between central and tiny red mushroom -->
  <g>
    <path d="M140,250 C138,252 137,248 140,250" stroke="#e9dac1" stroke-width="2" fill="none" />
  </g>
  
  <!-- Bridge between right mushroom and green building -->
  <g>
    <path d="M250,240 C260,245 266,235 270,240" stroke="#e9dac1" stroke-width="2" fill="none" />
    <rect x="255" y="239" width="2" height="3" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
    <rect x="262" y="239" width="2" height="3" rx="0.5" fill="#ffffaa" filter="url(#smallGlow)" />
  </g>
  
  <!-- Decorative elements on mushroom caps -->
  
  <!-- Dots on central mushroom cap -->
  <g>
    <circle cx="140" cy="125" r="3" fill="white" opacity="0.7" />
    <circle cx="155" cy="120" r="2" fill="white" opacity="0.7" />
    <circle cx="170" cy="125" r="2.5" fill="white" opacity="0.7" />
    <circle cx="180" cy="135" r="2" fill="white" opacity="0.7" />
    <circle cx="160" cy="135" r="3" fill="white" opacity="0.7" />
    <circle cx="145" cy="135" r="2.5" fill="white" opacity="0.7" />
  </g>
  
  <!-- Dots on left mushroom cap -->
  <g>
    <circle cx="80" cy="170" r="2" fill="white" opacity="0.7" />
    <circle cx="90" cy="165" r="1.5" fill="white" opacity="0.7" />
    <circle cx="100" cy="170" r="2" fill="white" opacity="0.7" />
    <circle cx="105" cy="175" r="1.5" fill="white" opacity="0.7" />
    <circle cx="95" cy="175" r="2" fill="white" opacity="0.7" />
  </g>
  
  <!-- Dots on right mushroom cap -->
  <g>
    <circle cx="220" cy="160" r="2" fill="white" opacity="0.7" />
    <circle cx="230" cy="155" r="1.5" fill="white" opacity="0.7" />
    <circle cx="240" cy="160" r="2" fill="white" opacity="0.7" />
    <circle cx="250" cy="165" r="1.5" fill="white" opacity="0.7" />
    <circle cx="235" cy="165" r="2" fill="white" opacity="0.7" />
  </g>
  
  <!-- Dots on blue mushroom cap -->
  <g>
    <circle cx="53" cy="155" r="1.5" fill="white" opacity="0.7" />
    <circle cx="58" cy="153" r="1" fill="white" opacity="0.7" />
    <circle cx="63" cy="155" r="1.5" fill="white" opacity="0.7" />
    <circle cx="58" cy="160" r="1" fill="white" opacity="0.7" />
  </g>
  
  <!-- Dots on green mushroom cap -->
  <g>
    <circle cx="273" cy="217" r="1" fill="white" opacity="0.7" />
    <circle cx="278" cy="215" r="1.5" fill="white" opacity="0.7" />
    <circle cx="283" cy="217" r="1" fill="white" opacity="0.7" />
  </g>
  
  <!-- Flying elements - city life -->
  <ellipse cx="70" cy="100" rx="5" ry="2" fill="#aa88ff" opacity="0.6" filter="url(#smallGlow)">
    <animateMotion path="M0,0 C10,-10 30,10 50,-5" dur="15s" repeatCount="indefinite" />
  </ellipse>
  
  <ellipse cx="230" cy="90" rx="6" ry="2.5" fill="#ff88aa" opacity="0.6" filter="url(#smallGlow)">
    <animateMotion path="M0,0 C-15,-5 -30,15 -60,0" dur="18s" repeatCount="indefinite" />
  </ellipse>
  
  <ellipse cx="180" cy="80" rx="4" ry="1.5" fill="#88ffaa" opacity="0.6" filter="url(#smallGlow)">
    <animateMotion path="M0,0 C-20,-20 0,20 20,-10" dur="12s" repeatCount="indefinite" />
  </ellipse>
  
  <ellipse cx="120" cy="120" rx="3" ry="1" fill="#ffaa88" opacity="0.6" filter="url(#smallGlow)">
    <animateMotion path="M0,0 C15,-10 25,15 40,5" dur="10s" repeatCount="indefinite" />
  </ellipse>
  
  <!-- Ground fog effects -->
  <path d="M0,300 C50,290 100,295 150,290 S250,285 300,290 L300,300 L0,300 Z" fill="#5555aa" opacity="0.3" />
  <path d="M0,300 C70,295 140,290 210,295 S280,292 300,295 L300,300 L0,300 Z" fill="#aa55cc" opacity="0.2" />
</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 vividly captures the concept of a 'Mushroom cityscape under a cosmic aurora sky' with clear and imaginative elements.

The use of vibrant colors and detailed mushroom structures effectively conveys the theme, while the aurora in the sky adds depth and visual appeal.

In contrast, Player 1's image is more abstract and less representative of the prompt.

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

176

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

135

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.