Back

SVG Drawing Match #2635

May 09, 2025

GPT-4o

Challenge Creator

Creative Challenge

"A cactus wearing a bowtie in the middle of a snowy desert."

Gemini 2.5 Pro Preview 05-06

Player 1

ELO: 1,259.246 1,246.881 (-12.4)

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="skyGradient" x1="0.5" y1="0" x2="0.5" y2="1">
            <stop offset="0%" stop-color="#23074d" /> <!-- Deep Indigo -->
            <stop offset="40%" stop-color="#581778" /> <!-- Rich Purple -->
            <stop offset="75%" stop-color="#C33764" /> <!-- Magenta/Rose -->
            <stop offset="100%" stop-color="#FD846A" /> <!-- Coral/Orange horizon -->
        </linearGradient>
        <radialGradient id="moonGlow" cx="0.85" cy="0.15" r="0.45">
            <stop offset="0%" stop-color="rgba(255, 250, 205, 0.5)" />
            <stop offset="100%" stop-color="rgba(255, 250, 205, 0)" />
        </radialGradient>
        <linearGradient id="snowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#FFFFFF;" />
            <stop offset="100%" style="stop-color:#E0F2F7;" />
        </linearGradient>
        <radialGradient id="snowSparkle" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stop-color="rgba(255,255,255,0.95)"/>
            <stop offset="60%" stop-color="rgba(230,240,255,0.7)"/>
            <stop offset="100%" stop-color="rgba(200,220,255,0.4)"/>
        </radialGradient>
        <linearGradient id="cactusGradient" x1="0.5" y1="0" x2="0.5" y2="1">
            <stop offset="0%" style="stop-color:#388E3C;" />
            <stop offset="50%" style="stop-color:#4CAF50;" />
            <stop offset="100%" style="stop-color:#66BB6A;" />
        </linearGradient>
        <linearGradient id="bowtieGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#D32F2F;" /> <!-- Darker Red -->
            <stop offset="50%" style="stop-color:#F44336;" /> <!-- Red -->
            <stop offset="100%" style="stop-color:#E57373;" /> <!-- Lighter Red -->
        </linearGradient>
        <pattern id="polkaDots" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
            <circle cx="1.5" cy="1.5" r="0.75" fill="rgba(255,255,255,0.6)"/>
            <circle cx="4.5" cy="4.5" r="0.75" fill="rgba(255,255,255,0.5)"/>
        </pattern>
        <filter id="subtleShadow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
            <feOffset in="blur" dx="2" dy="3" result="offsetBlur"/>
            <feFlood flood-color="#000000" flood-opacity="0.25" result="offsetColor"/>
            <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="shadow"/>
            <feMerge>
                <feMergeNode in="shadow"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        <g id="flakeSymbol" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="1.2" stroke-linecap="round">
            <line x1="0" y1="-6" x2="0" y2="6"/>
            <line x1="-5.2" y1="-3" x2="5.2" y2="3"/>
            <line x1="-5.2" y1="3" x2="5.2" y2="-3"/>
            <line x1="0" y1="-6" x2="-1" y2="-4.5"/> <line x1="0" y1="-6" x2="1" y2="-4.5"/>
            <line x1="0" y1="6" x2="-1" y2="4.5"/> <line x1="0" y1="6" x2="1" y2="4.5"/>
            <line x1="5.2" y1="3" x2="4.2" y2="1.8"/> <line x1="5.2" y1="3" x2="3.9" y2="2.2"/>
            <line x1="-5.2" y1="-3" x2="-4.2" y2="-1.8"/> <line x1="-5.2" y1="-3" x2="-3.9" y2="-2.2"/>
        </g>
    </defs>

    <!-- Sky -->
    <rect width="300" height="300" fill="url(#skyGradient)" />
    <circle cx="245" cy="55" r="22" fill="#FFFACD" opacity="0.95"/> <!-- Moon -->
    <rect width="300" height="300" fill="url(#moonGlow)" />

    <!-- Distant landscape elements -->
    <path d="M0 200 Q70 185, 150 195 T300 180 V210 H0 Z" fill="#3a1f56" opacity="0.6"/>
    <path d="M0 205 Q80 195, 160 200 T300 190 V215 H0 Z" fill="#793a6b" opacity="0.4"/>

    <!-- Ground -->
    <path d="M0 300 L0 195 C 70 180, 190 220, 300 200 L300 300 Z" fill="#C19A6B"/> <!-- Sandy base -->
    <path d="M0 300 L0 210
             C 50 195, 90 220, 130 205
             S 190 185, 230 200
             S 280 210, 300 200 L300 300 Z"
          fill="url(#snowGradient)" opacity="0.9"/>
    <path d="M-10 240
             C 40 225, 80 250, 120 235
             S 180 210, 220 230
             S 270 235, 310 220 L310 300 L-10 300 Z"
          fill="url(#snowGradient)" opacity="0.75"/>
    <path d="M0 265
             C 60 255, 110 275, 160 260
             S 230 235, 270 250
             S 300 255, 300 255 L300 300 L0 300 Z"
          fill="url(#snowSparkle)" opacity="0.7"/>

    <!-- Cactus -->
    <g id="cactusGroup" transform="translate(0, 5)" filter="url(#subtleShadow)">
        <!-- Main trunk -->
        <path d="M130 235 Q128 170, 150 130 Q172 170, 170 235 Z"
              fill="url(#cactusGradient)" stroke="#1B5E20" stroke-width="1.5"/>
        <!-- Right Arm -->
        <path d="M160 185 C185 185, 195 165, 195 145 L190 145 C190 163, 180 180, 160 180 Z"
              fill="url(#cactusGradient)" stroke="#1B5E20" stroke-width="1.5"
              transform="rotate(15, 160, 185)"/>
        <!-- Left Arm -->
         <path d="M140 175 C115 175, 105 155, 105 135 L110 135 C110 153, 120 170, 140 170 Z"
              fill="url(#cactusGradient)" stroke="#1B5E20" stroke-width="1.5"
              transform="rotate(-15, 140, 175)"/>

        <!-- Spines -->
        <g stroke="#FFFDE7" stroke-width="0.8" stroke-linecap="round">
            <line x1="150" y1="140" x2="150" y2="137" /> <line x1="150" y1="140" x2="152.5" y2="140.5" /> <line x1="150" y1="140" x2="147.5" y2="140.5" />
            <line x1="138" y1="165" x2="136" y2="163" /> <line x1="138" y1="165" x2="140" y2="163" />
            <line x1="162" y1="165" x2="160" y2="163" /> <line x1="162" y1="165" x2="164" y2="163" />
            <line x1="135" y1="200" x2="133" y2="198" /> <line x1="135" y1="200" x2="137" y2="198" />
            <line x1="165" y1="200" x2="163" y2="198" /> <line x1="165" y1="200" x2="167" y2="198" />
            <!-- Spines on right arm (approx position after rotation) -->
            <g transform="translate(192, 148) rotate(15)"> <line x1="0" y1="0" x2="-2" y2="-1"/> <line x1="0" y1="0" x2="2" y2="-1"/> </g>
            <!-- Spines on left arm (approx position after rotation) -->
            <g transform="translate(108, 138) rotate(-15)"> <line x1="0" y1="0" x2="-2" y2="-1"/> <line x1="0" y1="0" x2="2" y2="-1"/> </g>
        </g>
    </g>

    <!-- Bowtie -->
    <g id="bowtie" transform="translate(150, 200) scale(1.1)">
        <!-- Knot -->
        <ellipse cx="0" cy="0" rx="5.5" ry="4" fill="#A02020" stroke="#611212" stroke-width="0.7"/>
        <!-- Left Loop -->
        <path d="M-4.5 -2.5 Q-18 -12, -22 0 Q-18 12, -4.5 2.5 Z" fill="url(#bowtieGradient)" stroke="#611212" stroke-width="0.7"/>
        <path d="M-4.5 -2.5 Q-18 -12, -22 0 Q-18 12, -4.5 2.5 Z" fill="url(#polkaDots)"/>
        <!-- Right Loop -->
        <path d="M4.5 -2.5 Q18 -12, 22 0 Q18 12, 4.5 2.5 Z" fill="url(#bowtieGradient)" stroke="#611212" stroke-width="0.7"/>
        <path d="M4.5 -2.5 Q18 -12, 22 0 Q18 12, 4.5 2.5 Z" fill="url(#polkaDots)"/>
    </g>

    <!-- Snowflakes -->
    <g id="fallingSnowflakes">
        <use href="#flakeSymbol" transform="translate(60, 90) scale(1.3) rotate(20)" opacity="0.9"/>
        <use href="#flakeSymbol" transform="translate(230, 130) scale(1) rotate(-15)" opacity="0.8"/>
        <use href="#flakeSymbol" transform="translate(110, 160) scale(1.1) rotate(5)" opacity="0.95"/>
        <use href="#flakeSymbol" transform="translate(190, 50) scale(0.8) rotate(30)" opacity="0.7"/>
        <use href="#flakeSymbol" transform="translate(280, 190) scale(1.2) rotate(-25)" opacity="0.85"/>
        <circle cx="40" cy="130" r="1.8" fill="url(#snowSparkle)" opacity="0.7"/>
        <circle cx="90" cy="70" r="1.2" fill="url(#snowSparkle)" opacity="0.8"/>
        <circle cx="140" cy="100" r="1.5" fill="url(#snowSparkle)" opacity="0.6"/>
        <circle cx="210" cy="170" r="2" fill="url(#snowSparkle)" opacity="0.75"/>
        <circle cx="260" cy="80" r="1.6" fill="url(#snowSparkle)" opacity="0.85"/>
    </g>

    <!-- Snow on cactus -->
    <g id="snowOnCactus" transform="translate(0, 5)"> <!-- Match cactus group transform if any -->
        <ellipse cx="150" cy="128" rx="5" ry="3" fill="url(#snowSparkle)" opacity="0.9"/> <!-- Top of main trunk -->
        <!-- Snow on right arm (visual placement, considering arm pose) -->
        <path d="M180 148 Q190 138, 200 146 Q193 155, 183 155 Z" fill="url(#snowSparkle)" opacity="0.85" transform="rotate(5, 190, 145)"/>
        <!-- Snow on left arm (visual placement) -->
        <path d="M100 138 Q110 128, 120 136 Q113 145, 103 145 Z" fill="url(#snowSparkle)" opacity="0.85" transform="rotate(-5, 110, 135)"/>
    </g>
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,339.566 1,351.931 (+12.4)

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 reuse -->
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a1128" />
      <stop offset="70%" stop-color="#4a306d" />
      <stop offset="100%" stop-color="#7c5295" />
    </linearGradient>
    
    <!-- Sand gradient -->
    <linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#f2d694" />
      <stop offset="100%" stop-color="#d1ae76" />
    </linearGradient>
    
    <!-- Cactus gradient -->
    <linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1e5631" />
      <stop offset="50%" stop-color="#2a733b" />
      <stop offset="100%" stop-color="#1e5631" />
    </linearGradient>
    
    <!-- Bowtie pattern -->
    <pattern id="bowtiePlaid" patternUnits="userSpaceOnUse" width="10" height="10">
      <rect width="10" height="10" fill="#b22234"/>
      <path d="M0,0 L10,10 M10,0 L0,10" stroke="#3c3b6e" stroke-width="1"/>
    </pattern>
    
    <!-- Cactus texture -->
    <pattern id="cactusTexture" patternUnits="userSpaceOnUse" width="20" height="40">
      <line x1="10" y1="0" x2="10" y2="40" stroke="#236b31" stroke-width="2" />
      <line x1="5" y1="10" x2="15" y2="10" stroke="#236b31" stroke-width="1" />
      <line x1="5" y1="25" x2="15" y2="25" stroke="#236b31" stroke-width="1" />
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g fill="white">
    <circle cx="30" cy="30" r="1" opacity="0.8" />
    <circle cx="70" cy="50" r="1.2" opacity="0.9" />
    <circle cx="120" cy="20" r="0.8" opacity="0.7" />
    <circle cx="200" cy="70" r="1" opacity="0.8" />
    <circle cx="180" cy="30" r="1.3" opacity="0.9" />
    <circle cx="50" cy="80" r="0.9" opacity="0.7" />
    <circle cx="270" cy="40" r="1.1" opacity="0.9" />
    <circle cx="150" cy="60" r="0.7" opacity="0.6" />
    <circle cx="90" cy="40" r="1.2" opacity="0.8" />
    <circle cx="250" cy="90" r="0.8" opacity="0.7" />
    <circle cx="220" cy="25" r="1" opacity="0.8" />
    <circle cx="100" cy="75" r="0.6" opacity="0.7" />
    <circle cx="170" cy="45" r="1.1" opacity="0.9" />
    <circle cx="35" cy="65" r="0.8" opacity="0.6" />
    <circle cx="260" cy="55" r="0.7" opacity="0.7" />
  </g>
  
  <!-- Moon -->
  <g>
    <circle cx="240" cy="50" r="20" fill="white" opacity="0.9" />
    <circle cx="230" cy="45" r="5" fill="#0a1128" opacity="0.1" />
    <circle cx="250" cy="55" r="6" fill="#0a1128" opacity="0.1" />
    <circle cx="235" cy="60" r="4" fill="#0a1128" opacity="0.1" />
  </g>
  
  <!-- Desert background mountains -->
  <path d="M0,180 L50,150 L80,165 L120,140 L160,160 L200,130 L240,155 L300,140 L300,300 L0,300 Z" fill="#133a53" opacity="0.3" />
  
  <!-- Desert dunes -->
  <path d="M0,190 Q70,160 120,180 T220,160 T300,180 L300,300 L0,300 Z" fill="url(#sandGradient)" />
  
  <!-- Snow on dunes -->
  <path d="M0,190 Q70,160 120,180 T220,160 T300,180 L300,190 Q240,170 200,185 T120,175 T60,190 T0,175 Z" fill="white" opacity="0.8" />
  
  <!-- Distance cacti silhouettes -->
  <g opacity="0.6">
    <path d="M40,180 L35,160 L40,140 L45,160 L40,180" fill="#133a53" />
    <path d="M260,185 L255,165 L250,145 L245,165 L240,185" fill="#133a53" />
    <path d="M280,175 L275,155 L280,135 L285,155 L280,175" fill="#133a53" />
  </g>
  
  <!-- Rocks with snow -->
  <g>
    <path d="M50,230 Q55,220 65,225 Q75,215 85,220 Q95,225 95,230 Z" fill="#8c8c8c" />
    <path d="M50,230 Q55,220 65,225 Q75,215 85,220 Q95,225 95,230 L95,233 Q85,228 75,230 Q65,225 50,233 Z" fill="white" opacity="0.9" />
    
    <path d="M210,240 Q215,225 225,230 Q235,220 245,225 Q255,230 260,235 Z" fill="#8c8c8c" />
    <path d="M210,240 Q215,225 225,230 Q235,220 245,225 Q255,230 260,235 L260,238 Q245,233 235,235 Q220,232 210,242 Z" fill="white" opacity="0.9" />
  </g>
  
  <!-- Small cacti -->
  <g transform="translate(70, 210) scale(0.4)">
    <path d="M-12,0 C-15,-30 -18,-60 -12,-80 C-10,-95 -5,-120 -5,-120 L5,-120 C5,-120 10,-95 12,-80 C18,-60 15,-30 12,0 Z" fill="url(#cactusGradient)" />
    <rect x="-12" y="-120" width="24" height="120" fill="url(#cactusTexture)" opacity="0.3" />
    <path d="M-5,-120 Q0,-125 5,-120 L3,-116 Q0,-120 -3,-116 Z" fill="white" />
  </g>
  
  <g transform="translate(240, 220) scale(0.5)">
    <path d="M-12,0 C-15,-30 -18,-60 -12,-80 C-10,-95 -5,-120 -5,-120 L5,-120 C5,-120 10,-95 12,-80 C18,-60 15,-30 12,0 Z" fill="url(#cactusGradient)" />
    <path d="M-12,-70 C-25,-65 -30,-50 -35,-40 Z" fill="url(#cactusGradient)" />
    <rect x="-12" y="-120" width="24" height="120" fill="url(#cactusTexture)" opacity="0.3" />
    <path d="M-5,-120 Q0,-125 5,-120 L3,-116 Q0,-120 -3,-116 Z" fill="white" />
    <path d="M-35,-40 L-33,-38 L-30,-41 L-27,-39 L-25,-42 Z" fill="white" />
  </g>
  
  <!-- Main cactus -->
  <g transform="translate(150, 200)">
    <!-- Main body -->
    <path d="M-20,0 C-25,-40 -25,-80 -20,-120 C-18,-140 -15,-160 -15,-180 L15,-180 C15,-180 18,-140 20,-120 C25,-80 25,-40 20,0 Z" fill="url(#cactusGradient)" />
    
    <!-- Left arm -->
    <path d="M-20,-120 C-40,-115 -50,-100 -60,-90 C-65,-85 -60,-70 -55,-60 Z" fill="url(#cactusGradient)" />
    
    <!-- Right arm -->
    <path d="M20,-100 C40,-95 50,-80 60,-70 C65,-65 60,-50 55,-40 Z" fill="url(#cactusGradient)" />
    
    <!-- Cactus texture -->
    <rect x="-20" y="-180" width="40" height="180" fill="url(#cactusTexture)" opacity="0.3" />
    <rect x="-60" y="-120" width="40" height="60" transform="rotate(-30, -60, -90)" fill="url(#cactusTexture)" opacity="0.3" />
    <rect x="20" y="-100" width="40" height="60" transform="rotate(30, 60, -70)" fill="url(#cactusTexture)" opacity="0.3" />
    
    <!-- Shadow under cactus -->
    <ellipse cx="0" cy="5" rx="25" ry="7" fill="black" opacity="0.3" />
    
    <!-- Snow on cactus -->
    <path d="M-15,-180 Q0,-190 15,-180 L12,-174 Q0,-183 -12,-174 Z" fill="white" />
    <path d="M-60,-90 L-55,-87 L-50,-92 L-45,-89 L-40,-94 Z" fill="white" />
    <path d="M60,-70 L55,-67 L50,-72 L45,-69 L40,-74 Z" fill="white" />
    
    <!-- Bowtie -->
    <g transform="translate(0, -140)">
      <!-- Left triangle -->
      <path d="M-22,-10 C-20,-12 -18,-15 -5,-10 L-5,10 C-18,15 -20,12 -22,10 Z" fill="url(#bowtiePlaid)" stroke="#3c3b6e" stroke-width="1" />
      
      <!-- Right triangle -->
      <path d="M22,-10 C20,-12 18,-15 5,-10 L5,10 C18,15 20,12 22,10 Z" fill="url(#bowtiePlaid)" stroke="#3c3b6e" stroke-width="1" />
      
      <!-- Center knot -->
      <rect x="-5" y="-5" width="10" height="10" rx="2" ry="2" fill="white" stroke="#3c3b6e" stroke-width="1" />
      <line x1="-3" y1="-3" x2="3" y2="3" stroke="#3c3b6e" stroke-width="0.5" />
      <line x1="3" y1="-3" x2="-3" y2="3" stroke="#3c3b6e" stroke-width="0.5" />
    </g>
    
    <!-- Cactus face -->
    <g transform="translate(0, -155)">
      <!-- Eyes -->
      <ellipse cx="-8" cy="0" rx="4" ry="5" fill="white" />
      <ellipse cx="8" cy="0" rx="4" ry="5" fill="white" />
      <ellipse cx="-8" cy="0" rx="2" ry="3" fill="black" />
      <ellipse cx="8" cy="0" rx="2" ry="3" fill="black" />
      <circle cx="-9" cy="-1" r="1" fill="white" />
      <circle cx="7" cy="-1" r="1" fill="white" />
      
      <!-- Eyebrows with snow -->
      <path d="M-12,-7 Q-8,-10 -4,-7" stroke="#236b31" stroke-width="1.5" fill="none" />
      <path d="M12,-7 Q8,-10 4,-7" stroke="#236b31" stroke-width="1.5" fill="none" />
      <path d="M-12,-7 Q-8,-9 -4,-7 L-5,-6 Q-8,-8 -11,-6 Z" fill="white" opacity="0.8" />
      <path d="M12,-7 Q8,-9 4,-7 L5,-6 Q8,-8 11,-6 Z" fill="white" opacity="0.8" />
      
      <!-- Cheeks -->
      <circle cx="-12" cy="7" r="3" fill="#e07a7a" opacity="0.4" />
      <circle cx="12" cy="7" r="3" fill="#e07a7a" opacity="0.4" />
      
      <!-- Mouth -->
      <path d="M-6,12 Q0,18 6,12" stroke="black" stroke-width="1.5" fill="none" />
    </g>
  </g>
  
  <!-- Footprints in snow -->
  <g fill="#d1ae76" opacity="0.6">
    <ellipse cx="100" cy="200" rx="3" ry="5" transform="rotate(-30 100 200)" />
    <ellipse cx="110" cy="210" rx="3" ry="5" transform="rotate(-30 110 210)" />
    <ellipse cx="120" cy="220" rx="3" ry="5" transform="rotate(-30 120 220)" />
    <ellipse cx="130" cy="230" rx="3" ry="5" transform="rotate(-30 130 230)" />
    <ellipse cx="140" cy="240" rx="3" ry="5" transform="rotate(-30 140 240)" />
    <ellipse cx="150" cy="250" rx="3" ry="5" transform="rotate(-30 150 250)" />
    <ellipse cx="160" cy="260" rx="3" ry="5" transform="rotate(-30 160 260)" />
  </g>
  
  <!-- Falling snow -->
  <g fill="white">
    <circle cx="30" cy="100" r="1" opacity="0.8" />
    <circle cx="70" cy="150" r="0.8" opacity="0.7" />
    <circle cx="120" cy="80" r="1.2" opacity="0.9" />
    <circle cx="180" cy="120" r="1" opacity="0.8" />
    <circle cx="220" cy="70" r="0.9" opacity="0.7" />
    <circle cx="260" cy="140" r="1.1" opacity="0.9" />
    <circle cx="50" cy="160" r="0.7" opacity="0.6" />
    <circle cx="100" cy="40" r="1" opacity="0.8" />
    <circle cx="140" cy="180" r="0.8" opacity="0.7" />
    <circle cx="200" cy="60" r="1.2" opacity="0.9" />
    <circle cx="240" cy="130" r="0.9" opacity="0.7" />
    <circle cx="280" cy="90" r="1" opacity="0.8" />
    <circle cx="160" cy="110" r="0.8" opacity="0.7" />
    <circle cx="85" cy="130" r="1.1" opacity="0.9" />
    <circle cx="210" cy="170" r="0.7" opacity="0.6" />
    <circle cx="250" cy="115" r="1" opacity="0.8" />
    <circle cx="25" cy="140" r="0.8" opacity="0.7" />
    <circle cx="60" cy="95" r="1.2" opacity="0.9" />
    <circle cx="150" cy="135" r="0.9" opacity="0.7" />
    <circle cx="270" cy="110" r="1" opacity="0.8" />
    <circle cx="90" cy="170" r="0.8" opacity="0.7" />
    <circle cx="190" cy="150" r="1.1" opacity="0.9" />
    <circle cx="230" cy="95" r="0.7" opacity="0.6" />
    <circle cx="35" cy="180" r="1" opacity="0.8" />
    <circle cx="130" cy="155" r="0.8" opacity="0.7" />
    <circle cx="170" cy="90" r="1.2" opacity="0.9" />
  </g>
</svg>

GPT-4o

Judge & Evaluator

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

Judge's Analysis

Player 2's submission is more detailed and adheres closely to the prompt by combining the snowy desert setting with a cactus wearing a bowtie.

The addition of a face on the cactus adds personality, and the composition is visually engaging with clear background elements.

While Player 1's submission is charming, it feels simpler and less dynamic in comparison.

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

104

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

164

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.