Back

SVG Drawing Match #2640

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"An octopus juggling glowing lanterns underwater."

o4-mini high (2025-04-16)
Player 1
ELO: 1,103.529 1,096.805 (-6.7)
SVG by o4-mini high (2025-04-16) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="waterGrad" gradientUnits="userSpaceOnUse" cx="150" cy="150" r="200">
      <stop offset="0%" stop-color="#005f9e"/>
      <stop offset="100%" stop-color="#001f3f"/>
    </radialGradient>
    <radialGradient id="bodyGrad" cx="50%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#d35cb4"/>
      <stop offset="100%" stop-color="#82226e"/>
    </radialGradient>
    <radialGradient id="lanternGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fffd82" stop-opacity="1"/>
      <stop offset="100%" stop-color="#ff9a00" stop-opacity="0"/>
    </radialGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <path id="armShape" d="M150,180 c20,20 30,-10 50,-50 c-10,-10 -40,20 -60,60"/>
  </defs>
  <rect width="300" height="300" fill="url(#waterGrad)"/>
  <g fill="lightcyan" opacity="0.3">
    <circle cx="50" cy="40" r="4"/>
    <circle cx="230" cy="30" r="6"/>
    <circle cx="80" cy="220" r="5"/>
    <circle cx="270" cy="190" r="6"/>
    <circle cx="30" cy="200" r="3"/>
    <circle cx="200" cy="260" r="4"/>
  </g>
  <g id="octopus">
    <use href="#armShape" fill="url(#bodyGrad)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(45,150,180)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(90,150,180)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(135,150,180)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(180,150,180)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(225,150,180)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(270,150,180)"/>
    <use href="#armShape" fill="url(#bodyGrad)" transform="rotate(315,150,180)"/>
    <ellipse cx="150" cy="140" rx="35" ry="28" fill="url(#bodyGrad)" stroke="#a6319e" stroke-width="2"/>
    <circle cx="135" cy="135" r="5" fill="#fff"/>
    <circle cx="135" cy="135" r="2" fill="#000"/>
    <circle cx="165" cy="135" r="5" fill="#fff"/>
    <circle cx="165" cy="135" r="2" fill="#000"/>
  </g>
  <g filter="url(#glow)">
    <circle cx="150" cy="70" r="10" fill="url(#lanternGrad)"/>
    <circle cx="206.6" cy="93.4" r="10" fill="url(#lanternGrad)"/>
    <circle cx="230" cy="150" r="10" fill="url(#lanternGrad)"/>
    <circle cx="206.6" cy="206.6" r="10" fill="url(#lanternGrad)"/>
    <circle cx="150" cy="230" r="10" fill="url(#lanternGrad)"/>
    <circle cx="93.4" cy="206.6" r="10" fill="url(#lanternGrad)"/>
    <circle cx="70" cy="150" r="10" fill="url(#lanternGrad)"/>
    <circle cx="93.4" cy="93.4" r="10" fill="url(#lanternGrad)"/>
  </g>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,333.567 1,340.291 (+6.7)
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>
    <!-- Underwater background gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a2472" />
      <stop offset="50%" stop-color="#0e6ba8" />
      <stop offset="100%" stop-color="#1a84c7" />
    </linearGradient>
    
    <!-- Glow effect for lanterns -->
    <radialGradient id="lanternGlow1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffff99" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#ffcc00" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#ff6600" stop-opacity="0.1" />
    </radialGradient>
    
    <radialGradient id="lanternGlow2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#99ffff" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#00ccff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#0066ff" stop-opacity="0.1" />
    </radialGradient>
    
    <radialGradient id="lanternGlow3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ff99ff" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#ff00ff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#cc00cc" stop-opacity="0.1" />
    </radialGradient>
    
    <radialGradient id="lanternGlow4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#99ff99" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#00ff00" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#006600" stop-opacity="0.1" />
    </radialGradient>
    
    <!-- Octopus body gradient -->
    <radialGradient id="octopusGradient" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
      <stop offset="0%" stop-color="#ff6666" />
      <stop offset="70%" stop-color="#cc0000" />
      <stop offset="100%" stop-color="#990000" />
    </radialGradient>
    
    <!-- Filter for the glowing effect -->
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Stronger glow for the lanterns -->
    <filter id="strongGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Bubble filter -->
    <filter id="bubbleFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 5 -2" />
    </filter>
    
    <!-- Water texture -->
    <pattern id="waterPattern" width="30" height="30" patternUnits="userSpaceOnUse">
      <path d="M0,15 Q7.5,10 15,15 Q22.5,20 30,15 M0,5 Q7.5,0 15,5 Q22.5,10 30,5 M0,25 Q7.5,20 15,25 Q22.5,30 30,25"
            stroke="#ffffff" stroke-width="0.5" fill="none" opacity="0.1" />
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#waterGradient)" />
  <rect x="0" y="0" width="300" height="300" fill="url(#waterPattern)" />
  
  <!-- Underwater light rays -->
  <g opacity="0.2">
    <path d="M30,0 L10,300" stroke="#ffffff" stroke-width="15" />
    <path d="M70,0 L90,300" stroke="#ffffff" stroke-width="10" />
    <path d="M150,0 L130,300" stroke="#ffffff" stroke-width="20" />
    <path d="M230,0 L260,300" stroke="#ffffff" stroke-width="12" />
    <path d="M280,0 L250,300" stroke="#ffffff" stroke-width="8" />
  </g>
  
  <!-- Sand at the bottom -->
  <path d="M0,280 C30,275 60,285 90,280 C120,275 150,290 180,285 C210,280 240,275 270,285 C300,290 300,300 300,300 L0,300 Z" 
        fill="#e6c088" opacity="0.6" />
  
  <!-- Seaweed and underwater plants -->
  <g>
    <!-- Seaweed left -->
    <path d="M20,300 C30,270 10,260 20,230 C30,200 10,190 20,160 C30,130 15,120 20,90" 
          fill="none" stroke="#0a5e2a" stroke-width="3" />
    <path d="M30,300 C40,280 25,250 40,220 C50,190 35,170 45,140" 
          fill="none" stroke="#0a7a35" stroke-width="2" />
          
    <!-- Seaweed right -->
    <path d="M270,300 C260,270 280,260 270,230 C260,200 280,190 270,160" 
          fill="none" stroke="#0a5e2a" stroke-width="3" />
    <path d="M280,300 C270,280 290,250 275,220 C265,190 285,170 275,140" 
          fill="none" stroke="#0a7a35" stroke-width="2" />
    
    <!-- Small seaweed middle -->
    <path d="M150,300 C155,280 145,270 150,260 C155,250 145,245 150,235" 
          fill="none" stroke="#0a7a35" stroke-width="2" />
    
    <!-- Coral elements -->
    <path d="M40,300 C40,285 50,280 50,270 C50,260 40,255 50,245 C60,235 45,230 60,220" 
          fill="none" stroke="#ff7f50" stroke-width="4" />
    <path d="M260,300 C260,285 250,280 250,270 C250,260 260,255 250,245 C240,235 255,230 240,220" 
          fill="none" stroke="#ff7f50" stroke-width="4" />
          
    <!-- Starfish -->
    <path d="M50,290 L55,275 L70,285 L60,270 L75,265 L55,265 L50,250 L45,265 L25,265 L40,270 L30,285 L45,275 Z"
          fill="#ff9966" stroke="#ff6633" stroke-width="1" />
          
    <!-- Small coral formations -->
    <circle cx="225" cy="290" r="5" fill="#ff7f50" />
    <circle cx="235" cy="285" r="6" fill="#ff7f50" />
    <circle cx="220" cy="280" r="4" fill="#ff7f50" />
  </g>
  
  <!-- Background bubbles -->
  <g filter="url(#bubbleFilter)">
    <circle cx="50" cy="70" r="3" fill="#ffffff" opacity="0.6" />
    <circle cx="60" cy="90" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="45" cy="110" r="4" fill="#ffffff" opacity="0.6" />
    <circle cx="240" cy="60" r="3" fill="#ffffff" opacity="0.6" />
    <circle cx="250" cy="80" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="235" cy="100" r="4" fill="#ffffff" opacity="0.6" />
    <circle cx="150" cy="50" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="160" cy="70" r="3" fill="#ffffff" opacity="0.6" />
    <circle cx="140" cy="90" r="1" fill="#ffffff" opacity="0.6" />
    <circle cx="100" cy="120" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="200" cy="110" r="3" fill="#ffffff" opacity="0.6" />
    <circle cx="75" cy="150" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="215" cy="140" r="1" fill="#ffffff" opacity="0.6" />
    <circle cx="95" cy="40" r="3" fill="#ffffff" opacity="0.6" />
    <circle cx="195" cy="60" r="2" fill="#ffffff" opacity="0.6" />
  </g>
  
  <!-- Small fishes -->
  <g>
    <path d="M40,50 L55,45 L55,55 Z" fill="#ffcc00" />
    <circle cx="52" cy="50" r="1" fill="#000000" />
    
    <path d="M260,40 L245,35 L245,45 Z" fill="#00ccff" />
    <circle cx="248" cy="40" r="1" fill="#000000" />
    
    <path d="M230,70 L245,65 L245,75 Z" fill="#ff66cc" />
    <circle cx="242" cy="70" r="1" fill="#000000" />
    
    <!-- School of tiny fish -->
    <g transform="translate(180,30) rotate(20)">
      <path d="M0,0 L5,-2 L5,2 Z" fill="#ffcc99" />
      <path d="M-5,3 L0,1 L0,5 Z" fill="#ffcc99" />
      <path d="M-3,-3 L2,-5 L2,-1 Z" fill="#ffcc99" />
      <path d="M-10,0 L-5,-2 L-5,2 Z" fill="#ffcc99" />
      <path d="M-8,5 L-3,3 L-3,7 Z" fill="#ffcc99" />
    </g>
  </g>
  
  <!-- Juggled lantern in the air (top) -->
  <g filter="url(#strongGlow)">
    <circle cx="150" cy="70" r="16" fill="url(#lanternGlow4)" />
    <rect x="145" y="54" width="10" height="2" fill="#555555" />
    <circle cx="150" cy="70" r="13" fill="none" stroke="#00ff00" stroke-width="1" />
    <path d="M145,65 L155,75 M145,75 L155,65" stroke="#00ff00" stroke-width="1" />
  </g>
  
  <!-- Octopus -->
  <g>
    <!-- Octopus body -->
    <ellipse cx="150" cy="150" rx="40" ry="45" fill="url(#octopusGradient)" />
    
    <!-- Octopus texture pattern -->
    <path d="M130,130 C135,125 140,135 145,130 C150,125 155,135 160,130 C165,125 170,135 175,130" 
          fill="none" stroke="#990000" stroke-width="1" opacity="0.5" />
    <path d="M130,140 C135,135 140,145 145,140 C150,135 155,145 160,140 C165,135 170,145 175,140" 
          fill="none" stroke="#990000" stroke-width="1" opacity="0.5" />
    <path d="M135,150 C140,145 145,155 150,150 C155,145 160,155 165,150" 
          fill="none" stroke="#990000" stroke-width="1" opacity="0.5" />
    <path d="M140,160 C145,155 150,165 155,160 C160,155 165,165 170,160" 
          fill="none" stroke="#990000" stroke-width="1" opacity="0.5" />
    
    <!-- Octopus eyes -->
    <circle cx="135" cy="135" r="10" fill="white" />
    <circle cx="165" cy="135" r="10" fill="white" />
    <circle cx="135" cy="135" r="5" fill="black" />
    <circle cx="165" cy="135" r="5" fill="black" />
    <circle cx="132" cy="132" r="2" fill="white" />
    <circle cx="162" cy="132" r="2" fill="white" />
    
    <!-- Octopus eyebrows - expressing concentration while juggling -->
    <path d="M125,125 C130,120 140,123 145,125" fill="none" stroke="#990000" stroke-width="2" />
    <path d="M155,125 C160,123 170,120 175,125" fill="none" stroke="#990000" stroke-width="2" />
    
    <!-- Octopus tentacles -->
    <!-- Tentacle 1 - holding lantern 1 -->
    <path d="M120,165 C100,180 70,175 60,195 C50,215 70,225 90,220" 
          fill="none" stroke="#cc0000" stroke-width="8" stroke-linecap="round" />
    
    <!-- Tentacle 2 - curved up -->
    <path d="M130,170 C120,200 80,210 70,240 C65,250 75,255 85,250" 
          fill="none" stroke="#dd0000" stroke-width="7" stroke-linecap="round" />
    
    <!-- Tentacle 3 - holding lantern 2 -->
    <path d="M140,180 C135,220 125,240 140,260 C150,270 160,260 165,250" 
          fill="none" stroke="#ee0000" stroke-width="7" stroke-linecap="round" />
    
    <!-- Tentacle 4 - curved right -->
    <path d="M150,185 C155,220 175,240 205,230 C215,225 215,215 210,210" 
          fill="none" stroke="#ff0000" stroke-width="8" stroke-linecap="round" />
    
    <!-- Tentacle 5 - holding lantern 3 -->
    <path d="M160,180 C180,200 210,195 220,215 C230,235 220,245 210,240" 
          fill="none" stroke="#ee0000" stroke-width="7" stroke-linecap="round" />
    
    <!-- Tentacle 6 - curved up right -->
    <path d="M170,170 C190,190 220,170 230,150 C240,130 230,120 220,125" 
          fill="none" stroke="#dd0000" stroke-width="8" stroke-linecap="round" />
    
    <!-- Tentacle 7 - reaching up for juggling -->
    <path d="M160,160 C170,130 160,100 150,80 C145,70 155,65 160,70" 
          fill="none" stroke="#cc0000" stroke-width="7" stroke-linecap="round" />
    
    <!-- Tentacle 8 - curved up left -->
    <path d="M140,160 C120,140 100,130 80,150 C70,160 75,170 85,170" 
          fill="none" stroke="#bb0000" stroke-width="8" stroke-linecap="round" />
    
    <!-- Tentacle suckers -->
    <circle cx="100" cy="175" r="2" fill="#ff9999" />
    <circle cx="90" cy="180" r="2" fill="#ff9999" />
    <circle cx="80" cy="185" r="2" fill="#ff9999" />
    <circle cx="70" cy="190" r="2" fill="#ff9999" />
    
    <circle cx="100" cy="205" r="2" fill="#ff9999" />
    <circle cx="90" cy="210" r="2" fill="#ff9999" />
    <circle cx="80" cy="220" r="2" fill="#ff9999" />
    
    <circle cx="135" cy="230" r="2" fill="#ff9999" />
    <circle cx="130" cy="240" r="2" fill="#ff9999" />
    <circle cx="135" cy="250" r="2" fill="#ff9999" />
    
    <circle cx="165" cy="220" r="2" fill="#ff9999" />
    <circle cx="175" cy="230" r="2" fill="#ff9999" />
    <circle cx="190" cy="230" r="2" fill="#ff9999" />
    
    <circle cx="190" cy="195" r="2" fill="#ff9999" />
    <circle cx="200" cy="200" r="2" fill="#ff9999" />
    <circle cx="210" cy="205" r="2" fill="#ff9999" />
    
    <circle cx="200" cy="160" r="2" fill="#ff9999" />
    <circle cx="210" cy="150" r="2" fill="#ff9999" />
    <circle cx="220" cy="140" r="2" fill="#ff9999" />
    
    <circle cx="165" cy="130" r="2" fill="#ff9999" />
    <circle cx="160" cy="120" r="2" fill="#ff9999" />
    <circle cx="155" cy="100" r="2" fill="#ff9999" />
    <circle cx="150" cy="90" r="2" fill="#ff9999" />
    
    <circle cx="110" cy="145" r="2" fill="#ff9999" />
    <circle cx="100" cy="140" r="2" fill="#ff9999" />
    <circle cx="90" cy="145" r="2" fill="#ff9999" />
    <circle cx="80" cy="150" r="2" fill="#ff9999" />
    
    <!-- Octopus mouth -->
    <path d="M140,155 C145,162 155,162 160,155" 
          fill="none" stroke="#660000" stroke-width="2" />
  </g>
  
  <!-- Lanterns being held by tentacles -->
  <!-- Lantern 1 - bottom left -->
  <g filter="url(#glow)">
    <circle cx="90" cy="220" r="15" fill="url(#lanternGlow1)" />
    <rect x="85" y="205" width="10" height="2" fill="#555555" />
    <circle cx="90" cy="220" r="12" fill="none" stroke="#ff9900" stroke-width="1" />
    <path d="M86,215 L94,225 M86,225 L94,215" stroke="#ff9900" stroke-width="1" />
  </g>
  
  <!-- Lantern 2 - bottom middle -->
  <g filter="url(#glow)">
    <circle cx="165" cy="250" r="15" fill="url(#lanternGlow2)" />
    <rect x="160" y="235" width="10" height="2" fill="#555555" />
    <circle cx="165" cy="250" r="12" fill="none" stroke="#00ccff" stroke-width="1" />
    <path d="M161,245 L169,255 M161,255 L169,245" stroke="#00ccff" stroke-width="1" />
  </g>
  
  <!-- Lantern 3 - bottom right -->
  <g filter="url(#glow)">
    <circle cx="210" cy="240" r="15" fill="url(#lanternGlow3)" />
    <rect x="205" y="225" width="10" height="2" fill="#555555" />
    <circle cx="210" cy="240" r="12" fill="none" stroke="#ff00ff" stroke-width="1" />
    <path d="M206,235 L214,245 M206,245 L214,235" stroke="#ff00ff" stroke-width="1" />
  </g>
  
  <!-- Lantern being thrown (in motion) -->
  <g filter="url(#glow)">
    <circle cx="110" cy="120" r="12" fill="url(#lanternGlow1)" opacity="0.8" />
    <rect x="107" y="108" width="6" height="1" fill="#555555" />
    <circle cx="110" cy="120" r="10" fill="none" stroke="#ff9900" stroke-width="1" />
    <path d="M107,117 L113,123 M107,123 L113,117" stroke="#ff9900" stroke-width="1" />
  </g>
  
  <!-- Motion trails for juggling -->
  <g opacity="0.3">
    <path d="M150,70 C140,85 130,100 120,110 C110,120 105,130 110,120" 
          stroke="#00ff00" stroke-width="2" fill="none" stroke-dasharray="2,2" />
    <path d="M120,110 C130,100 145,85 160,75 C170,70 180,65 190,70" 
          stroke="#ff00ff" stroke-width="2" fill="none" stroke-dasharray="2,2" />
    <path d="M190,70 C180,85 165,100 150,120" 
          stroke="#00ccff" stroke-width="2" fill="none" stroke-dasharray="2,2" />
  </g>
  
  <!-- Bubbles coming from octopus -->
  <g filter="url(#bubbleFilter)">
    <circle cx="125" cy="125" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="140" cy="115" r="3" fill="#ffffff" opacity="0.6" />
    <circle cx="155" cy="120" r="1" fill="#ffffff" opacity="0.6" />
    <circle cx="170" cy="110" r="2" fill="#ffffff" opacity="0.6" />
    <circle cx="185" cy="105" r="3" fill="#ffffff" opacity="0.6" />
    
    <!-- Bubble trail from juggling movement -->
    <circle cx="140" cy="130" r="1" fill="#ffffff" opacity="0.5" />
    <circle cx="150" cy="120" r="1.5" fill="#ffffff" opacity="0.5" />
    <circle cx="160" cy="110" r="2" fill="#ffffff" opacity="0.5" />
    <circle cx="170" cy="100" r="1" fill="#ffffff" opacity="0.5" />
    <circle cx="180" cy="110" r="1.5" fill="#ffffff" opacity="0.5" />
    <circle cx="190" cy="120" r="2" fill="#ffffff" opacity="0.5" />
    <circle cx="180" cy="130" r="1" fill="#ffffff" opacity="0.5" />
    
    <!-- Bubbles from mouth -->
    <circle cx="145" cy="152" r="1.5" fill="#ffffff" opacity="0.7" />
    <circle cx="148" cy="148" r="2" fill="#ffffff" opacity="0.7" />
    <circle cx="152" cy="145" r="1" fill="#ffffff" opacity="0.7" />
  </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 visually dynamic and creative, with a vibrant underwater scene including seaweed, stars, and glowing lanterns in motion.

    It adheres closely to the prompt and demonstrates strong technical quality and composition.

    Player 1's submission is simpler and less detailed, lacking the complexity and richness of the underwater environment depicted in Player 2's image.

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
21
Player 2
133
Rectangles

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

Player 1
1
Player 2
7
Circles

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

Player 1
18
Player 2
79
Ellipses

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

Player 1
1
Player 2
1
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
1
Player 2
46
Groups

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

Player 1
3
Player 2
13

Visual Effects Metrics

Gradients

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

Player 1
3
Player 2
6
Patterns

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

Player 1
—
Player 2
1
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
1
Player 2
42

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
10
Player 2
36

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
7
Player 2
1

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1
3
Player 2
167
Max Group Nesting

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

Player 1
—
Player 2
1
Defs Elements

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

Player 1
5
Player 2
10
Use Elements

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

Player 1
8
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 #2728 May 10, 2025

"An astronaut fishing for stars in a galaxy-filled lake."

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o4-mini high (2025-04-16)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o4-mini high (2025-04-16)
View
Match #2559 May 09, 2025

"A clock melting over a tree branch at sunset."

P1
SVG by o4-mini high (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini high (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2303 May 09, 2025

"A snail racing a cheetah on a futuristic neon-lit track."

P1
SVG by o4-mini high (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini high (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2302 May 09, 2025

"A snail racing a turtle under a disco ball."

P1
SVG by o4-mini high (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini high (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View