Back

SVG Drawing Match #773

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A cat riding a surfboard on a rainbow wave"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,282.221 1,284.975 (+2.8)
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 with tropical colors -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0D47A1" />
      <stop offset="40%" stop-color="#1976D2" />
      <stop offset="70%" stop-color="#29B6F6" />
      <stop offset="100%" stop-color="#81D4FA" />
    </linearGradient>
    
    <!-- Rainbow wave gradient -->
    <linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF1744" />
      <stop offset="14%" stop-color="#FF5252" />
      <stop offset="28%" stop-color="#FF9100" />
      <stop offset="42%" stop-color="#FFEA00" />
      <stop offset="56%" stop-color="#00E676" />
      <stop offset="70%" stop-color="#00B0FF" />
      <stop offset="84%" stop-color="#651FFF" />
      <stop offset="100%" stop-color="#D500F9" />
    </linearGradient>
    
    <!-- Rainbow wave shine gradient -->
    <linearGradient id="rainbowGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#D500F9" />
      <stop offset="16.6%" stop-color="#651FFF" />
      <stop offset="33.3%" stop-color="#00B0FF" />
      <stop offset="50%" stop-color="#00E676" />
      <stop offset="66.6%" stop-color="#FFEA00" />
      <stop offset="83.3%" stop-color="#FF9100" />
      <stop offset="100%" stop-color="#FF1744" />
    </linearGradient>
    
    <!-- Surfboard gradient -->
    <linearGradient id="surfboardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00BCD4" />
      <stop offset="25%" stop-color="#B2EBF2" />
      <stop offset="50%" stop-color="#E91E63" />
      <stop offset="75%" stop-color="#B2EBF2" />
      <stop offset="100%" stop-color="#00BCD4" />
    </linearGradient>
    
    <!-- Cat fur gradient -->
    <linearGradient id="catFurGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FF8A65" />
      <stop offset="50%" stop-color="#FF9800" />
      <stop offset="100%" stop-color="#FFB74D" />
    </linearGradient>
    
    <!-- Wave foam gradient -->
    <linearGradient id="foamGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="white" stop-opacity="0.9" />
      <stop offset="100%" stop-color="white" stop-opacity="0.1" />
    </linearGradient>
    
    <!-- Sun gradient -->
    <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#FFFFFF" />
      <stop offset="30%" stop-color="#FFFDE7" />
      <stop offset="70%" stop-color="#FFD600" />
      <stop offset="100%" stop-color="#FF9100" />
    </radialGradient>
    
    <!-- Sun glow -->
    <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FFD600" stop-opacity="0.8" />
      <stop offset="70%" stop-color="#FFD600" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#FFD600" stop-opacity="0" />
    </radialGradient>
    
    <!-- Palm tree gradient -->
    <linearGradient id="palmTrunkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#8D6E63" />
      <stop offset="50%" stop-color="#6D4C41" />
      <stop offset="100%" stop-color="#5D4037" />
    </linearGradient>
    
    <!-- Palm leaf gradient -->
    <linearGradient id="palmLeafGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#66BB6A" />
      <stop offset="100%" stop-color="#2E7D32" />
    </linearGradient>
    
    <!-- Water pattern -->
    <pattern id="waterPattern" patternUnits="userSpaceOnUse" width="30" height="20" patternTransform="rotate(10)">
      <path d="M0,10 Q7.5,0 15,10 Q22.5,20 30,10" fill="none" stroke="#FFFFFF" stroke-width="1" stroke-opacity="0.3" />
    </pattern>
    
    <!-- Sand texture -->
    <pattern id="sandPattern" patternUnits="userSpaceOnUse" width="50" height="50">
      <rect width="50" height="50" fill="#F5DEB3" />
      <circle cx="10" cy="10" r="1" fill="#D2B48C" />
      <circle cx="20" cy="30" r="0.8" fill="#D2B48C" />
      <circle cx="30" cy="15" r="1.2" fill="#D2B48C" />
      <circle cx="45" cy="40" r="1" fill="#D2B48C" />
      <circle cx="5" cy="45" r="0.7" fill="#D2B48C" />
      <circle cx="40" cy="5" r="0.9" fill="#D2B48C" />
    </pattern>
    
    <!-- Wave motion filter -->
    <filter id="waveMotion" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="1" seed="5" result="turbulence" />
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    
    <!-- Sparkle filter -->
    <filter id="sparkleFilter" x="-50%" y="-50%" width="200%" height="200%">
      <feTurbulence type="turbulence" baseFrequency="0.15" numOctaves="2" result="turbulence" seed="3" />
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="2" />
      <feComposite operator="in" in2="SourceGraphic" />
    </filter>
    
    <!-- Cat fur texture -->
    <filter id="furTexture" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="3" seed="5" result="noise" />
      <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" in="noise" result="coloredNoise" />
      <feComposite operator="in" in="coloredNoise" in2="SourceGraphic" />
      <feComposite operator="over" in="SourceGraphic" in2="coloredNoise" />
    </filter>
  </defs>
  
  <!-- Background Sky -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Far Sand Beach -->
  <path d="M0,260 C50,240 100,250 150,245 C200,240 250,260 300,250 L300,300 L0,300 Z" fill="url(#sandPattern)" />
  
  <!-- Water Background with Pattern -->
  <rect x="0" y="180" width="300" height="80" fill="#0277BD" opacity="0.7" />
  <rect x="0" y="180" width="300" height="80" fill="url(#waterPattern)" opacity="0.5" />
  
  <!-- Sun -->
  <circle cx="240" cy="50" r="25" fill="url(#sunGradient)" />
  <circle cx="240" cy="50" r="40" fill="url(#sunGlow)" />
  
  <!-- Sun Rays -->
  <g stroke="#FFD600" stroke-width="1.5" stroke-opacity="0.6">
    <line x1="240" y1="5" x2="240" y2="15" />
    <line x1="240" y1="85" x2="240" y2="95" />
    <line x1="195" y1="50" x2="205" y2="50" />
    <line x1="275" y1="50" x2="285" y2="50" />
    <line x1="208" y1="18" x2="218" y2="28" />
    <line x1="262" y1="72" x2="272" y2="82" />
    <line x1="208" y1="82" x2="218" y2="72" />
    <line x1="262" y1="28" x2="272" y2="18" />
  </g>
  
  <!-- Palm Tree Left -->
  <path d="M40,260 C35,230 45,210 50,180" stroke="url(#palmTrunkGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
  <path d="M50,180 C40,175 20,185 10,170" stroke="url(#palmLeafGradient)" stroke-width="5" fill="none" stroke-linecap="round" />
  <path d="M50,180 C45,170 35,150 45,140" stroke="url(#palmLeafGradient)" stroke-width="5" fill="none" stroke-linecap="round" />
  <path d="M50,180 C60,175 80,165 85,150" stroke="url(#palmLeafGradient)" stroke-width="5" fill="none" stroke-linecap="round" />
  <path d="M50,190 C40,185 20,200 5,190" stroke="url(#palmLeafGradient)" stroke-width="5" fill="none" stroke-linecap="round" />
  <path d="M50,190 C60,195 75,185 90,195" stroke="url(#palmLeafGradient)" stroke-width="5" fill="none" stroke-linecap="round" />
  
  <!-- Palm Tree Right -->
  <path d="M270,250 C275,220 265,200 260,170" stroke="url(#palmTrunkGradient)" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M260,170 C270,165 290,155 300,145" stroke="url(#palmLeafGradient)" stroke-width="4" fill="none" stroke-linecap="round" />
  <path d="M260,170 C265,160 275,140 265,130" stroke="url(#palmLeafGradient)" stroke-width="4" fill="none" stroke-linecap="round" />
  <path d="M260,170 C250,165 230,155 225,140" stroke="url(#palmLeafGradient)" stroke-width="4" fill="none" stroke-linecap="round" />
  <path d="M260,180 C270,175 290,190 295,175" stroke="url(#palmLeafGradient)" stroke-width="4" fill="none" stroke-linecap="round" />
  <path d="M260,180 C250,185 235,175 220,185" stroke="url(#palmLeafGradient)" stroke-width="4" fill="none" stroke-linecap="round" />
  
  <!-- Clouds -->
  <g fill="white" opacity="0.9">
    <ellipse cx="50" cy="40" rx="20" ry="10" />
    <ellipse cx="65" cy="38" rx="15" ry="12" />
    <ellipse cx="35" cy="37" rx="12" ry="8" />
    
    <ellipse cx="170" cy="60" rx="18" ry="9" opacity="0.7" />
    <ellipse cx="185" cy="57" rx="15" ry="11" opacity="0.7" />
    <ellipse cx="155" cy="56" rx="10" ry="7" opacity="0.7" />
  </g>
  
  <!-- Main Rainbow Wave -->
  <g filter="url(#waveMotion)">
    <path d="M-50,190 C20,130 70,200 140,150 C210,100 250,180 320,150 L320,300 L-50,300 Z" 
          fill="url(#rainbowGradient)" />
  </g>
  
  <!-- Wave Details -->
  <path d="M-50,190 C20,130 70,200 140,150 C210,100 250,180 320,150" 
        fill="none" stroke="url(#rainbowGradient2)" stroke-width="8" stroke-opacity="0.4" />
  
  <!-- Wave Foam/Crest -->
  <path d="M-40,187 C25,127 75,197 145,147 C215,97 255,177 310,147" 
        fill="none" stroke="url(#foamGradient)" stroke-width="7" />
  <path d="M-45,185 C22,125 72,195 142,145 C212,95 252,175 315,145" 
        fill="none" stroke="white" stroke-width="2" stroke-opacity="0.8" stroke-dasharray="4,2" />
  
  <!-- Foam Splashes -->
  <g fill="white" filter="url(#sparkleFilter)">
    <circle cx="130" cy="150" r="3" opacity="0.8" />
    <circle cx="140" cy="145" r="2" opacity="0.9" />
    <circle cx="135" cy="155" r="4" opacity="0.7" />
    <circle cx="145" cy="140" r="2.5" opacity="0.8" />
    <circle cx="125" cy="145" r="3" opacity="0.9" />
    <circle cx="150" cy="150" r="2" opacity="0.7" />
    <circle cx="155" cy="155" r="1.5" opacity="0.8" />
    <circle cx="120" cy="160" r="3.5" opacity="0.6" />
    <circle cx="160" cy="145" r="2" opacity="0.9" />
    <circle cx="165" cy="155" r="3" opacity="0.7" />
  </g>
  
  <!-- Surfboard -->
  <ellipse cx="140" cy="150" rx="30" ry="7" fill="url(#surfboardGradient)" 
           transform="rotate(-5, 140, 150)" stroke="#333" stroke-width="0.8" />
  
  <!-- Surfboard Details -->
  <path d="M115,150 L165,150" fill="none" stroke="#333" stroke-width="0.7" transform="rotate(-5, 140, 150)" />
  <path d="M118,147 L162,147" fill="none" stroke="#333" stroke-width="0.5" transform="rotate(-5, 140, 150)" />
  <path d="M120,144 L160,144" fill="none" stroke="#333" stroke-width="0.5" transform="rotate(-5, 140, 150)" />
  
  <!-- Star/Flower Decoration on Surfboard -->
  <path d="M140,150 L143,144 L146,150 L152,147 L147,153 L152,158 L146,155 L143,161 L140,155 L134,158 L138,153 L134,147 L140,150" 
        fill="#FF4081" transform="rotate(-5, 140, 150) scale(0.8)" />
  
  <!-- Cat Body - with texture-->
  <g filter="url(#furTexture)">
    <ellipse cx="140" cy="125" rx="22" ry="18" fill="url(#catFurGradient)" />
    
    <!-- Cat Tail - More Dynamic -->
    <path d="M120,128 C110,118 105,135 95,115" stroke="url(#catFurGradient)" stroke-width="8" 
          fill="none" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M95,115 C90,105 85,110 80,105" stroke="url(#catFurGradient)" stroke-width="6" 
          fill="none" stroke-linecap="round" stroke-linejoin="round" />
    
    <!-- Cat Front Legs -->
    <path d="M130,140 C127,148 125,155 130,155" fill="none" stroke="url(#catFurGradient)" 
          stroke-width="6" stroke-linecap="round" />
    
    <!-- Cat Head - Slightly turned for action -->
    <circle cx="160" cy="120" r="15" fill="url(#catFurGradient)" />
    
    <!-- Cat Ears -->
    <polygon points="155,110 149,95 160,105" fill="url(#catFurGradient)" />
    <polygon points="167,110 173,95 160,105" fill="url(#catFurGradient)" />
    <polygon points="155,110 151,100 160,107" fill="#FFC0CB" fill-opacity="0.8" />
    <polygon points="167,110 171,100 160,107" fill="#FFC0CB" fill-opacity="0.8" />
    
    <!-- Cat Back Legs -->
    <path d="M150,140 C153,148 155,155 150,155" fill="none" stroke="url(#catFurGradient)" 
          stroke-width="6" stroke-linecap="round" />
  </g>
  
  <!-- Cat Face - Excited Expression -->
  <ellipse cx="155" cy="118" rx="2.5" ry="3" fill="#000" transform="rotate(-10, 155, 118)" />
  <ellipse cx="165" cy="118" rx="2.5" ry="3" fill="#000" transform="rotate(10, 165, 118)" />
  <circle cx="156" cy="119" r="0.8" fill="white" /> <!-- Eye highlights -->
  <circle cx="166" cy="119" r="0.8" fill="white" /> <!-- Eye highlights -->
  <path d="M155,117 Q157,114 159,117" fill="none" stroke="#000" stroke-width="0.8" /> <!-- Eyebrows -->
  <path d="M165,117 Q167,114 169,117" fill="none" stroke="#000" stroke-width="0.8" /> <!-- Eyebrows -->
  <polygon points="160,123 157,127 163,127" fill="#FF4081" />
  <path d="M154,130 Q160,135 166,130" fill="none" stroke="#000" stroke-width="1.2" /> <!-- Smiling mouth -->
  
  <!-- Cat Whiskers -->
  <line x1="154" y1="126" x2="140" y2="122" stroke="white" stroke-width="0.8" />
  <line x1="154" y1="127" x2="141" y2="127" stroke="white" stroke-width="0.8" />
  <line x1="154" y1="128" x2="142" y2="132" stroke="white" stroke-width="0.8" />
  <line x1="166" y1="126" x2="180" y2="122" stroke="white" stroke-width="0.8" />
  <line x1="166" y1="127" x2="179" y2="127" stroke="white" stroke-width="0.8" />
  <line x1="166" y1="128" x2="178" y2="132" stroke="white" stroke-width="0.8" />
  
  <!-- Cat Paws -->
  <ellipse cx="130" cy="155" rx="4" ry="3" fill="#FFC0CB" />
  <ellipse cx="150" cy="155" rx="4" ry="3" fill="#FFC0CB" />
  
  <!-- Cat Spots/Stripes -->
  <ellipse cx="135" cy="120" rx="5" ry="4" fill="#FF7043" fill-opacity="0.5" />
  <ellipse cx="145" cy="132" rx="4" ry="3" fill="#FF7043" fill-opacity="0.5" />
  <path d="M120,125 C125,130 130,125 135,130" stroke="#F57C00" stroke-width="2" fill="none" stroke-opacity="0.4" />
  
  <!-- Surfing Action Elements -->
  <g filter="url(#sparkleFilter)">
    <!-- Motion Streaks Behind Surfboard -->
    <path d="M110,150 Q90,155 70,160" fill="none" stroke="white" stroke-width="3" stroke-opacity="0.7" stroke-linecap="round" />
    <path d="M105,158 Q85,163 65,168" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.6" stroke-linecap="round" />
    <path d="M100,166 Q80,171 60,176" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.5" stroke-linecap="round" />
  </g>
  
  <!-- Water Motion Lines -->
  <path d="M180,150 Q195,145 205,150" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.7" stroke-linecap="round" />
  <path d="M175,160 Q190,155 200,160" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.6" stroke-linecap="round" />
  <path d="M170,170 Q185,165 195,170" fill="none" stroke="white" stroke-width="1" stroke-opacity="0.5" stroke-linecap="round" />
  
  <!-- Ocean Life -->
  <path d="M200,210 Q210,190 220,210" fill="#29B6F6" stroke="#0288D1" stroke-width="1" />
  <path d="M220,210 L227,205" fill="none" stroke="#0288D1" stroke-width="1" stroke-linecap="round" />
  <circle cx="205" cy="200" r="1" fill="#0288D1" />
  
  <path d="M70,240 Q85,230 95,245" fill="#26A69A" stroke="#00695C" stroke-width="1.2" />
  <path d="M95,245 L102,243" fill="none" stroke="#00695C" stroke-width="1" stroke-linecap="round" />
  <circle cx="75" cy="235" r="1" fill="#00695C" />
  
  <!-- Tropical Fish Group -->
  <g transform="translate(180, 220) scale(0.6) rotate(-20)">
    <path d="M0,0 L10,5 L0,10 L5,5 Z" fill="#FFEB3B" stroke="#FFA000" stroke-width="1" />
    <circle cx="3" cy="5" r="1" fill="#FFA000" />
  </g>
  <g transform="translate(190, 210) scale(0.5) rotate(10)">
    <path d="M0,0 L10,5 L0,10 L5,5 Z" fill="#FF4081" stroke="#C2185B" stroke-width="1" />
    <circle cx="3" cy="5" r="1" fill="#C2185B" />
  </g>
  <g transform="translate(195, 225) scale(0.7) rotate(-5)">
    <path d="M0,0 L10,5 L0,10 L5,5 Z" fill="#4FC3F7" stroke="#0277BD" stroke-width="1" />
    <circle cx="3" cy="5" r="1" fill="#0277BD" />
  </g>
  
  <!-- Birds in Sky -->
  <path d="M40,80 Q50,70 60,80 Q70,70 80,80" fill="none" stroke="#333" stroke-width="1.2" />
  <path d="M100,50 Q110,40 120,50 Q130,40 140,50" fill="none" stroke="#333" stroke-width="1" />
  <path d="M20,120 Q30,110 40,120 Q50,110 60,120" fill="none" stroke="#333" stroke-width="0.8" />
  
  <!-- Beach Ball on Sand -->
  <circle cx="265" cy="270" r="10" fill="white" stroke="#333" stroke-width="0.5" />
  <path d="M255,270 Q265,260 275,270" fill="#FF5252" />
  <path d="M255,270 Q265,280 275,270" fill="#FFD740" />
  <path d="M265,260 Q265,270 265,280" fill="#2196F3" />
  
  <!-- Starfish on Sand -->
  <path d="M215,275 L220,260 L225,275 L240,270 L225,280 L230,295 L215,285 L200,295 L205,280 L190,270 L205,275 Z" 
        fill="#FF6D00" stroke="#E65100" stroke-width="0.5" />
  
  <!-- Sparkles and Highlights -->
  <g fill="white" filter="url(#sparkleFilter)">
    <!-- In water -->
    <circle cx="140" cy="110" r="1.2" />
    <circle cx="155" cy="105" r="0.8" />
    <circle cx="165" cy="108" r="1" />
    <circle cx="150" cy="100" r="0.7" />
    <circle cx="130" cy="135" r="1.5" />
    <circle cx="120" cy="120" r="0.9" />
    <circle cx="125" cy="115" r="1.3" />
    <circle cx="115" cy="145" r="1.1" />
    <circle cx="170" cy="130" r="1" />
    <circle cx="180" cy="140" r="1.2" />
    <circle cx="190" cy="135" r="0.8" />
    
    <!-- In sky -->
    <circle cx="50" cy="30" r="0.8" />
    <circle cx="100" cy="25" r="1" />
    <circle cx="150" cy="35" r="0.7" />
    <circle cx="200" cy="20" r="0.9" />
    <circle cx="180" cy="45" r="0.6" />
    <circle cx="220" cy="10" r="1.1" />
  </g>
  
  <!-- Cool Cat Sunglasses -->
  <path d="M152,117 Q155,115 158,117" fill="none" stroke="#333" stroke-width="0.6" /> <!-- Bridge -->
  <path d="M152,118 C150,116 150,120 152,119" fill="#333" stroke="#333" stroke-width="0.5" /> <!-- Left frame -->
  <path d="M158,117 C160,116 160,120 158,119" fill="#333" stroke="#333" stroke-width="0.5" /> <!-- Right frame -->
  
  <!-- Coconut on Beach -->
  <circle cx="55" cy="265" r="5" fill="#5D4037" stroke="#3E2723" stroke-width="0.5" />
  <circle cx="50" cy="268" r="5" fill="#5D4037" stroke="#3E2723" stroke-width="0.5" />
</svg>
Qwen-2.5-32B
Player 2
ELO: 871.772 869.018 (-2.8)
SVG by Qwen-2.5-32B 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="waveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ff69b4;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#33ccff;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="surfboardGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ffcc00;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ff69b4;stop-opacity:1" />
    </linearGradient>
    <radialGradient id="catGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#ff69b4;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#33ccff;stop-opacity:1" />
    </radialGradient>
  </defs>
  <path d="M 50 250 C 100 150, 200 150, 250 250" fill="url(#waveGradient)" />
  <rect x="120" y="190" width="60" height="20" rx="10" fill="url(#surfboardGradient)" />
  <circle cx="150" cy="200" r="15" fill="url(#catGradient)" />
  <circle cx="160" cy="190" r="5" fill="white" />
  <circle cx="163" cy="193" r="2" fill="black" />
  <circle cx="170" cy="190" r="5" fill="white" />
  <circle cx="173" cy="193" r="2" fill="black" />
  <path d="M 155 205 Q 160 215 165 205" stroke="black" stroke-width="2" fill="none" />
  <path d="M 155 210 Q 150 220 145 210" stroke="black" stroke-width="2" fill="none" />
  <line x1="150" y1="215" x2="150" y2="225" stroke="black" stroke-width="2" />
  <polyline points="120,190 110,180 100,190" stroke="black" stroke-width="2" fill="none" />
  <polyline points="180,190 190,180 200,190" stroke="black" stroke-width="2" fill="none" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 1

Judge's Analysis

    Player 1's image captures the prompt more effectively by depicting a cat clearly riding a wave with a rainbow gradient.

    The inclusion of additional elements like the sun and birds enhances the overall visual appeal and creativity.

    Player 2's image is more abstract, lacking clarity in representing a cat or a surfboard, which makes it less successful in adhering to 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
136
Player 2
12
Rectangles

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

Player 1
4
Player 2
1
Circles

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

Player 1
46
Player 2
5
Ellipses

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

Player 1
14
Player 2
—
Lines

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

Player 1
14
Player 2
1
Polygons

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

Player 1
5
Player 2
—
Paths

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

Player 1
53
Player 2
3
Groups

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

Player 1
10
Player 2
—

Visual Effects Metrics

Gradients

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

Player 1
10
Player 2
3
Patterns

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

Player 1
2
Player 2
—
Filters

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

Player 1
3
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
16
Player 2
—
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
58
Player 2
5

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
47
Player 2
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
10
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
151
Player 2
6
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
15
Player 2
3
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.

Similar Challenges

Match #1284 Mar 13, 2025

"Floating city above a surreal ocean of clouds"

P1
SVG by Qwen-2.5-32B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Qwen-2.5-32B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1001 Mar 13, 2025

"A snail with a city skyline shell, in geometric style"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Qwen-2.5-32B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Qwen-2.5-32B
View
Match #900 Mar 13, 2025

"A clockwork octopus juggling planets in a starry void"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Qwen-2.5-32B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Qwen-2.5-32B
View
Match #742 Mar 13, 2025

"Rainbow jellyfish in a cyberpunk cityscape"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Qwen-2.5-32B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Qwen-2.5-32B
View
Match #718 Mar 13, 2025

"Surreal clock melting over a giant lily pad under a purple sky"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Qwen-2.5-32B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Qwen-2.5-32B
View
Match #213 Mar 13, 2025

"Moonlit owl wearing a crown of stars"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Qwen-2.5-32B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Qwen-2.5-32B
View