Back

SVG Drawing Match #2253

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"An octopus playing chess with a cat on a floating log."

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,344.348 1,349.376 (+5.0)
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>
    <!-- Water gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#68c3ed" />
      <stop offset="100%" stop-color="#1e518a" />
    </linearGradient>
    
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#87ceeb" />
      <stop offset="100%" stop-color="#e0f7ff" />
    </linearGradient>
    
    <!-- Log wood gradient -->
    <linearGradient id="woodGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#8b4513" />
      <stop offset="50%" stop-color="#a0522d" />
      <stop offset="100%" stop-color="#8b4513" />
    </linearGradient>
    
    <!-- Octopus gradient -->
    <radialGradient id="octopusGradient" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#ff6ec7" />
      <stop offset="100%" stop-color="#9a0a7d" />
    </radialGradient>
    
    <!-- Cat fur gradient -->
    <linearGradient id="catFurGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#f7a63b" />
      <stop offset="100%" stop-color="#e67e22" />
    </linearGradient>
    
    <!-- Chess board pattern -->
    <pattern id="chessPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#f0d9b5" />
      <rect x="10" y="0" width="10" height="10" fill="#b58863" />
      <rect x="0" y="10" width="10" height="10" fill="#b58863" />
      <rect x="10" y="10" width="10" height="10" fill="#f0d9b5" />
    </pattern>
    
    <!-- Water ripple filter -->
    <filter id="rippleFilter" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" seed="0" result="turbulence"/>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
    
    <!-- Bubble glow -->
    <filter id="bubbleGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)" />
  <rect x="0" y="200" width="300" height="100" fill="url(#waterGradient)" filter="url(#rippleFilter)" />
  
  <!-- Sun and clouds -->
  <circle cx="250" cy="50" r="15" fill="#ffeb3b" opacity="0.8">
    <animate attributeName="opacity" values="0.7;0.9;0.7" dur="8s" repeatCount="indefinite"/>
  </circle>
  
  <g opacity="0.7">
    <ellipse cx="70" cy="45" rx="35" ry="12" fill="white" />
    <ellipse cx="50" cy="40" rx="20" ry="15" fill="white" />
    <ellipse cx="90" cy="40" rx="25" ry="10" fill="white" />
  </g>
  
  <!-- Seaweed -->
  <path d="M20,300 Q25,280 20,260 Q15,250 20,240" fill="none" stroke="#2e7d32" stroke-width="2" opacity="0.7">
    <animate attributeName="d" values="M20,300 Q25,280 20,260 Q15,250 20,240;M20,300 Q30,285 25,265 Q20,255 25,245;M20,300 Q25,280 20,260 Q15,250 20,240" dur="10s" repeatCount="indefinite"/>
  </path>
  <path d="M280,300 Q275,280 280,260 Q285,250 280,240" fill="none" stroke="#2e7d32" stroke-width="2" opacity="0.7">
    <animate attributeName="d" values="M280,300 Q275,280 280,260 Q285,250 280,240;M280,300 Q270,285 275,265 Q280,255 275,245;M280,300 Q275,280 280,260 Q285,250 280,240" dur="12s" repeatCount="indefinite"/>
  </path>
  
  <!-- Water ripples -->
  <path d="M0,205 Q30,200 60,205 Q90,210 120,205 Q150,200 180,205 Q210,210 240,205 Q270,200 300,205" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.3" />
  <path d="M0,215 Q30,210 60,215 Q90,220 120,215 Q150,210 180,215 Q210,220 240,215 Q270,210 300,215" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.2" />
  
  <!-- Small fish -->
  <g>
    <path d="M250,250 L260,255 L260,245 Z" fill="#ff9800">
      <animate attributeName="transform" values="translate(0,0);translate(-20,5);translate(0,0)" dur="10s" repeatCount="indefinite"/>
    </path>
    <path d="M250,250 Q245,255 240,250 Q245,245 250,250" fill="#ff9800" opacity="0.8">
      <animate attributeName="transform" values="translate(0,0);translate(-20,5);translate(0,0)" dur="10s" repeatCount="indefinite"/>
    </path>
  </g>
  
  <g>
    <path d="M270,230 L280,235 L280,225 Z" fill="#4caf50">
      <animate attributeName="transform" values="translate(0,0);translate(-30,-10);translate(0,0)" dur="15s" repeatCount="indefinite"/>
    </path>
    <path d="M270,230 Q265,235 260,230 Q265,225 270,230" fill="#4caf50" opacity="0.8">
      <animate attributeName="transform" values="translate(0,0);translate(-30,-10);translate(0,0)" dur="15s" repeatCount="indefinite"/>
    </path>
  </g>
  
  <!-- Floating log -->
  <ellipse cx="150" cy="210" rx="120" ry="15" fill="#6b4226" />
  <path d="M70,210 Q150,190 230,210" fill="none" stroke="#5d3921" stroke-width="2" />
  <rect x="70" y="170" width="160" height="40" rx="20" ry="20" fill="url(#woodGradient)" />
  
  <!-- Log texture details -->
  <path d="M80,190 Q150,180 220,190" fill="none" stroke="#5d3921" stroke-width="1" opacity="0.6" />
  <path d="M90,200 Q150,195 210,200" fill="none" stroke="#5d3921" stroke-width="1" opacity="0.6" />
  <ellipse cx="100" cy="185" rx="5" ry="2" fill="#5d3921" opacity="0.7" />
  <ellipse cx="190" cy="175" rx="4" ry="2" fill="#5d3921" opacity="0.7" />
  
  <!-- Chess board -->
  <rect x="110" y="155" width="80" height="80" fill="url(#chessPattern)" stroke="#333" stroke-width="2" />
  
  <!-- Chess pieces (white) -->
  <g fill="#fff" stroke="#333" stroke-width="0.5">
    <!-- Pawns -->
    <g transform="translate(120,170)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    <g transform="translate(140,170)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    <g transform="translate(160,170)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    <g transform="translate(180,170)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    
    <!-- Knight -->
    <g transform="translate(120,190)">
      <path d="M-4,3 L4,3 L2,-1 L4,-3 L0,-5 L-2,-2 Z" />
    </g>
    
    <!-- Bishop -->
    <g transform="translate(140,190)">
      <circle r="3" />
      <path d="M0,-4 L0,-6 M-2,-3 L2,-3" />
    </g>
    
    <!-- Rook -->
    <g transform="translate(160,190)">
      <path d="M-3,3 L3,3 L3,0 L1,0 L1,-3 L-1,-3 L-1,0 L-3,0 Z" />
    </g>
    
    <!-- Queen -->
    <g transform="translate(180,190)">
      <circle r="3" />
      <path d="M0,-4 L0,-6 M-3,-2 L3,-2 M-3,1 L3,1" />
      <circle cx="0" cy="-5" r="1" />
    </g>
  </g>
  
  <!-- Chess pieces (black) -->
  <g fill="#333" stroke="#000" stroke-width="0.5">
    <!-- Pawns -->
    <g transform="translate(120,210)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    <g transform="translate(140,210)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    <g transform="translate(160,210)"><circle r="3" /><path d="M-1,-1 L1,-1 L0,-3 Z" /></g>
    
    <!-- Knight -->
    <g transform="translate(120,220)">
      <path d="M-4,3 L4,3 L2,-1 L4,-3 L0,-5 L-2,-2 Z" />
    </g>
    
    <!-- Bishop -->
    <g transform="translate(140,220)">
      <circle r="3" />
      <path d="M0,-4 L0,-6 M-2,-3 L2,-3" stroke="#000" />
    </g>
    
    <!-- King -->
    <g transform="translate(180,220)">
      <circle r="3" />
      <path d="M0,-4 L0,-7 M-2,-5 L2,-5" stroke="#000" />
      <circle cx="0" cy="-6" r="1" />
    </g>
  </g>
  
  <!-- Cat -->
  <g id="cat">
    <!-- Body -->
    <ellipse cx="200" cy="140" rx="25" ry="15" fill="url(#catFurGradient)" />
    
    <!-- Head -->
    <circle cx="230" cy="130" r="15" fill="url(#catFurGradient)" />
    
    <!-- Ears -->
    <path d="M220,120 L225,110 L230,120 Z" fill="url(#catFurGradient)" stroke="#e67e22" stroke-width="0.5" />
    <path d="M240,120 L235,110 L230,120 Z" fill="url(#catFurGradient)" stroke="#e67e22" stroke-width="0.5" />
    <path d="M223,119 L225,113 L228,119 Z" fill="#ffcca5" />
    <path d="M237,119 L235,113 L232,119 Z" fill="#ffcca5" />
    
    <!-- Face -->
    <circle cx="225" cy="130" r="2" fill="#000" />
    <circle cx="235" cy="130" r="2" fill="#000" />
    <circle cx="225" cy="129.5" r="0.5" fill="#fff" />
    <circle cx="235" cy="129.5" r="0.5" fill="#fff" />
    <path d="M230,133 L230,136 L232,136 Q231,138 228,136 L230,136 Z" fill="#000" />
    
    <!-- Whiskers -->
    <line x1="232" y1="135" x2="245" y2="133" stroke="#000" stroke-width="0.5" />
    <line x1="232" y1="136" x2="245" y2="136" stroke="#000" stroke-width="0.5" />
    <line x1="232" y1="137" x2="245" y2="139" stroke="#000" stroke-width="0.5" />
    <line x1="228" y1="135" x2="215" y2="133" stroke="#000" stroke-width="0.5" />
    <line x1="228" y1="136" x2="215" y2="136" stroke="#000" stroke-width="0.5" />
    <line x1="228" y1="137" x2="215" y2="139" stroke="#000" stroke-width="0.5" />
    
    <!-- Tail -->
    <path d="M175,140 Q170,120 180,110 Q190,105 185,115 Q195,110 190,130" fill="none" stroke="url(#catFurGradient)" stroke-width="5" stroke-linecap="round">
      <animate attributeName="d" values="M175,140 Q170,120 180,110 Q190,105 185,115 Q195,110 190,130;M175,140 Q170,115 180,105 Q190,100 185,110 Q195,105 190,130;M175,140 Q170,120 180,110 Q190,105 185,115 Q195,110 190,130" dur="8s" repeatCount="indefinite"/>
    </path>
    
    <!-- Paws -->
    <circle cx="190" cy="155" r="5" fill="url(#catFurGradient)" />
    <circle cx="210" cy="155" r="5" fill="url(#catFurGradient)" />
    <path d="M187,157 L189,159 L191,157" fill="none" stroke="#d35400" stroke-width="0.5" />
    <path d="M207,157 L209,159 L211,157" fill="none" stroke="#d35400" stroke-width="0.5" />
  </g>
  
  <!-- Octopus -->
  <g id="octopus">
    <!-- Head -->
    <ellipse cx="90" cy="250" rx="25" ry="30" fill="url(#octopusGradient)" />
    
    <!-- Eyes -->
    <circle cx="80" cy="240" r="7" fill="white" />
    <circle cx="100" cy="240" r="7" fill="white" />
    <circle cx="80" cy="240" r="3" fill="black" />
    <circle cx="100" cy="240" r="3" fill="black" />
    <circle cx="82" cy="238" r="1" fill="white" />
    <circle cx="102" cy="238" r="1" fill="white" />
    
    <!-- Expression -->
    <path d="M85,250 Q90,255 95,250" fill="none" stroke="#9a0a7d" stroke-width="1.5" />
    
    <!-- Tentacles -->
    <path d="M70,270 Q60,280 50,270 Q40,260 50,250 Q60,240 70,250" fill="none" stroke="url(#octopusGradient)" stroke-width="8" stroke-linecap="round">
      <animate attributeName="d" values="M70,270 Q60,280 50,270 Q40,260 50,250 Q60,240 70,250;M70,270 Q55,275 45,270 Q35,260 45,245 Q55,235 70,250;M70,270 Q60,280 50,270 Q40,260 50,250 Q60,240 70,250" dur="15s" repeatCount="indefinite"/>
    </path>
    
    <path d="M65,280 Q60,290 50,290 Q40,290 40,280 Q40,270 50,270" fill="none" stroke="url(#octopusGradient)" stroke-width="8" stroke-linecap="round">
      <animate attributeName="d" values="M65,280 Q60,290 50,290 Q40,290 40,280 Q40,270 50,270;M65,280 Q55,295 45,295 Q35,290 35,280 Q40,265 50,270;M65,280 Q60,290 50,290 Q40,290 40,280 Q40,270 50,270" dur="12s" repeatCount="indefinite"/>
    </path>
    
    <path d="M80,280 Q80,290 80,300 Q80,310 70,310 Q60,310 65,300" fill="none" stroke="url(#octopusGradient)" stroke-width="8" stroke-linecap="round">
      <animate attributeName="d" values="M80,280 Q80,290 80,300 Q80,310 70,310 Q60,310 65,300;M80,280 Q85,295 85,305 Q80,315 70,315 Q55,315 60,300;M80,280 Q80,290 80,300 Q80,310 70,310 Q60,310 65,300" dur="10s" repeatCount="indefinite"/>
    </path>
    
    <path d="M95,280 Q100,290 110,295 Q120,300 120,290 Q120,280 110,280" fill="none" stroke="url(#octopusGradient)" stroke-width="8" stroke-linecap="round">
      <animate attributeName="d" values="M95,280 Q100,290 110,295 Q120,300 120,290 Q120,280 110,280;M95,280 Q105,295 115,300 Q125,305 125,290 Q125,275 110,280;M95,280 Q100,290 110,295 Q120,300 120,290 Q120,280 110,280" dur="11s" repeatCount="indefinite"/>
    </path>
    
    <!-- Tentacles holding chess pieces -->
    <path d="M75,260 Q90,230 110,220 Q120,215 120,225" fill="none" stroke="url(#octopusGradient)" stroke-width="7" stroke-linecap="round">
      <animate attributeName="d" values="M75,260 Q90,230 110,220 Q120,215 120,225;M75,260 Q95,235 115,225 Q125,220 125,230;M75,260 Q90,230 110,220 Q120,215 120,225" dur="9s" repeatCount="indefinite"/>
    </path>
    
    <!-- Chess piece in tentacle -->
    <g>
      <circle cx="120" cy="225" r="3" fill="#333" />
      <path d="M119,224 L121,224 L120,221 Z" fill="#333" stroke="#000" stroke-width="0.5" />
      <animate attributeName="transform" values="translate(0,0);translate(5,5);translate(0,0)" dur="9s" repeatCount="indefinite"/>
    </g>
    
    <path d="M105,260 Q120,235 135,220 Q145,210 150,220" fill="none" stroke="url(#octopusGradient)" stroke-width="7" stroke-linecap="round">
      <animate attributeName="d" values="M105,260 Q120,235 135,220 Q145,210 150,220;M105,260 Q125,240 140,225 Q150,215 155,225;M105,260 Q120,235 135,220 Q145,210 150,220" dur="10s" repeatCount="indefinite"/>
    </path>
    
    <!-- Chess piece in tentacle -->
    <g>
      <circle cx="150" cy="220" r="3" fill="#333" />
      <path d="M150,216 L150,214 M148,217 L152,217" stroke="#000" stroke-width="0.5" />
      <animate attributeName="transform" values="translate(0,0);translate(5,5);translate(0,0)" dur="10s" repeatCount="indefinite"/>
    </g>
    
    <path d="M85,270 Q95,240 105,235 Q115,230 115,240" fill="none" stroke="url(#octopusGradient)" stroke-width="7" stroke-linecap="round">
      <animate attributeName="d" values="M85,270 Q95,240 105,235 Q115,230 115,240;M85,270 Q100,245 110,240 Q120,235 120,245;M85,270 Q95,240 105,235 Q115,230 115,240" dur="8s" repeatCount="indefinite"/>
    </path>
    
    <!-- Chess piece in tentacle -->
    <g>
      <path d="M112,243 L118,243 L118,240 L116,240 L116,237 L114,237 L114,240 L112,240 Z" fill="#333" stroke="#000" stroke-width="0.5" />
      <animate attributeName="transform" values="translate(0,0);translate(5,5);translate(0,0)" dur="8s" repeatCount="indefinite"/>
    </g>
    
    <!-- Suction cups -->
    <circle cx="65" cy="250" r="1.5" fill="#ff9ddb" />
    <circle cx="50" cy="260" r="1.5" fill="#ff9ddb" />
    <circle cx="45" cy="280" r="1.5" fill="#ff9ddb" />
    <circle cx="70" cy="300" r="1.5" fill="#ff9ddb" />
    <circle cx="115" cy="290" r="1.5" fill="#ff9ddb" />
    <circle cx="100" cy="230" r="1.5" fill="#ff9ddb" />
    <circle cx="130" cy="215" r="1.5" fill="#ff9ddb" />
    <circle cx="100" cy="245" r="1.5" fill="#ff9ddb" />
  </g>
  
  <!-- Bubbles -->
  <circle cx="50" cy="230" r="5" fill="rgba(255,255,255,0.5)" filter="url(#bubbleGlow)">
    <animate attributeName="cy" values="230;210;190" dur="15s" repeatCount="indefinite"/>
  </circle>
  <circle cx="70" cy="210" r="3" fill="rgba(255,255,255,0.5)" filter="url(#bubbleGlow)">
    <animate attributeName="cy" values="210;195;180" dur="10s" repeatCount="indefinite"/>
  </circle>
  <circle cx="40" cy="190" r="4" fill="rgba(255,255,255,0.5)" filter="url(#bubbleGlow)">
    <animate attributeName="cy" values="190;170;150" dur="20s" repeatCount="indefinite"/>
  </circle>
  <circle cx="30" cy="220" r="2" fill="rgba(255,255,255,0.5)" filter="url(#bubbleGlow)">
    <animate attributeName="cy" values="220;205;190" dur="12s" repeatCount="indefinite"/>
  </circle>
  <circle cx="60" cy="250" r="3" fill="rgba(255,255,255,0.5)" filter="url(#bubbleGlow)">
    <animate attributeName="cy" values="250;235;220" dur="18s" repeatCount="indefinite"/>
  </circle>
</svg>
GPT-4.1 (2025-04-14)
Player 2
ELO: 1,052.563 1,047.534 (-5.0)
SVG by GPT-4.1 (2025-04-14) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradient for water -->
    <linearGradient id="water" x1="0" y1="150" x2="0" y2="300" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#70d6ff"/>
      <stop offset="70%" stop-color="#3584b1"/>
      <stop offset="100%" stop-color="#143452"/>
    </linearGradient>
    <!-- Gradient for sky -->
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="160" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#f8fafc"/>
      <stop offset="50%" stop-color="#ffe6fb"/>
      <stop offset="100%" stop-color="#bfe6ff"/>
    </linearGradient>
    <!-- Tentacle gradient -->
    <radialGradient id="octoTentacle" cx="50%" cy="50%" r="65%">
      <stop offset="0%" stop-color="#ff6f91" />
      <stop offset="90%" stop-color="#e53a53" />
      <stop offset="100%" stop-color="#7e2351" />
    </radialGradient>
    <!-- Octopus body gradient -->
    <radialGradient id="octoBody" cx="60%" cy="40%" r="70%">
      <stop offset="0%" stop-color="#ffe3ee" />
      <stop offset="70%" stop-color="#ff80ab" />
      <stop offset="100%" stop-color="#ff4d6d" />
    </radialGradient>
    <!-- Cat fur gradient -->
    <radialGradient id="catBody" cx="65%" cy="45%" r="65%">
      <stop offset="0%" stop-color="#fffadd"/>
      <stop offset="75%" stop-color="#f5c16c"/>
      <stop offset="100%" stop-color="#de9101"/>
    </radialGradient>
    <!-- Log gradient -->
    <linearGradient id="logGr" x1="0" y1="210" x2="300" y2="250" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#9e6723" />
      <stop offset="50%" stop-color="#d6b087"/>
      <stop offset="100%" stop-color="#87520f" />
    </linearGradient>
    <!-- Light pattern for chessboard -->
    <pattern id="chessPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="20" height="20" fill="#efeae3"/>
      <rect x="0" y="0" width="10" height="10" fill="#463b39"/>
      <rect x="10" y="10" width="10" height="10" fill="#463b39"/>
    </pattern>
    <!-- Reflection Gradient -->
    <radialGradient id="reflection" cx="50%" cy="85%" r="90%">
      <stop offset="10%" stop-color="#ffffff80"/>
      <stop offset="100%" stop-color="#ffffff00"/>
    </radialGradient>
    <!-- Cat's stripes pattern -->
    <pattern id="catStripes" width="14" height="14" patternUnits="userSpaceOnUse">
      <rect width="14" height="14" fill="none"/>
      <rect x="0" y="0" width="8" height="3" fill="#c37918" />
      <rect x="4" y="7" width="8" height="3" fill="#c37918" />
    </pattern>
  </defs>
  <!-- Sky -->
  <rect x="0" y="0" width="300" height="160" fill="url(#sky)" />
  <!-- Sun rays -->
  <g opacity="0.11">
    <ellipse cx="230" cy="45" rx="44" ry="14" fill="#ffe79c"/>
    <ellipse cx="230" cy="52" rx="55" ry="19" fill="#fff4c7"/>
    <ellipse cx="230" cy="62" rx="69" ry="22" fill="#ffe79c"/>
  </g>
  <!-- Sun -->
  <circle cx="230" cy="54" r="22" fill="#fff4c2" />
  <circle cx="230" cy="54" r="16" fill="#fcf092" />
  <!-- Water -->
  <rect x="0" y="150" width="300" height="150" fill="url(#water)" />
  <!-- Water ripples around log -->
  <ellipse cx="150" cy="227" rx="112" ry="19" fill="#83cff8" opacity="0.5" />
  <ellipse cx="190" cy="237" rx="14" ry="4" fill="#2b4e7f" opacity="0.18"/>
  <ellipse cx="118" cy="249" rx="21" ry="6" fill="#b4e3ff" opacity="0.26"/>
  <ellipse cx="215" cy="262" rx="10" ry="3" fill="#bad8ff" opacity="0.17"/>
  <!-- Floating Log -->
  <g>
    <ellipse cx="150" cy="220" rx="100" ry="18" fill="url(#logGr)" opacity="0.92"/>
    <ellipse cx="60" cy="220" rx="14" ry="18" fill="#321d09" opacity="0.58"/>
    <ellipse cx="240" cy="220" rx="12" ry="16" fill="#3e2307" opacity="0.33"/>
    <!-- Log rings (left) -->
    <ellipse cx="49" cy="220" rx="8" ry="10" fill="#deb16a" opacity="0.72"/>
    <ellipse cx="53" cy="220" rx="4" ry="6" fill="#ba7922" opacity="0.4"/>
    <!-- Log cracks -->
    <path d="M80,212 Q81,216 100,220 M90,222 Q110,228 108,220 M170,224 Q172,230 210,222"
      stroke="#6e3d11" stroke-width="2" opacity="0.21" fill="none"/>
    <!-- Reflections -->
    <ellipse cx="124" cy="231" rx="28" ry="4" fill="url(#reflection)" opacity="0.6"/>
  </g>
  <!-- Chess Board -->
  <g>
    <rect x="110" y="187" width="80" height="80" rx="7" fill="url(#chessPattern)" stroke="#5e4230" stroke-width="2"/>
    <!-- Shadow beneath chessboard -->
    <ellipse cx="150" cy="273" rx="50" ry="9" fill="#143452" opacity="0.20"/>
    <!-- Chess pieces (minimalist metaphorical) -->
    <!-- Octopus side (pink) -->
    <ellipse cx="127" cy="213" rx="5" ry="8" fill="#fa5980" stroke="#92063d" stroke-width="1"/>
    <ellipse cx="138" cy="226" rx="3.5" ry="5.5" fill="#ffc7de" stroke="#92063d" stroke-width="0.7"/>
    <ellipse cx="121" cy="235" rx="4" ry="7" fill="#a71347" stroke="#581634" stroke-width="1"/>
    <ellipse cx="134" cy="245" rx="3.5" ry="5.5" fill="#fa5980" stroke="#92063d" stroke-width="0.7"/>
    <!-- Cat side (golden) -->
    <rect x="160" y="255" width="6" height="12" rx="1.5" fill="#ffd37b" stroke="#a87311" stroke-width="1"/>
    <ellipse cx="175" cy="245" rx="3.5" ry="5" fill="#fde68a" stroke="#a87311" stroke-width="0.7"/>
    <ellipse cx="185" cy="234" rx="2.8" ry="6" fill="#efb72e" stroke="#a87311" stroke-width="0.6"/>
    <ellipse cx="183" cy="216" rx="4" ry="7" fill="#ffd37b" stroke="#a87311" stroke-width="0.7"/>
    <ellipse cx="175" cy="208" rx="2.2" ry="4.8" fill="#fffbce" stroke="#a87311" stroke-width="0.4"/>
  </g>
  <!-- Octopus -->
  <g>
    <!-- Tentacles behind the log and chess board -->
    <path d="M132,209 Q110,228 112,248 Q113,266 135,255" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="0.74"/>
    <path d="M140,213 Q118,198 121,217 Q124,239 142,240" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="0.75"/>
    <path d="M132,206 Q98,197 92,230 Q90,252 130,262" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="0.7"/>
    <!-- Main body -->
    <ellipse cx="112" cy="189" rx="35" ry="28" fill="url(#octoBody)" stroke="#92063d" stroke-width="2"/>
    <!-- Head bulge and highlights -->
    <ellipse cx="120" cy="174" rx="16" ry="10" fill="#ffe0ef" opacity="0.6"/>
    <ellipse cx="102" cy="182" rx="6" ry="3.7" fill="#fff5fa" opacity="0.43"/>
    <!-- Tentacles foreground -->
    <path d="M88,187 Q66,163 95,159 Q110,164 105,187" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="1"/>
    <path d="M104,208 Q77,207 84,223 Q92,237 111,226" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="1"/>
    <path d="M126,200 Q120,179 137,171 Q160,165 143,194" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="1"/>
    <!-- Tentacle gripping a chess piece -->
    <path d="M97,218 Q86,230 113,243" fill="none" stroke="url(#octoTentacle)" stroke-width="11" opacity="0.87"/>
    <!-- Suction cups (white dots) -->
    <g>
      <ellipse cx="112" cy="225" rx="1.7" ry="1.1" fill="#fff"/>
      <ellipse cx="117" cy="231" rx="1.3" ry="0.8" fill="#fff" opacity="0.7"/>
      <ellipse cx="104" cy="222" rx="1.1" ry="0.8" fill="#fff"/>
      <ellipse cx="98" cy="210" rx="0.9" ry="0.6" fill="#fff" opacity="0.6"/>
      <ellipse cx="114" cy="246" rx="1.3" ry="0.6" fill="#fff" opacity="0.7"/>
      <ellipse cx="136" cy="250" rx="1.3" ry="0.6" fill="#fff" opacity="0.5"/>
    </g>
    <!-- Eyes -->
    <ellipse cx="98" cy="192" rx="4.9" ry="7" fill="#fff"/>
    <ellipse cx="126" cy="189" rx="5" ry="8" fill="#fff"/>
    <ellipse cx="98" cy="192" rx="1.9" ry="3.3" fill="#1b0b11"/>
    <ellipse cx="126" cy="189" rx="2" ry="3.5" fill="#1b0b11"/>
    <!-- Eyelids / character -->
    <path d="M93,186 Q96,183 99,188" stroke="#ff8cae" stroke-width="2" fill="none"/>
    <path d="M123,185 Q127,183 127,190" stroke="#ff8cae" stroke-width="2" fill="none"/>
    <!-- Smile -->
    <path d="M110,205 Q115,210 120,205" stroke="#af305c" stroke-width="2" fill="none"/>
    <!-- Blush -->
    <ellipse cx="91" cy="199" rx="2.6" ry="1.2" fill="#ffd1da" opacity="0.63"/>
    <ellipse cx="133" cy="198" rx="2.3" ry="1" fill="#ffd1da" opacity="0.53"/>
    <!-- Chess piece grasped -->
    <ellipse cx="114" cy="243" rx="3" ry="5" fill="#fde68a" stroke="#a87311" stroke-width="0.8"/>
  </g>
  <!-- Cat -->
  <g>
    <!-- Tail curled around log -->
    <path d="M192,250 C186,269 206,258 200,235" fill="none" stroke="url(#catBody)" stroke-width="6"/>
    <ellipse cx="199" cy="233" rx="5" ry="6" fill="url(#catBody)" opacity="0.9"/>
    <!-- Rear paws peek -->
    <ellipse cx="196" cy="246" rx="4.4" ry="2.2" fill="#fff5b6"/>
    <ellipse cx="193" cy="248" rx="4.2" ry="1.5" fill="#de9101" opacity="0.5"/>
    <!-- Body -->
    <ellipse cx="195" cy="206" rx="28" ry="22" fill="url(#catBody)" stroke="#b77a1c" stroke-width="2"/>
    <!-- Stripes -->
    <ellipse cx="206" cy="208" rx="13" ry="2" fill="url(#catStripes)" opacity="0.7"/>
    <ellipse cx="195" cy="200" rx="10" ry="1.5" fill="url(#catStripes)" opacity="0.5"/>
    <ellipse cx="190" cy="215" rx="7" ry="1.1" fill="url(#catStripes)" opacity="0.8"/>
    <!-- Head -->
    <ellipse cx="204" cy="186" rx="15" ry="13" fill="url(#catBody)" stroke="#b77a1c" stroke-width="2"/>
    <!-- Face stripes -->
    <path d="M195,184 Q193,179 199,183" stroke="#c37918" stroke-width="1.4" fill="none"/>
    <path d="M210,182 Q215,179 207,186" stroke="#c37918" stroke-width="1.4" fill="none"/>
    <!-- Ears -->
    <polygon points="216,175 224,162 210,168" fill="url(#catBody)" stroke="#b77a1c" stroke-width="1"/>
    <polygon points="192,172 188,158 202,168" fill="url(#catBody)" stroke="#b77a1c" stroke-width="1"/>
    <!-- Inner ears -->
    <polygon points="213,172 222,166 214,170" fill="#fdc2c9" opacity="0.64"/>
    <polygon points="194,170 189,161 196,169" fill="#fdc2c9" opacity="0.55"/>
    <!-- Eyes -->
    <ellipse cx="199" cy="187" rx="2" ry="4" fill="#fff"/>
    <ellipse cx="210" cy="188" rx="2" ry="4" fill="#fff"/>
    <ellipse cx="199" cy="188" rx="0.8" ry="1.6" fill="#3e3117"/>
    <ellipse cx="210" cy="188" rx="0.8" ry="1.6" fill="#3e3117"/>
    <!-- Whiskers -->
    <path d="M191,189 Q186,186 180,188" stroke="#fff" stroke-width="1"/>
    <path d="M193,192 Q172,191 189,196" stroke="#fff" stroke-width="1"/>
    <path d="M210,192 Q230,190 213,196" stroke="#fff" stroke-width="1"/>
    <path d="M208,189 Q222,186 215,191" stroke="#fff" stroke-width="1"/>
    <!-- Nose -->
    <ellipse cx="204" cy="192" rx="1.5" ry="1" fill="#b77a1c"/>
    <!-- Smile -->
    <path d="M202,195 Q204,197 206,195" stroke="#ab631e" stroke-width="1.4" fill="none"/>
    <!-- Front paws on chessboard -->
    <ellipse cx="187" cy="210" rx="4" ry="2.2" fill="#fff5b6" stroke="#de9101" stroke-width="0.6"/>
    <ellipse cx="206" cy="212" rx="4" ry="2.2" fill="#fff5b6" stroke="#de9101" stroke-width="0.6"/>
    <!-- Cat's gaze -->
    <ellipse cx="204" cy="193" rx="0.7" ry="1.7" fill="#2c1e08" opacity="0.23"/>
    <ellipse cx="204" cy="190" rx="1" ry="1.7" fill="#fde2a5" opacity="0.14"/>
  </g>
  <!-- Reflected highlights on water under log -->
  <ellipse cx="150" cy="240" rx="80" ry="7" fill="url(#reflection)" opacity="0.44"/>
  <!-- Whimsical tiny leaf on log -->
  <ellipse cx="64" cy="205" rx="5" ry="2.2" fill="#90e88c" stroke="#2f7a31" stroke-width="1"/>
  <path d="M64,205 Q66,206 68,203 Q65,201 64,205 Z" fill="#2f7a31"/>
  <!-- Floating bubbles around log -->
  <ellipse cx="62" cy="255" rx="5" ry="2" fill="#fff" opacity="0.16"/>
  <ellipse cx="34" cy="260" rx="2.2" ry="1.4" fill="#fff" opacity="0.11"/>
  <ellipse cx="275" cy="270" rx="3" ry="1.7" fill="#cbeeff" opacity="0.15"/>
</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 submission captures the prompt well with a clear depiction of an octopus and cat engaging in a chess game on a floating log.

    The composition is well-balanced, colorful, and visually appealing, with added elements such as fish and plants enhancing the scene.

    Player 2's submission, while creative, appears less polished and lacks the same level of clarity and compositional strength, making Player 1's image the stronger choice overall.

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
108
Player 2
96
Rectangles

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

Player 1
8
Player 2
10
Circles

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

Player 1
42
Player 2
2
Ellipses

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

Player 1
8
Player 2
60
Lines

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

Player 1
6
Player 2
—
Polygons

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

Player 1
—
Player 2
4
Paths

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

Player 1
44
Player 2
20
Groups

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

Player 1
24
Player 2
6

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
7
Patterns

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

Player 1
1
Player 2
2
Filters

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

Player 1
2
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
12
Player 2
41
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
34
Player 2
38

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
27
Player 2
62

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1
23
Player 2
—
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
14
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
183
Player 2
52
Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1
1
Player 2
1
Defs Elements

The number of elements defined within the defs element in the SVG.

Player 1
8
Player 2
9
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 #2637 May 09, 2025

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

P1
SVG by GPT-4.1 (2025-04-14)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4.1 (2025-04-14)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2557 May 09, 2025

"Robot juggling planets under a starry sky."

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4.1 (2025-04-14)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4.1 (2025-04-14)
View
Match #2451 May 09, 2025

"Penguin astronaut planting a flag on a floating iceberg in space."

P1
SVG by GPT-4.1 (2025-04-14)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4.1 (2025-04-14)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View