Back

SVG Drawing Match #2637

May 09, 2025

GPT-4o

Challenge Creator

Creative Challenge

"A tree made of musical instruments growing in a desert under a starry sky."

GPT-4.1 (2025-04-14)

Player 1

ELO: 1,272.908 1,292.541 (+19.6)

Winner

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <!-- Desert sand gradient -->
    <linearGradient id="sandGrad" x1="0" y1="220" x2="0" y2="300" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#ffe29c"/>
      <stop offset="100%" stop-color="#ffd47a"/>
    </linearGradient>
    <!-- Night sky gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="200" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#191970"/>
      <stop offset="30%" stop-color="#2b1a43"/>
      <stop offset="100%" stop-color="#0e1852"/>
    </linearGradient>
    <!-- Trunk wood pattern -->
    <linearGradient id="woodGrad" x1="60" y1="90" x2="140" y2="220" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#a15623"/>
      <stop offset="70%" stop-color="#67421f"/>
      <stop offset="100%" stop-color="#30200c"/>
    </linearGradient>
    <!-- Glow for stars -->
    <radialGradient id="starGlow" r="50%" cx="50%" cy="50%">
      <stop stop-color="#fff7e9" offset="0%"/>
      <stop stop-color="#FFF4" offset="80%"/>
      <stop stop-color="#FFF0" offset="100%"/>
    </radialGradient>
    <!-- Brass gradient for instruments -->
    <linearGradient id="brassGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffc447"/>
      <stop offset="60%" stop-color="#e3b943"/>
      <stop offset="100%" stop-color="#a6792d"/>
    </linearGradient>
    <!-- Guitar brown gradient -->
    <linearGradient id="guitarGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#e38d5a"/>
      <stop offset="60%" stop-color="#a0572b"/>
      <stop offset="100%" stop-color="#70361b"/>
    </linearGradient>
    <!-- Drumhead gradient -->
    <radialGradient id="drumHead" cx="50%" cy="48%" r="56%">
      <stop offset="0%" stop-color="#fff"/>
      <stop offset="90%" stop-color="#d3c9be"/>
      <stop offset="100%" stop-color="#c2b3a3"/>
    </radialGradient>
    <!-- Leaf-like music note gradient -->
    <linearGradient id="noteGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#92e0e4"/>
      <stop offset="100%" stop-color="#4dc8b3"/>
    </linearGradient>
    <!-- Cymbal metallic gradient -->
    <radialGradient id="cymbalGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffedaa"/>
      <stop offset="80%" stop-color="#ffda60"/>
      <stop offset="100%" stop-color="#c7a040"/>
    </radialGradient>
  </defs>

  <!-- Night sky -->
  <rect x="0" y="0" width="300" height="200" fill="url(#skyGrad)"/>
  <!-- Desert sand dunes -->
  <ellipse cx="150" cy="250" rx="160" ry="50" fill="url(#sandGrad)" opacity="1"/>
  <ellipse cx="80" cy="270" rx="60" ry="20" fill="#ffe8b7" opacity="0.5"/>
  <ellipse cx="220" cy="265" rx="55" ry="15" fill="#fffced" opacity="0.3"/>
  <ellipse cx="150" cy="285" rx="70" ry="12" fill="#fff9d5" opacity="0.4"/>
  <!-- Dune shadows -->
  <ellipse cx="180" cy="265" rx="35" ry="8" fill="#b49656" opacity="0.18"/>
  <ellipse cx="110" cy="278" rx="25" ry="5.5" fill="#8a6e37" opacity="0.13"/>

  <!-- Stars -->
  <g>
    <!-- clustered tiny dots and larger glowing stars -->
    <circle cx="35" cy="35" r="1.3" fill="white" opacity="0.8"/>
    <circle cx="56" cy="70" r="1" fill="white" opacity="0.8"/>
    <circle cx="120" cy="40" r="1.6" fill="white" opacity="0.7"/>
    <circle cx="240" cy="40" r="1.1" fill="white" opacity="0.75"/>
    <circle cx="270" cy="90" r="1.2" fill="white" opacity="0.85"/>
    <circle cx="53" cy="140" r="1.4" fill="white" opacity="0.57"/>
    <circle cx="88" cy="110" r="2.4" fill="url(#starGlow)" opacity="1"/>
    <circle cx="209" cy="56" r="1.8" fill="url(#starGlow)" opacity="1"/>
    <circle cx="165" cy="28" r="1.7" fill="url(#starGlow)" opacity="0.91"/>
    <circle cx="142" cy="84" r="2" fill="url(#starGlow)" opacity="0.9"/>
    <circle cx="274" cy="165" r="1.7" fill="white" opacity="0.65"/>
    <circle cx="187" cy="118" r="1.3" fill="white" opacity="0.75"/>
    <circle cx="22" cy="86" r="1" fill="white" opacity="0.7"/>
    <circle cx="125" cy="126" r="1.1" fill="white" opacity="0.65"/>
    <circle cx="260" cy="180" r="1.5" fill="white" opacity="0.75"/>
    <circle cx="70" cy="52" r="0.8" fill="white" opacity="0.8"/>
    <!-- more random star scatter -->
    <circle cx="95" cy="155" r="0.7" fill="white" opacity="0.74"/>
    <circle cx="256" cy="74" r="0.9" fill="white" opacity="0.83"/>
    <circle cx="210" cy="125" r="1.1" fill="white" opacity="0.76"/>
    <circle cx="80" cy="90" r="2.7" fill="url(#starGlow)" opacity="0.87"/>
  </g>

  <!-- Tree trunk (formed by an upright cello)-->
  <g>
    <!-- main cello body -->
    <ellipse cx="150" cy="192" rx="24" ry="48" fill="url(#woodGrad)" stroke="#4c2a11" stroke-width="3"/>
    <!-- cello left f-hole -->
    <path d="M135 195 Q133 185 137 170 Q137 177 136 180 Q135 184 137 187" stroke="#3e200b" stroke-width="1.3" fill="none"/>
    <!-- cello right f-hole -->
    <path d="M165 195 Q167 185 163 170 Q163 177 164 180 Q165 184 163 187" stroke="#3e200b" stroke-width="1.3" fill="none"/>
    <!-- neck -->
    <rect x="143" y="100" width="14" height="50" rx="7" fill="#87603a"/>
    <!-- fingerboard -->
    <rect x="147" y="105" width="6" height="40" rx="2" fill="#50331c"/>
    <!-- scroll (top) -->
    <ellipse cx="150" cy="97" rx="10" ry="5" fill="#a36a2a" stroke="#4c2a11" stroke-width="1"/>
    <ellipse cx="150" cy="99" rx="4" ry="2" fill="#855421"/>
    <!-- bridge -->
    <rect x="148" y="215" width="4" height="7" rx="2" fill="#e3c17d"/>
    <!-- endpin -->
    <rect x="149.3" y="240" width="1.5" height="12" fill="#888" rx="0.5"/>
    <!-- cello strings -->
    <g>
      <rect x="150.8" y="102" width="0.7" height="152" fill="#fbf2d8" opacity="0.7"/>
      <rect x="148.8" y="102" width="0.7" height="151" fill="#ebd7a0" opacity="0.6"/>
      <rect x="152.2" y="102" width="0.7" height="152" fill="#a79783" opacity="0.7"/>
      <rect x="154.0" y="102" width="0.7" height="151" fill="#ecdcb5" opacity="0.66"/>
    </g>
  </g>
  
  <!-- Tree branches are brass wind instruments (Trumpet, French Horn, etc), drawn as branch arms -->

  <!-- Left branch: a trumpet -->
  <g>
    <path d="M140 120 Q120 110 110 88" stroke="url(#brassGrad)" stroke-width="9" fill="none"/>
    <!-- trumpet bell -->
    <ellipse cx="109" cy="83" rx="10" ry="5" fill="url(#brassGrad)" stroke="#ad861b" stroke-width="1"/>
    <!-- trumpet valves -->
    <rect x="131" y="123" width="3" height="8" rx="1" fill="#e1c16e"/>
    <rect x="136" y="126" width="3" height="8" rx="1" fill="#d9c06e"/>
    <!-- shine -->
    <ellipse cx="114" cy="84.5" rx="2" ry="1" fill="#fffec8" opacity="0.44"/>
  </g>

  <!-- Right branch: a French horn -->
  <g>
    <path d="M160 120 Q190 105 220 75 Q240 110 170 124 Q220 80 192 109" stroke="url(#brassGrad)" stroke-width="8" fill="none"/>
    <!-- French horn bell -->
    <ellipse cx="225" cy="72" rx="13" ry="7" fill="url(#brassGrad)" stroke="#b6973a" stroke-width="1.1"/>
    <ellipse cx="229" cy="71" rx="3" ry="2" fill="#fffec6" opacity="0.4"/>
  </g>

  <!-- Upper left branch: a clarinet -->
  <g>
    <rect x="143" y="120" width="7" height="50" rx="3.5" fill="#3a232a"/>
    <!-- clarinet keys -->
    <circle cx="146.5" cy="128" r="1.3" fill="#f3e1c1"/>
    <circle cx="146.5" cy="138" r="1.1" fill="#f3e1c1"/>
    <circle cx="146.5" cy="148" r="1" fill="#f3e1c1"/>
    <circle cx="146.5" cy="158" r="1" fill="#f3e1c1"/>
    <!-- bell -->
    <ellipse cx="146.5" cy="170" rx="6" ry="3" fill="#5f3646"/>
  </g>
  
  <!-- Upper right branch: a saxophone -->
  <g>
    <path d="M155 120 Q180 133 187 80 Q197 77 192 130 Q186 155 155 134" stroke="url(#brassGrad)" stroke-width="8" fill="none"/>
    <!-- sax bell -->
    <ellipse cx="196" cy="76" rx="5" ry="7" fill="url(#brassGrad)" stroke="#efd988" stroke-width="1.1" transform="rotate(-14 196 76)"/>
    <!-- shine -->
    <ellipse cx="199" cy="73" rx="1.2" ry="2" fill="#fffec8" opacity="0.35"/>
  </g>

  <!-- Center top: cymbal as a canopy -->
  <g>
    <ellipse cx="150" cy="74" rx="43" ry="23" fill="url(#cymbalGrad)" stroke="#b6973a" stroke-width="1.5"/>
    <ellipse cx="150" cy="74" rx="9" ry="3.7" fill="#ffeeb7" opacity="0.25"/>
    <!-- cymbal stand -->
    <rect x="148.2" y="78" width="3.6" height="17" rx="1.6" fill="#af9d7a"/>
  </g>
  
  <!-- Tree "leaves" - floating musical notes (styled as abstract leaves) -->
  <g>
    <!-- Left cluster -->
    <g>
      <path d="M97 93 Q93 86 101 80 Q109 74 114 87 Q107 99 97 93 Z" fill="url(#noteGrad)"/>
      <ellipse cx="112" cy="89" rx="2.1" ry="2.7" fill="#fff" opacity="0.4"/>
      <path d="M98 80 Q95 85 102 92" stroke="#48bca3" stroke-width="1.2" fill="none"/>
      <!-- Note stem -->
      <rect x="104" y="77" width="1.2" height="13" rx="0.6" fill="#19b9d0"/>
    </g>
    <!-- Right cluster -->
    <g>
      <path d="M211 91 Q219 80 228 89 Q237 98 223 101 Q212 100 211 91 Z" fill="url(#noteGrad)"/>
      <ellipse cx="228" cy="92" rx="2" ry="2.7" fill="#fff" opacity="0.4"/>
      <path d="M214 91 Q223 85 226 94" stroke="#48bca3" stroke-width="1.2" fill="none"/>
      <rect x="222" y="88" width="1.2" height="10.5" rx="0.6" fill="#19b9d0"/>
    </g>
    <!-- Upper center -->
    <g>
      <path d="M138 52 Q145 42 152 48 Q159 54 154 59 Q149 67 143 61 Q136 55 138 52 Z" fill="url(#noteGrad)"/>
      <ellipse cx="149" cy="53" rx="1.4" ry="2.2" fill="#fff" opacity="0.27"/>
      <rect x="150" y="45" width="0.7" height="10" rx="0.33" fill="#15a39e"/>
    </g>
    <!-- Lower left -->
    <g>
      <path d="M79 138 Q84 132 89 133 Q94 134 93 141 Q92 145 83 145 Q78 141 79 138 Z" fill="url(#noteGrad)"/>
      <ellipse cx="89" cy="138" rx="1.1" ry="2" fill="#fff" opacity="0.23"/>
      <rect x="91" y="133" width="0.8" height="9" rx="0.33" fill="#19b9d0"/>
    </g>
    <!-- Lower right -->
    <g>
      <path d="M218 144 Q222 140 226 141 Q230 142 230 147 Q230 152 223 151 Q215 148 218 144 Z" fill="url(#noteGrad)"/>
      <ellipse cx="227" cy="145" rx="1.1" ry="2" fill="#fff" opacity="0.23"/>
      <rect x="228" y="141" width="0.8" height="8" rx="0.33" fill="#19b9d0"/>
    </g>
  </g>

  <!-- Suspended from the right branch - an acoustic guitar -->
  <g>
    <ellipse cx="194" cy="164" rx="13" ry="17.5" fill="url(#guitarGrad)" stroke="#704021" stroke-width="2"/>
    <ellipse cx="194" cy="155" rx="8" ry="7" fill="#d4a07c" opacity="0.8" stroke="#8d5523" stroke-width="1"/>
    <!-- sound hole -->
    <ellipse cx="194" cy="168" rx="2.8" ry="3.2" fill="#3b2412" opacity="0.83"/>
    <!-- neck -->
    <rect x="192" y="135" width="4.5" height="13" rx="2" fill="#8d5523"/>
    <!-- head -->
    <ellipse cx="194.2" cy="132.2" rx="2.1" ry="2.4" fill="#875828"/>
    <!-- Strings -->
    <rect x="194.5" y="137" width="0.5" height="13.5" fill="#e8d4b7" opacity="0.7"/>
    <rect x="195.5" y="137" width="0.3" height="13.5" fill="#e1d2ad" opacity="0.8"/>
    <rect x="193.1" y="137" width="0.22" height="13.5" fill="#c7b29b" opacity="0.8"/>
  </g>
  
  <!-- Small drum (as a fruit) on left lower branch -->
  <g>
    <ellipse cx="106" cy="168" rx="7" ry="7.5" fill="url(#drumHead)" stroke="#a98a7a" stroke-width="2"/>
    <ellipse cx="106" cy="168" rx="6" ry="6.5" fill="#e7d6c0" opacity="0.23"/>
    <!-- drum lugs -->
    <circle cx="100" cy="168" r="0.7" fill="#caaf90"/>
    <circle cx="106" cy="161" r="0.6" fill="#bba583"/>
    <circle cx="112" cy="168" r="0.7" fill="#caaf90"/>
    <circle cx="106" cy="175" r="0.6" fill="#bba583"/>
  </g>

  <!-- Subtle shoot branches coming from tree/cello as thin lines -->
  <g stroke="#a57c55" stroke-width="2.2" opacity="0.5" fill="none">
    <path d="M143 174 Q130 160 115 150"/>
    <path d="M157 177 Q165 161 185 150"/>
    <path d="M147 135 Q125 125 112 113"/>
    <path d="M153 124 Q165 110 178 105"/>
    <path d="M154 185 Q173 197 190 211"/>
    <path d="M146 183 Q131 197 109 212"/>
  </g>

  <!-- Subtle sparkle over the cymbal "canopy" -->
  <ellipse cx="150" cy="68" rx="7" ry="2" fill="#fff" opacity="0.18"/>
  <ellipse cx="170" cy="77" rx="2" ry="0.6" fill="#fff" opacity="0.11"/>
  <ellipse cx="131" cy="78" rx="2.2" ry="0.5" fill="#fff" opacity="0.07"/>

</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,353.2 1,333.567 (-19.6)

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 reuse -->
  <defs>
    <!-- Sky gradient with cosmic colors -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a001a" />
      <stop offset="40%" stop-color="#1a0033" />
      <stop offset="70%" stop-color="#3a005c" />
      <stop offset="100%" stop-color="#5a0080" />
    </linearGradient>
    
    <!-- Desert gradient -->
    <linearGradient id="desertGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#e65100" />
      <stop offset="50%" stop-color="#ff9800" />
      <stop offset="100%" stop-color="#ffca28" />
    </linearGradient>
    
    <!-- Dune pattern -->
    <pattern id="dunePattern" patternUnits="userSpaceOnUse" width="100" height="20" patternTransform="rotate(0)">
      <path d="M0,10 Q25,0 50,10 T100,10" fill="none" stroke="#e65100" stroke-width="0.5" stroke-opacity="0.3" />
    </pattern>
    
    <!-- Wood grain pattern -->
    <pattern id="woodGrain" patternUnits="userSpaceOnUse" width="30" height="30">
      <path d="M0,5 Q7,2 15,5 T30,5" fill="none" stroke="#8d6e63" stroke-width="1" stroke-opacity="0.5" />
      <path d="M0,15 Q7,12 15,15 T30,15" fill="none" stroke="#8d6e63" stroke-width="1" stroke-opacity="0.5" />
      <path d="M0,25 Q7,22 15,25 T30,25" fill="none" stroke="#8d6e63" stroke-width="1" stroke-opacity="0.5" />
    </pattern>
    
    <!-- Brass gradient -->
    <linearGradient id="brassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffd54f" />
      <stop offset="50%" stop-color="#ffb300" />
      <stop offset="100%" stop-color="#ff8f00" />
    </linearGradient>
    
    <!-- Silver gradient -->
    <linearGradient id="silverGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f5f5f5" />
      <stop offset="50%" stop-color="#e0e0e0" />
      <stop offset="100%" stop-color="#bdbdbd" />
    </linearGradient>
    
    <!-- Gold gradient -->
    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fff8e1" />
      <stop offset="50%" stop-color="#ffd54f" />
      <stop offset="100%" stop-color="#ff9800" />
    </linearGradient>
    
    <!-- Star twinkle filter -->
    <filter id="twinkle">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="1.5" intercept="0" />
      </feComponentTransfer>
    </filter>
    
    <!-- Strong twinkle filter -->
    <filter id="strongTwinkle">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0.8" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="2" intercept="0" />
      </feComponentTransfer>
    </filter>
    
    <!-- Glow filter -->
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Desert dust texture -->
    <filter id="dust">
      <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="noise" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="5" />
    </filter>
  </defs>
  
  <!-- Background Sky -->
  <rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g id="stars">
    <!-- Small stars -->
    <g fill="#ffffff">
      <circle cx="20" cy="30" r="0.8" filter="url(#twinkle)" />
      <circle cx="50" cy="15" r="1" filter="url(#twinkle)" />
      <circle cx="80" cy="40" r="0.7" filter="url(#twinkle)" />
      <circle cx="120" cy="25" r="1.2" filter="url(#twinkle)" />
      <circle cx="150" cy="10" r="0.9" filter="url(#twinkle)" />
      <circle cx="180" cy="35" r="1.1" filter="url(#twinkle)" />
      <circle cx="210" cy="20" r="0.8" filter="url(#twinkle)" />
      <circle cx="240" cy="45" r="1" filter="url(#twinkle)" />
      <circle cx="270" cy="15" r="0.9" filter="url(#twinkle)" />
      <circle cx="30" cy="60" r="0.7" filter="url(#twinkle)" />
      <circle cx="70" cy="70" r="1.1" filter="url(#twinkle)" />
      <circle cx="110" cy="50" r="0.8" filter="url(#twinkle)" />
      <circle cx="160" cy="65" r="1" filter="url(#twinkle)" />
      <circle cx="200" cy="55" r="0.9" filter="url(#twinkle)" />
      <circle cx="250" cy="75" r="1.2" filter="url(#twinkle)" />
      <circle cx="280" cy="40" r="0.7" filter="url(#twinkle)" />
      <circle cx="40" cy="90" r="0.8" filter="url(#twinkle)" />
      <circle cx="90" cy="85" r="1" filter="url(#twinkle)" />
      <circle cx="140" cy="95" r="0.9" filter="url(#twinkle)" />
      <circle cx="190" cy="80" r="0.7" filter="url(#twinkle)" />
      <circle cx="230" cy="90" r="1.1" filter="url(#twinkle)" />
      <circle cx="260" cy="60" r="0.8" filter="url(#twinkle)" />
    </g>
    
    <!-- Medium stars -->
    <g fill="#ffffff">
      <circle cx="35" cy="25" r="1.3" filter="url(#strongTwinkle)" />
      <circle cx="95" cy="40" r="1.4" filter="url(#strongTwinkle)" />
      <circle cx="170" cy="15" r="1.5" filter="url(#strongTwinkle)" />
      <circle cx="225" cy="30" r="1.3" filter="url(#strongTwinkle)" />
      <circle cx="275" cy="50" r="1.4" filter="url(#strongTwinkle)" />
      <circle cx="125" cy="70" r="1.5" filter="url(#strongTwinkle)" />
    </g>
    
    <!-- Special stars with rays -->
    <g>
      <path d="M56,33 L57,33 L57,32 L56,32 Z M55,34 L58,34 L58,31 L55,31 Z" fill="#ffffff" filter="url(#strongTwinkle)" />
      <path d="M242,22 L243,22 L243,21 L242,21 Z M241,23 L244,23 L244,20 L241,20 Z" fill="#ffffff" filter="url(#strongTwinkle)" />
      <path d="M141,43 L142,43 L142,42 L141,42 Z M140,44 L143,44 L143,41 L140,41 Z" fill="#ffffff" filter="url(#strongTwinkle)" />
    </g>
    
    <!-- Shooting star -->
    <path d="M280,25 L265,35" stroke="#ffffff" stroke-width="1" filter="url(#glow)" />
    <circle cx="265" cy="35" r="1.5" fill="#ffffff" filter="url(#glow)" />
    
    <!-- Moon with craters -->
    <circle cx="250" cy="40" r="15" fill="#f9f9f9" filter="url(#glow)" />
    <circle cx="245" cy="35" r="12" fill="#0a001a" />
    <circle cx="250" cy="32" r="2" fill="#e0e0e0" opacity="0.5" />
    <circle cx="243" cy="40" r="1.5" fill="#e0e0e0" opacity="0.5" />
    <circle cx="253" cy="45" r="2.5" fill="#e0e0e0" opacity="0.5" />
  </g>
  
  <!-- Desert terrain -->
  <path d="M0,200 C50,180 100,190 150,180 S250,170 300,190 L300,300 L0,300 Z" fill="url(#desertGradient)" />
  <path d="M0,200 C50,180 100,190 150,180 S250,170 300,190 L300,300 L0,300 Z" fill="url(#dunePattern)" />
  
  <!-- Desert fine sand texture -->
  <rect x="0" y="200" width="300" height="100" fill="#ff9800" opacity="0.05" filter="url(#dust)" />
  
  <!-- Desert details -->
  <g id="desert-details">
    <!-- Cacti -->
    <g>
      <path d="M30,210 L30,230 L25,230 L25,240 L30,240 L30,250 C30,255 40,255 40,250 L40,240 L45,240 L45,230 L40,230 L40,210 C40,205 30,205 30,210 Z" fill="#2e7d32" />
      <!-- Cactus spikes -->
      <line x1="30" y1="215" x2="28" y2="213" stroke="#81c784" stroke-width="0.5" />
      <line x1="40" y1="215" x2="42" y2="213" stroke="#81c784" stroke-width="0.5" />
      <line x1="30" y1="225" x2="28" y2="223" stroke="#81c784" stroke-width="0.5" />
      <line x1="40" y1="225" x2="42" y2="223" stroke="#81c784" stroke-width="0.5" />
      <line x1="30" y1="235" x2="28" y2="233" stroke="#81c784" stroke-width="0.5" />
      <line x1="40" y1="235" x2="42" y2="233" stroke="#81c784" stroke-width="0.5" />
      <line x1="30" y1="245" x2="28" y2="243" stroke="#81c784" stroke-width="0.5" />
      <line x1="40" y1="245" x2="42" y2="243" stroke="#81c784" stroke-width="0.5" />
    </g>
    
    <g>
      <path d="M260,220 L260,250 L255,250 L255,260 L260,260 L260,270 C260,275 270,275 270,270 L270,260 L275,260 L275,250 L270,250 L270,220 C270,215 260,215 260,220 Z" fill="#2e7d32" />
      <!-- Cactus spikes -->
      <line x1="260" y1="225" x2="258" y2="223" stroke="#81c784" stroke-width="0.5" />
      <line x1="270" y1="225" x2="272" y2="223" stroke="#81c784" stroke-width="0.5" />
      <line x1="260" y1="235" x2="258" y2="233" stroke="#81c784" stroke-width="0.5" />
      <line x1="270" y1="235" x2="272" y2="233" stroke="#81c784" stroke-width="0.5" />
      <line x1="260" y1="245" x2="258" y2="243" stroke="#81c784" stroke-width="0.5" />
      <line x1="270" y1="245" x2="272" y2="243" stroke="#81c784" stroke-width="0.5" />
      <line x1="260" y1="255" x2="258" y2="253" stroke="#81c784" stroke-width="0.5" />
      <line x1="270" y1="255" x2="272" y2="253" stroke="#81c784" stroke-width="0.5" />
      <line x1="260" y1="265" x2="258" y2="263" stroke="#81c784" stroke-width="0.5" />
      <line x1="270" y1="265" x2="272" y2="263" stroke="#81c784" stroke-width="0.5" />
    </g>
    
    <!-- Rocks -->
    <ellipse cx="60" cy="260" rx="15" ry="8" fill="#8d6e63" />
    <ellipse cx="63" cy="257" rx="6" ry="3" fill="#a1887f" opacity="0.5" />
    
    <ellipse cx="235" cy="270" rx="20" ry="10" fill="#8d6e63" />
    <ellipse cx="239" cy="267" rx="8" ry="4" fill="#a1887f" opacity="0.5" />
    
    <ellipse cx="100" cy="280" rx="12" ry="6" fill="#8d6e63" />
    <ellipse cx="103" cy="278" rx="5" ry="2" fill="#a1887f" opacity="0.5" />
  </g>
  
  <!-- Musical Instrument Tree -->
  <g id="instrument-tree">
    <!-- Cello/Double bass trunk -->
    <path d="M150,200 C145,210 145,230 148,240 C150,250 150,260 150,270 S155,280 150,290" fill="none" stroke="#5d4037" stroke-width="8" />
    <path d="M135,240 C150,245 165,245 175,240 C180,260 180,280 170,290 C160,295 140,295 130,290 C120,280 120,260 125,240 Z" fill="#8d6e63" />
    <ellipse cx="150" cy="255" rx="25" ry="40" fill="url(#woodGrain)" />
    
    <!-- F-holes -->
    <path d="M138,240 Q135,255 138,270" fill="none" stroke="#5d4037" stroke-width="1.5" />
    <path d="M162,240 Q165,255 162,270" fill="none" stroke="#5d4037" stroke-width="1.5" />
    
    <!-- Tuning pegs -->
    <circle cx="135" cy="225" r="2" fill="#3e2723" />
    <circle cx="140" cy="225" r="2" fill="#3e2723" />
    <circle cx="160" cy="225" r="2" fill="#3e2723" />
    <circle cx="165" cy="225" r="2" fill="#3e2723" />
    
    <!-- Strings -->
    <line x1="140" y1="230" x2="140" y2="285" stroke="#f5f5f5" stroke-width="0.7" />
    <line x1="147" y1="230" x2="147" y2="285" stroke="#f5f5f5" stroke-width="0.7" />
    <line x1="153" y1="230" x2="153" y2="285" stroke="#f5f5f5" stroke-width="0.7" />
    <line x1="160" y1="230" x2="160" y2="285" stroke="#f5f5f5" stroke-width="0.7" />
    
    <!-- Guitar branch left -->
    <path d="M135,240 C120,230 100,225 85,230" fill="none" stroke="#8d6e63" stroke-width="4" />
    <rect x="65" y="225" width="20" height="10" rx="2" ry="2" fill="#5d4037" />
    <path d="M65,230 C50,235 45,245 55,255 C65,265 85,260 85,240 Z" fill="url(#woodGrain)" stroke="#5d4037" stroke-width="1" />
    <line x1="65" y1="230" x2="85" y2="230" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="65" y1="235" x2="85" y2="235" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="65" y1="240" x2="85" y2="240" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="65" y1="245" x2="85" y2="245" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="65" y1="250" x2="85" y2="250" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="65" y1="255" x2="85" y2="255" stroke="#f5f5f5" stroke-width="0.5" />
    
    <!-- Guitar details -->
    <circle cx="75" cy="235" r="5" fill="none" stroke="#5d4037" stroke-width="0.5" />
    <circle cx="75" cy="235" r="2" fill="#3e2723" />
    
    <!-- Trumpet branch right -->
    <path d="M165,240 C180,230 200,225 215,230" fill="none" stroke="#8d6e63" stroke-width="4" />
    <path d="M190,230 L215,230 C220,230 225,235 225,240 C225,245 220,250 215,250 L210,250" fill="none" stroke="url(#brassGradient)" stroke-width="5" />
    <circle cx="225" cy="240" r="6" fill="url(#brassGradient)" />
    
    <!-- Trumpet valves -->
    <rect x="200" y="230" width="3" height="8" rx="1" ry="1" fill="url(#silverGradient)" />
    <rect x="205" y="230" width="3" height="8" rx="1" ry="1" fill="url(#silverGradient)" />
    <rect x="210" y="230" width="3" height="8" rx="1" ry="1" fill="url(#silverGradient)" />
    
    <!-- Flute branch top -->
    <path d="M150,230 C150,210 160,200 175,190" fill="none" stroke="#8d6e63" stroke-width="4" />
    <rect x="175" y="185" width="40" height="4" rx="2" ry="2" fill="url(#silverGradient)" />
    <circle cx="180" cy="187" r="1" fill="#424242" />
    <circle cx="185" cy="187" r="1" fill="#424242" />
    <circle cx="190" cy="187" r="1" fill="#424242" />
    <circle cx="195" cy="187" r="1" fill="#424242" />
    <circle cx="200" cy="187" r="1" fill="#424242" />
    <circle cx="205" cy="187" r="1" fill="#424242" />
    <circle cx="210" cy="187" r="1" fill="#424242" />
    
    <!-- Violin branch top-left -->
    <path d="M135,240 C130,220 120,210 105,205" fill="none" stroke="#8d6e63" stroke-width="4" />
    <path d="M90,200 C85,195 85,190 90,185 C95,180 105,180 110,185 C115,190 115,195 110,200 C105,205 95,205 90,200 Z" fill="url(#woodGrain)" />
    <path d="M93,192 Q91,195 93,198" fill="none" stroke="#5d4037" stroke-width="0.7" />
    <path d="M107,192 Q109,195 107,198" fill="none" stroke="#5d4037" stroke-width="0.7" />
    <rect x="110" y="190" width="10" height="2" fill="#5d4037" />
    <line x1="90" y1="192.5" x2="110" y2="192.5" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="90" y1="195" x2="110" y2="195" stroke="#f5f5f5" stroke-width="0.5" />
    <line x1="90" y1="197.5" x2="110" y2="197.5" stroke="#f5f5f5" stroke-width="0.5" />
    
    <!-- Violin bow -->
    <line x1="120" y1="195" x2="95" y2="185" stroke="#5d4037" stroke-width="1" />
    <line x1="120" y1="195" x2="95" y2="185" stroke="#f5f5f5" stroke-width="0.5" opacity="0.7" />
    
    <!-- French horn branch top-right -->
    <path d="M165,240 C170,220 180,210 195,205" fill="none" stroke="#8d6e63" stroke-width="4" />
    <path d="M195,205 C200,200 210,200 210,195 C210,190 205,185 195,185 C185,185 180,190 180,195 C180,200 190,200 195,205 Z" fill="none" stroke="url(#brassGradient)" stroke-width="3" />
    <circle cx="195" cy="185" r="2" fill="url(#brassGradient)" />
    
    <!-- "Leaves" (small instruments) -->
    <!-- Tambourine 1 -->
    <circle cx="80" cy="220" r="8" fill="#f5f5f5" stroke="#5d4037" stroke-width="1" />
    <circle cx="80" cy="220" r="6" fill="none" stroke="#5d4037" stroke-width="0.5" />
    <circle cx="80" cy="214" r="1" fill="url(#goldGradient)" />
    <circle cx="86" cy="220" r="1" fill="url(#goldGradient)" />
    <circle cx="80" cy="226" r="1" fill="url(#goldGradient)" />
    <circle cx="74" cy="220" r="1" fill="url(#goldGradient)" />
    <circle cx="83" cy="217" r="1" fill="url(#goldGradient)" />
    <circle cx="83" cy="223" r="1" fill="url(#goldGradient)" />
    <circle cx="77" cy="223" r="1" fill="url(#goldGradient)" />
    <circle cx="77" cy="217" r="1" fill="url(#goldGradient)" />
    
    <!-- Tambourine 2 -->
    <circle cx="220" cy="220" r="8" fill="#f5f5f5" stroke="#5d4037" stroke-width="1" />
    <circle cx="220" cy="220" r="6" fill="none" stroke="#5d4037" stroke-width="0.5" />
    <circle cx="220" cy="214" r="1" fill="url(#goldGradient)" />
    <circle cx="226" cy="220" r="1" fill="url(#goldGradient)" />
    <circle cx="220" cy="226" r="1" fill="url(#goldGradient)" />
    <circle cx="214" cy="220" r="1" fill="url(#goldGradient)" />
    <circle cx="223" cy="217" r="1" fill="url(#goldGradient)" />
    <circle cx="223" cy="223" r="1" fill="url(#goldGradient)" />
    <circle cx="217" cy="223" r="1" fill="url(#goldGradient)" />
    <circle cx="217" cy="217" r="1" fill="url(#goldGradient)" />
    
    <!-- Harmonica 1 -->
    <rect x="100" y="195" width="12" height="5" rx="1" ry="1" fill="url(#silverGradient)" />
    <line x1="102" y1="195" x2="102" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="104" y1="195" x2="104" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="106" y1="195" x2="106" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="108" y1="195" x2="108" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="110" y1="195" x2="110" y2="200" stroke="#424242" stroke-width="0.3" />
    
    <!-- Harmonica 2 -->
    <rect x="185" y="195" width="12" height="5" rx="1" ry="1" fill="url(#silverGradient)" />
    <line x1="187" y1="195" x2="187" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="189" y1="195" x2="189" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="191" y1="195" x2="191" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="193" y1="195" x2="193" y2="200" stroke="#424242" stroke-width="0.3" />
    <line x1="195" y1="195" x2="195" y2="200" stroke="#424242" stroke-width="0.3" />
    
    <!-- Triangle -->
    <path d="M160,175 L170,190 L150,190 Z" fill="none" stroke="url(#silverGradient)" stroke-width="1.5" />
    <line x1="160" y1="175" x2="160" y2="178" stroke="url(#silverGradient)" stroke-width="3" />
    
    <!-- Cymbals -->
    <ellipse cx="130" cy="180" rx="10" ry="3" fill="url(#brassGradient)" transform="rotate(-20, 130, 180)" />
    <ellipse cx="140" cy="175" rx="10" ry="3" fill="url(#brassGradient)" transform="rotate(20, 140, 175)" />
    
    <!-- Saxophone leaf -->
    <path d="M110,170 C105,165 105,160 110,155 C115,150 120,155 120,160" fill="none" stroke="url(#brassGradient)" stroke-width="2" />
    <circle cx="120" cy="160" r="2" fill="url(#brassGradient)" />
    <circle cx="115" cy="155" r="1.5" fill="url(#brassGradient)" />
    <circle cx="110" cy="155" r="1" fill="url(#brassGradient)" />
  </g>
  
  <!-- Musical notes floating around -->
  <g fill="#ffffff" opacity="0.8">
    <!-- Quarter notes -->
    <path d="M70,170 L70,155 L75,155 L75,170 L70,170 Z M70,155 C75,153 80,155 75,157" />
    <path d="M90,160 L90,145 L95,145 L95,160 L90,160 Z M90,145 C95,143 100,145 95,147" />
    <path d="M220,160 L220,145 L225,145 L225,160 L220,160 Z M220,145 C225,143 230,145 225,147" />
    <path d="M240,170 L240,155 L245,155 L245,170 L240,170 Z M240,155 C245,153 250,155 245,157" />
    <path d="M130,150 L130,135 L135,135 L135,150 L130,150 Z M130,135 C135,133 140,135 135,137" />
    <path d="M170,155 L170,140 L175,140 L175,155 L170,155 Z M170,140 C175,138 180,140 175,142" />
    
    <!-- Eighth notes -->
    <path d="M110,165 L110,150 L115,150 L115,165 L110,165 Z M110,150 C115,148 120,150 115,152" />
    <path d="M110,150 C115,148 115,140 110,142" />
    
    <path d="M190,170 L190,155 L195,155 L195,170 L190,170 Z M190,155 C195,153 200,155 195,157" />
    <path d="M190,155 C195,153 195,145 190,147" />
    
    <!-- Treble clef -->
    <path d="M50,120 C45,125 45,135 50,140 C55,145 55,150 50,155 C45,160 45,170 50,175 C45,180 40,180 40,175 C40,170 45,165 45,160 C45,155 40,150 35,150 C30,150 25,155 25,165 C25,175 30,185 40,185 C50,185 60,175 60,160 C60,145 50,135 45,135 C40,135 40,130 45,125 Z" fill="#ffffff" opacity="0.6" />
  </g>
  
  <!-- Glowing musical energy -->
  <circle cx="150" cy="210" r="30" fill="url(#goldGradient)" opacity="0.1" filter="url(#glow)" />
</svg>

GPT-4o

Judge & Evaluator

The winner of this SVG challenge is GPT-4.1 (2025-04-14) Player 1

Judge's Analysis

Player 1's image demonstrates better adherence to the prompt by creating a cohesive tree form made of musical instruments, with a clear desert and starry sky background.

The composition is more visually appealing and technically polished, with a balanced and harmonious design.

Player 2's submission, while creative, lacks a clear tree structure and appears more chaotic in its arrangement of elements, reducing its adherence to the 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

100

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

221

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.