Back

SVG Drawing Match #242

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"A snail with a cityscape shell, complete with tiny skyscrapers and glowing windows"

Llama 3.0 70B (8192)

Player 1

ELO: 905.864 899.21 (-6.7)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Snail Body -->
  <circle cx="150" cy="140" r="80" fill="#F7D2C4" />
  <circle cx="150" cy="140" r="70" fill="#FFC499" />
  <circle cx="150" cy="140" r="60" fill="#FFA07A" />
  
  <!-- Cityscape Shell -->
  <rect x="120" y="100" width="60" height="40" rx="5" fill="#444" />
  <rect x="130" y="110" width="40" height="20" rx="3" fill="#666" />
  <rect x="140" y="120" width="20" height="10" rx="2" fill="#888" />
  
  <!-- Skyscrapers -->
  <rect x="125" y="105" width="10" height="30" rx="2" fill="#999" />
  <rect x="135" y="115" width="10" height="25" rx="2" fill="#AAA" />
  <rect x="145" y="125" width="10" height="20" rx="2" fill="#CCC" />
  
  <!-- Windows -->
  <rect x="126" y="108" width="3" height="3" rx="1" fill="#F2C464" />
  <rect x="136" y="118" width="3" height="3" rx="1" fill="#F7DC6F" />
  <rect x="146" y="128" width="3" height="3" rx="1" fill="#FFFF00" />
  
  <!-- Glowing Windows -->
  <rect x="126" y="108" width="3" height="3" rx="1" fill="url(#glow)" />
  <rect x="136" y="118" width="3" height="3" rx="1" fill="url(#glow)" />
  <rect x="146" y="128" width="3" height="3" rx="1" fill="url(#glow)" />
  
  <!-- Gradient Glow -->
  <linearGradient id="glow" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#F2C464" stop-opacity="0.5" />
    <stop offset="1" stop-color="#FFFF00" stop-opacity="0.9" />
  </linearGradient>
  
  <!-- Antennae -->
  <line x1="140" y1="130" x2="160" y2="150" stroke="#666" stroke-width="2" />
  <line x1="140" y1="130" x2="120" y2="150" stroke="#666" stroke-width="2" />
  
  <!-- Eyes -->
  <circle cx="130" cy="160" r="5" fill="#333" />
  <circle cx="170" cy="160" r="5" fill="#333" />
  
  <!-- Mouth -->
  <path d="M140 170 C140 165 150 165 150 170" stroke="#333" stroke-width="2" fill="none" />
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,138.217 1,144.87 (+6.7)

Winner

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions for reusable elements -->
  <defs>
    <!-- Gradient for snail body -->
    <linearGradient id="snailBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#8bc34a" />
      <stop offset="60%" stop-color="#4caf50" />
      <stop offset="100%" stop-color="#2e7d32" />
    </linearGradient>
    
    <!-- Gradient for snail trail -->
    <linearGradient id="snailTrailGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#81d4fa" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#b3e5fc" stop-opacity="0.2" />
    </linearGradient>
    
    <!-- Gradient for buildings -->
    <linearGradient id="buildingGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#455a64" />
      <stop offset="100%" stop-color="#263238" />
    </linearGradient>
    
    <linearGradient id="buildingGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#37474f" />
      <stop offset="100%" stop-color="#1c313a" />
    </linearGradient>
    
    <linearGradient id="buildingGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#546e7a" />
      <stop offset="100%" stop-color="#29434e" />
    </linearGradient>
    
    <!-- Night sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0d47a1" />
      <stop offset="100%" stop-color="#1976d2" />
    </linearGradient>
    
    <!-- Glow filter for windows -->
    <filter id="windowGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="0.8" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="windowGlowStrong" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="1.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Shell spiral texture -->
    <radialGradient id="shellGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#607d8b" />
      <stop offset="70%" stop-color="#455a64" />
      <stop offset="100%" stop-color="#263238" />
    </radialGradient>
    
    <!-- Moon glow -->
    <filter id="moonGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Background - Night sky -->
  <rect width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g>
    <circle cx="30" cy="30" r="1" fill="white" opacity="0.8" />
    <circle cx="60" cy="40" r="1" fill="white" opacity="0.7" />
    <circle cx="90" cy="20" r="1" fill="white" opacity="0.9" />
    <circle cx="120" cy="50" r="1" fill="white" opacity="0.8" />
    <circle cx="150" cy="25" r="1" fill="white" opacity="0.7" />
    <circle cx="220" cy="30" r="1" fill="white" opacity="0.9" />
    <circle cx="200" cy="40" r="1" fill="white" opacity="0.8" />
    <circle cx="230" cy="60" r="1.5" fill="white" opacity="0.7" />
    <circle cx="270" cy="35" r="1" fill="white" opacity="0.9" />
    <circle cx="290" cy="25" r="1" fill="white" opacity="0.8" />
    <circle cx="180" cy="20" r="1.5" fill="white" opacity="0.7" />
    <circle cx="150" cy="30" r="1" fill="white" opacity="0.9" />
    <circle cx="120" cy="25" r="1" fill="white" opacity="0.8" />
    <circle cx="75" cy="55" r="1" fill="white" opacity="0.7" />
    <circle cx="95" cy="70" r="1" fill="white" opacity="0.9" />
    <circle cx="45" cy="80" r="1" fill="white" opacity="0.8" />
    <circle cx="250" cy="75" r="1" fill="white" opacity="0.7" />
    <circle cx="210" cy="90" r="1" fill="white" opacity="0.9" />
    <circle cx="280" cy="65" r="1" fill="white" opacity="0.8" />
    <circle cx="35" cy="110" r="1" fill="white" opacity="0.7" />
    <circle cx="85" cy="130" r="1" fill="white" opacity="0.8" />
    <circle cx="260" cy="100" r="1" fill="white" opacity="0.9" />
    <circle cx="190" cy="50" r="1" fill="white" opacity="0.7" />
  </g>
  
  <!-- Moon -->
  <circle cx="250" cy="50" r="20" fill="#fff176" filter="url(#moonGlow)" />
  <circle cx="242" cy="45" r="5" fill="#fafafa" opacity="0.7" />
  <circle cx="255" cy="58" r="4" fill="#fafafa" opacity="0.5" />
  <circle cx="258" cy="40" r="3" fill="#fafafa" opacity="0.6" />
  
  <!-- Ground -->
  <path d="M0,240 C60,235 120,245 180,230 C240,220 300,240 300,240 L300,300 L0,300 Z" fill="#2e7d32" />
  <path d="M0,245 C50,240 100,250 150,240 C200,230 250,245 300,245 L300,300 L0,300 Z" fill="#1b5e20" opacity="0.7" />
  
  <!-- Snail Trail -->
  <path d="M10,240 C30,235 60,245 90,235 C120,225 150,238 180,230" 
        stroke="url(#snailTrailGradient)" stroke-width="6" fill="none" opacity="0.8" />
  
  <!-- Snail Body Base -->
  <path d="M190,230 C175,225 160,235 150,230 C140,225 130,230 120,225 C110,220 100,230 90,235 C80,240 70,230 65,235 C60,240 55,235 50,225 C45,215 40,220 35,230 L40,240 C50,245 60,240 70,245 C80,250 90,245 100,240 C110,235 120,240 130,235 C140,230 150,240 160,235 C170,230 180,240 190,230 Z" 
        fill="url(#snailBodyGradient)" />
  
  <!-- Snail Body Highlights -->
  <path d="M180,230 C165,225 155,235 145,230 C135,225 130,230 120,225" 
        stroke="#a5d6a7" stroke-width="2" fill="none" opacity="0.5" />
  <path d="M100,240 C90,235 80,242 70,238" 
        stroke="#a5d6a7" stroke-width="1.5" fill="none" opacity="0.5" />
  
  <!-- Snail Head -->
  <ellipse cx="193" cy="225" rx="12" ry="8" fill="#66bb6a" />
  <ellipse cx="196" cy="224" rx="6" ry="4" fill="#81c784" opacity="0.7" />
  
  <!-- Snail Eye Stalks -->
  <path d="M193,225 C197,215 202,207 207,202" stroke="#66bb6a" stroke-width="2.5" fill="none" />
  <circle cx="207" cy="202" r="3.5" fill="#81c784" />
  <circle cx="207" cy="202" r="1.5" fill="#263238" />
  <circle cx="206.5" cy="201.5" r="0.6" fill="white" />
  
  <path d="M193,225 C196,218 196,208 199,198" stroke="#66bb6a" stroke-width="2.5" fill="none" />
  <circle cx="199" cy="198" r="3.5" fill="#81c784" />
  <circle cx="199" cy="198" r="1.5" fill="#263238" />
  <circle cx="198.5" cy="197.5" r="0.6" fill="white" />
  
  <!-- Shell Base - Spiral Shape -->
  <path d="M150,230 C138,210 143,185 163,172 C183,159 208,167 221,187 C234,207 226,232 206,245 C186,258 162,250 150,230 Z" 
        fill="url(#shellGradient)" />
  
  <!-- Shell Spiral Inner Lines -->
  <path d="M155,228 C145,210 149,190 167,178 C185,166 205,173 217,191 C229,209 222,229 204,241 C186,253 165,246 155,228 Z" 
        fill="none" stroke="#455a64" stroke-width="1" opacity="0.7" />
  <path d="M160,225 C152,210 155,194 170,184 C185,174 201,180 211,195 C221,210 215,226 200,236 C185,246 168,240 160,225 Z" 
        fill="none" stroke="#455a64" stroke-width="1" opacity="0.7" />
  <path d="M165,222 C159,210 162,198 174,190 C186,182 198,187 206,199 C214,211 209,223 197,231 C185,239 171,234 165,222 Z" 
        fill="none" stroke="#455a64" stroke-width="1" opacity="0.7" />
  <path d="M170,218 C166,208 168,198 178,192 C188,186 198,190 204,200 C210,210 206,220 196,226 C186,232 174,228 170,218 Z" 
        fill="none" stroke="#455a64" stroke-width="1" opacity="0.7" />
  
  <!-- Buildings on Shell - First Cluster (Top) -->
  <!-- Tall skyscraper -->
  <rect x="165" y="145" width="12" height="35" fill="url(#buildingGradient1)" />
  <rect x="167" y="148" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="148" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="167" y="154" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="154" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="167" y="160" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="160" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="167" y="166" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="166" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="167" y="172" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="172" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <line x1="171" y1="145" x2="171" y2="138" stroke="#78909c" stroke-width="1" />
  <circle cx="171" cy="137" r="1" fill="#f44336" />
  
  <!-- Wider building -->
  <rect x="180" y="150" width="14" height="30" fill="url(#buildingGradient2)" />
  <rect x="182" y="153" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="187" y="153" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="192" y="153" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="182" y="158" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="187" y="158" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="192" y="158" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="182" y="163" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="187" y="163" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="192" y="163" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="182" y="168" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="187" y="168" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="192" y="168" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="182" y="173" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="187" y="173" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="192" y="173" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="182" y="178" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  <rect x="187" y="178" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" opacity="0.8" />
  <rect x="192" y="178" width="2" height="2" fill="#ffecb3" filter="url(#windowGlow)" />
  
  <!-- Skyscraper with spire -->
  <rect x="198" y="145" width="10" height="40" fill="url(#buildingGradient3)" />
  <path d="M198,145 L208,145 L203,138 Z" fill="#455a64" />
  <line x1="203" y1="138" x2="203" y2="135" stroke="#78909c" stroke-width="1" />
  <circle cx="203" cy="134" r="1" fill="#f44336" />
  <rect x="200" y="148" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="204" y="148" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="154" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="204" y="154" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="160" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="204" y="160" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="166" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="204" y="166" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="172" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="204" y="172" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="178" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="204" y="178" width="2" height="3" fill="#ffeb3b" filter="url(#windowGlow)" />
  
  <!-- Second group of buildings (mid-shell) -->
  <rect x="150" y="178" width="10" height="25" fill="url(#buildingGradient2)" />
  <rect x="152" y="181" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="156" y="181" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="152" y="186" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="156" y="186" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="152" y="191" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="156" y="191" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="152" y="196" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="156" y="196" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="152" y="201" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="156" y="201" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  
  <rect x="163" y="185" width="12" height="18" fill="url(#buildingGradient1)" />
  <rect x="165" y="187" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="169" y="187" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="187" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="165" y="192" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="169" y="192" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="192" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="165" y="197" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="169" y="197" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="197" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="165" y="202" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="169" y="202" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="173" y="202" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  
  <rect x="178" y="175" width="9" height="28" fill="url(#buildingGradient3)" />
  <rect x="180" y="178" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="184" y="178" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="180" y="183" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="184" y="183" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="180" y="188" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="184" y="188" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="180" y="193" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="184" y="193" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="180" y="198" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="184" y="198" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="180" y="203" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="184" y="203" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  
  <!-- Third group of buildings (inner spiral) -->
  <rect x="190" y="182" width="15" height="22" fill="url(#buildingGradient2)" />
  <rect x="192" y="185" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="196" y="185" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="185" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="192" y="190" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="196" y="190" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="190" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="192" y="195" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="196" y="195" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="195" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="192" y="200" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="196" y="200" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="200" y="200" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  
  <rect x="175" y="205" width="10" height="15" fill="url(#buildingGradient1)" />
  <rect x="177" y="207" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="181" y="207" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="177" y="212" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="181" y="212" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="177" y="217" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="181" y="217" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  
  <!-- Building with dome -->
  <rect x="140" y="185" width="8" height="15" fill="url(#buildingGradient1)" />
  <path d="M140,185 C140,180 148,180 148,185" fill="url(#buildingGradient3)" />
  <rect x="142" y="188" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="142" y="193" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="142" y="198" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" />
  <rect x="146" y="188" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" opacity="0.7" />
  <rect x="146" y="193" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" opacity="0.7" />
  <rect x="146" y="198" width="2" height="2" fill="#ffeb3b" filter="url(#windowGlow)" opacity="0.7" />
  
  <!-- Building details - antennas, water towers, etc. -->
  <line x1="156" y1="178" x2="156" y2="172" stroke="#78909c" stroke-width="1" />
  <circle cx="156" cy="171" r="1" fill="#f44336" />
  
  <!-- Water tower on a building -->
  <rect x="183" y="150" width="5" height="3" fill="#90a4ae" />
  <ellipse cx="185.5" cy="149" rx="3" ry="1.5" fill="#90a4ae" />
  <line x1="183" y1="149" x2="188" y2="149" stroke="#78909c" stroke-width="0.5" />
  
  <!-- Another water tower -->
  <rect x="192" y="182" width="4" height="3" fill="#90a4ae" />
  <ellipse cx="194" cy="181" rx="2.5" ry="1" fill="#90a4ae" />
  <line x1="192" y1="181" x2="196" y2="181" stroke="#78909c" stroke-width="0.5" />
  
  <!-- Streets on the shell -->
  <path d="M170,205 C175,200 180,195 185,190" stroke="#263238" stroke-width="1" fill="none" />
  <path d="M190,185 C195,180 200,170 205,165" stroke="#263238" stroke-width="1" fill="none" />
  <path d="M165,195 C168,190 170,185 175,180" stroke="#263238" stroke-width="1" fill="none" />
  <path d="M155,190 C160,185 165,175 170,165" stroke="#263238" stroke-width="1" fill="none" />
  
  <!-- Highlight spots as street lights -->
  <circle cx="170" cy="205" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="175" cy="200" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="180" cy="195" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="185" cy="190" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="190" cy="185" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="195" cy="180" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="200" cy="170" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="205" cy="165" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="165" cy="195" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  <circle cx="170" cy="165" r="0.7" fill="#ffeb3b" filter="url(#windowGlowStrong)" opacity="0.8" />
  
  <!-- Flying elements - helicopter -->
  <path d="M140,160 C142,158 145,157 147,160 C149,163 151,163 153,160 C155,157 157,157 159,160"
        fill="none" stroke="#90a4ae" stroke-width="0.8" />
  <circle cx="141" cy="159" r="1" fill="#e57373" filter="url(#windowGlow)" opacity="0.9" />
  <circle cx="153" cy="158" r="1" fill="#e57373" filter="url(#windowGlow)" opacity="0.9" />
  <path d="M148,160 L152,165" stroke="#90a4ae" stroke-width="1" />
  <rect x="148" y="165" width="4" height="3" fill="#455a64" />
  <circle cx="150" cy="166.5" r="1" fill="#ffeb3b" filter="url(#windowGlow)" opacity="0.9" />
    
  <!-- Bridges between buildings -->
  <path d="M177,157 L180,157" stroke="#90a4ae" stroke-width="1.5" />
  <path d="M190,170 L198,170" stroke="#90a4ae" stroke-width="1.5" />
  <path d="M173,190 L178,190" stroke="#90a4ae" stroke-width="1.5" />
  
  <!-- Additional architectural details -->
  <rect x="165" y="145" width="12" height="2" fill="#78909c" />
  <rect x="198" y="145" width="10" height="2" fill="#78909c" />
  <rect x="180" y="150" width="14" height="2" fill="#78909c" />
  <rect x="163" y="185" width="12" height="1.5" fill="#78909c" />
  <rect x="150" y="178" width="10" height="1.5" fill="#78909c" />
  
  <!-- Small boat or ferry on a river through the city -->
  <path d="M145,195 C148,192 152,192 155,195" fill="none" stroke="#b0bec5" stroke-width="0.8" />
  <rect x="149" y="193" width="3" height="1.5" fill="#90a4ae" />
  <circle cx="150.5" cy="193.8" r="0.5" fill="#ffeb3b" filter="url(#windowGlow)" opacity="0.8" />
</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 image adheres more closely to the prompt with a clear depiction of a snail featuring a cityscape shell, complete with tiny skyscrapers and glowing windows.

The night sky and moon add to the visual appeal and context.

Player 1's image lacks clarity in terms of the snail and cityscape concept, making Player 2's submission stronger overall in creativity and execution.

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

201

Rectangles

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

Player 1

Player 2

117

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

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.