Back

SVG Drawing Match #17

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Dancing octopus in a moonlit forest clearing"

GPT-4o mini (2024-07-18)
Player 1
ELO: 969.46 954.863 (-14.6)
SVG by GPT-4o mini (2024-07-18) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#f7e59b;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#d1c73d;stop-opacity:1" />
        </linearGradient>
        <radialGradient id="octopusGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:#ff6f61;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#cc3b38;stop-opacity:1" />
        </radialGradient>
        <pattern id="forestPattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="5" fill="#4caf50"/>
            <circle cx="30" cy="30" r="5" fill="#388e3c"/>
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="#001f3f" />
    <circle cx="240" cy="60" r="40" fill="url(#moonGradient)" />
    <rect x="0" y="0" width="300" height="300" fill="url(#forestPattern)" opacity="0.6"/>
    <g transform="translate(150, 200) rotate(-30)">
        <path d="M-25,0 C-50,-40 -50,40 -25,0" fill="url(#octopusGradient)" />
        <path d="M25,0 C50,-40 50,40 25,0" fill="url(#octopusGradient)" />
        <path d="M-30,0 C-40,30 -40,-30 -30,0" fill="url(#octopusGradient)" />
        <path d="M30,0 C40,30 40,-30 30,0" fill="url(#octopusGradient)" />
        <ellipse cx="-25" cy="-10" rx="10" ry="5" fill="#ffffff" />
        <ellipse cx="25" cy="-10" rx="10" ry="5" fill="#ffffff" />
        <circle cx="-20" cy="5" r="5" fill="#000000" />
        <circle cx="20" cy="5" r="5" fill="#000000" />
    </g>
    <text x="50%" y="15%" dominant-baseline="middle" text-anchor="middle" font-family="Fantasy" font-size="22" fill="#ffffff">Dancing Octopus</text>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,000 1,014.597 (+14.6)
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 -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0F1034"/>
      <stop offset="60%" stop-color="#263359"/>
      <stop offset="100%" stop-color="#304069"/>
    </linearGradient>
    
    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="70%" cy="30%" r="50%" fx="70%" fy="30%">
      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Moon surface -->
    <radialGradient id="moonSurface" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#FFFFFF"/>
      <stop offset="80%" stop-color="#F0F0F0"/>
      <stop offset="100%" stop-color="#E0E0E0"/>
    </radialGradient>
    
    <!-- Ground gradient -->
    <radialGradient id="groundGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#153A2D"/>
      <stop offset="80%" stop-color="#0A231A"/>
      <stop offset="100%" stop-color="#061810"/>
    </radialGradient>
    
    <!-- Octopus gradient -->
    <linearGradient id="octopusGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#9932CC"/>
      <stop offset="50%" stop-color="#8A2BE2"/>
      <stop offset="100%" stop-color="#9400D3"/>
    </linearGradient>
    
    <!-- Octopus highlight -->
    <radialGradient id="octopusHighlight" cx="30%" cy="30%" r="70%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#C77DFF" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#9400D3" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Tentacle pattern -->
    <pattern id="tentaclePattern" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="5" cy="5" r="1" fill="#D8BFD8"/>
    </pattern>
    
    <!-- Firefly filter -->
    <filter id="firefly" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
    </filter>
    
    <!-- Moonlight filter -->
    <filter id="moonlight" x="-10%" y="-10%" width="120%" height="120%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
    </filter>
    
    <!-- Mushroom gradient -->
    <linearGradient id="mushroomCapGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#E04040"/>
      <stop offset="100%" stop-color="#A02020"/>
    </linearGradient>
    
    <!-- Flower gradient -->
    <radialGradient id="flowerGradient" cx="50%" cy="50%" r="60%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#88CCFF"/>
      <stop offset="100%" stop-color="#5599DD"/>
    </radialGradient>
  </defs>
  
  <!-- Sky background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
  
  <!-- Stars -->
  <g id="stars">
    <circle cx="20" cy="30" r="0.8" fill="white" opacity="0.8"/>
    <circle cx="50" cy="15" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="80" cy="40" r="0.7" fill="white" opacity="0.9"/>
    <circle cx="120" cy="20" r="0.8" fill="white" opacity="0.8"/>
    <circle cx="150" cy="35" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="180" cy="15" r="0.9" fill="white" opacity="0.9"/>
    <circle cx="210" cy="40" r="0.7" fill="white" opacity="0.8"/>
    <circle cx="240" cy="25" r="0.8" fill="white" opacity="0.7"/>
    <circle cx="270" cy="45" r="0.6" fill="white" opacity="0.9"/>
    <circle cx="30" cy="60" r="0.7" fill="white" opacity="0.8"/>
    <circle cx="70" cy="80" r="0.8" fill="white" opacity="0.7"/>
    <circle cx="100" cy="50" r="0.6" fill="white" opacity="0.9"/>
    <circle cx="140" cy="70" r="0.7" fill="white" opacity="0.8"/>
    <circle cx="190" cy="55" r="0.8" fill="white" opacity="0.7"/>
    <circle cx="230" cy="75" r="0.6" fill="white" opacity="0.9"/>
    <circle cx="260" cy="65" r="0.7" fill="white" opacity="0.8"/>
    <circle cx="25" cy="40" r="0.5" fill="white" opacity="0.7"/>
    <circle cx="55" cy="25" r="0.4" fill="white" opacity="0.8"/>
    <circle cx="85" cy="50" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="125" cy="30" r="0.5" fill="white" opacity="0.9"/>
    <circle cx="155" cy="45" r="0.4" fill="white" opacity="0.8"/>
    <circle cx="185" cy="25" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="215" cy="50" r="0.5" fill="white" opacity="0.9"/>
    <circle cx="245" cy="35" r="0.4" fill="white" opacity="0.8"/>
    <circle cx="275" cy="55" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="35" cy="70" r="0.5" fill="white" opacity="0.9"/>
    <circle cx="75" cy="90" r="0.4" fill="white" opacity="0.8"/>
    <circle cx="105" cy="60" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="145" cy="80" r="0.5" fill="white" opacity="0.9"/>
    <circle cx="195" cy="65" r="0.4" fill="white" opacity="0.8"/>
    <circle cx="235" cy="85" r="0.6" fill="white" opacity="0.7"/>
    <circle cx="265" cy="75" r="0.5" fill="white" opacity="0.9"/>
    
    <!-- Larger stars -->
    <circle cx="40" cy="25" r="1.2" fill="white" opacity="0.9"/>
    <circle cx="170" cy="40" r="1.1" fill="white" opacity="0.9"/>
    <circle cx="280" cy="30" r="1.3" fill="white" opacity="0.9"/>
    <circle cx="100" cy="15" r="1.0" fill="white" opacity="0.9"/>
  </g>
  
  <!-- Moon with detailed surface -->
  <circle cx="230" cy="50" r="20" fill="url(#moonSurface)"/>
  <!-- Moon craters -->
  <circle cx="225" cy="45" r="3" fill="#E0E0E0" opacity="0.7"/>
  <circle cx="235" cy="55" r="2.5" fill="#E0E0E0" opacity="0.7"/>
  <circle cx="220" cy="50" r="2" fill="#E0E0E0" opacity="0.7"/>
  <!-- Moon glow -->
  <circle cx="230" cy="50" r="35" fill="url(#moonGlow)" filter="url(#moonlight)"/>
  
  <!-- Forest silhouettes -->
  <g id="forest">
    <!-- Left side trees -->
    <path d="M0,200 L0,120 L10,130 L15,120 L20,125 L25,115 L30,120 L40,110 L45,120 L50,115 L55,120 L60,110 L65,130 L75,120 L80,200 Z" fill="#0B2821"/>
    <path d="M70,200 L70,130 L80,140 L85,130 L90,135 L95,125 L100,130 L105,120 L110,130 L115,125 L120,200 Z" fill="#0A231A"/>
    
    <!-- Right side trees -->
    <path d="M220,200 L220,130 L230,140 L235,130 L240,135 L245,125 L250,130 L255,120 L260,130 L265,125 L270,130 L275,120 L280,135 L285,130 L290,140 L295,130 L300,200 Z" fill="#0B2821"/>
    <path d="M170,200 L170,140 L180,130 L185,140 L190,135 L195,145 L200,135 L205,140 L210,130 L215,145 L220,200 Z" fill="#0A231A"/>
    
    <!-- Additional detailed trees -->
    <path d="M10,200 L10,150 L15,145 L20,150 L25,145 L30,155 L35,145 L40,150 L45,145 L50,200 Z" fill="#072118" opacity="0.7"/>
    <path d="M250,200 L250,150 L255,145 L260,150 L265,145 L270,155 L275,145 L280,150 L285,145 L290,200 Z" fill="#072118" opacity="0.7"/>
    
    <!-- Pine trees with more detail -->
    <path d="M30,200 L30,160 L20,170 L30,155 L20,165 L30,150 L20,160 L30,145 L40,160 L30,145 L40,155 L30,140 L40,150 L30,135 L40,145 L30,130 L40,140 L35,200 Z" fill="#0A231A"/>
    <path d="M260,200 L260,160 L250,170 L260,155 L250,165 L260,150 L250,160 L260,145 L270,160 L260,145 L270,155 L260,140 L270,150 L260,135 L270,145 L260,130 L270,140 L265,200 Z" fill="#0A231A"/>
  </g>
  
  <!-- Clearing/Ground -->
  <ellipse cx="150" cy="220" rx="100" ry="30" fill="url(#groundGradient)"/>
  
  <!-- Moonlight on clearing -->
  <ellipse cx="150" cy="220" rx="80" ry="25" fill="white" opacity="0.15"/>
  
  <!-- Forest floor details - mushrooms and flowers -->
  <g id="forestFloor">
    <!-- Mushrooms -->
    <g transform="translate(100, 200) scale(0.8)">
      <path d="M0,0 L0,-10 C0,-15 10,-15 10,-10 L10,0 Z" fill="#E8D0B0"/>
      <ellipse cx="5" cy="-10" rx="7" ry="3" fill="url(#mushroomCapGradient)"/>
      <circle cx="7" cy="-11" r="0.8" fill="white" opacity="0.6"/>
      <circle cx="4" cy="-9" r="0.6" fill="white" opacity="0.6"/>
    </g>
    
    <g transform="translate(120, 210) scale(0.6)">
      <path d="M0,0 L0,-8 C0,-12 8,-12 8,-8 L8,0 Z" fill="#E8D0B0"/>
      <ellipse cx="4" cy="-8" rx="6" ry="2.5" fill="url(#mushroomCapGradient)"/>
      <circle cx="5.5" cy="-9" r="0.7" fill="white" opacity="0.6"/>
      <circle cx="3" cy="-7" r="0.5" fill="white" opacity="0.6"/>
    </g>
    
    <g transform="translate(185, 205) scale(0.7)">
      <path d="M0,0 L0,-9 C0,-13.5 9,-13.5 9,-9 L9,0 Z" fill="#E8D0B0"/>
      <ellipse cx="4.5" cy="-9" rx="6.5" ry="2.8" fill="url(#mushroomCapGradient)"/>
      <circle cx="6.5" cy="-10" r="0.7" fill="white" opacity="0.6"/>
      <circle cx="3.5" cy="-8" r="0.5" fill="white" opacity="0.6"/>
    </g>
    
    <!-- Glowing flowers -->
    <g transform="translate(170, 215) scale(0.7)">
      <path d="M0,0 L0,-12 C0,-12 -1,-13 0,-14 C1,-13 0,-12 0,-12 Z" fill="#2D6E42"/>
      <circle cx="0" cy="-15" r="3" fill="url(#flowerGradient)" opacity="0.9"/>
      <circle cx="0" cy="-15" r="1" fill="white" opacity="0.6"/>
    </g>
    
    <g transform="translate(130, 215) scale(0.6)">
      <path d="M0,0 L0,-10 C0,-10 -1,-11 0,-12 C1,-11 0,-10 0,-10 Z" fill="#2D6E42"/>
      <circle cx="0" cy="-12" r="2.5" fill="url(#flowerGradient)" opacity="0.9"/>
      <circle cx="0" cy="-12" r="0.8" fill="white" opacity="0.6"/>
    </g>
    
    <g transform="translate(190, 210) scale(0.5)">
      <path d="M0,0 L0,-9 C0,-9 -1,-10 0,-11 C1,-10 0,-9 0,-9 Z" fill="#2D6E42"/>
      <circle cx="0" cy="-11" r="2.2" fill="url(#flowerGradient)" opacity="0.9"/>
      <circle cx="0" cy="-11" r="0.7" fill="white" opacity="0.6"/>
    </g>
  </g>
  
  <!-- Dancing octopus -->
  <g id="octopus" transform="translate(150, 180)">
    <!-- Octopus body -->
    <ellipse cx="0" cy="0" rx="16" ry="21" fill="url(#octopusGradient)"/>
    <ellipse cx="-4" cy="-3" rx="12" ry="15" fill="url(#octopusHighlight)" opacity="0.5"/>
    
    <!-- Eyes -->
    <circle cx="-6" cy="-8" r="3.5" fill="white"/>
    <circle cx="6" cy="-8" r="3.5" fill="white"/>
    <circle cx="-6" cy="-8" r="2" fill="black"/>
    <circle cx="6" cy="-8" r="2" fill="black"/>
    <circle cx="-7" cy="-9" r="0.8" fill="white" opacity="0.8"/>
    <circle cx="5" cy="-9" r="0.8" fill="white" opacity="0.8"/>
    
    <!-- Happy mouth -->
    <path d="M-5,4 Q0,10 5,4" fill="none" stroke="#D8BFD8" stroke-width="1.5" stroke-linecap="round"/>
    
    <!-- Tentacles with dance-like movements -->
    <!-- Front left tentacle - raised up in dance -->
    <path d="M-12,10 C-25,0 -30,-15 -20,-30" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M-12,10 C-25,0 -30,-15 -20,-30" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Middle left tentacle - curved to side -->
    <path d="M-8,15 C-20,25 -40,20 -50,35" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M-8,15 C-20,25 -40,20 -50,35" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Back left tentacle - down and to the side -->
    <path d="M-3,18 C-10,35 -20,50 -30,65" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M-3,18 C-10,35 -20,50 -30,65" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Back left-center tentacle - down -->
    <path d="M-1,20 C-5,35 0,50 -10,70" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M-1,20 C-5,35 0,50 -10,70" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Back right-center tentacle - down -->
    <path d="M1,20 C5,35 0,50 10,70" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M1,20 C5,35 0,50 10,70" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Back right tentacle - down and to the side -->
    <path d="M3,18 C10,35 20,50 30,65" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M3,18 C10,35 20,50 30,65" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Middle right tentacle - curved to side -->
    <path d="M8,15 C20,25 40,20 50,35" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M8,15 C20,25 40,20 50,35" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
    
    <!-- Front right tentacle - raised up in dance -->
    <path d="M12,10 C25,0 30,-15 20,-30" fill="none" stroke="url(#octopusGradient)" stroke-width="5" stroke-linecap="round"/>
    <path d="M12,10 C25,0 30,-15 20,-30" fill="none" stroke="url(#tentaclePattern)" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round"/>
  </g>
  
  <!-- Fireflies/magical particles -->
  <g id="fireflies">
    <circle cx="100" cy="170" r="1.5" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="120" cy="190" r="1" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="180" cy="175" r="1.3" fill="#FFFF99" filter="url(#firefly)" opacity="0.9"/>
    <circle cx="160" cy="160" r="1.2" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="140" cy="195" r="1" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="200" cy="185" r="1.1" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="90" cy="180" r="1.4" fill="#FFFF99" filter="url(#firefly)" opacity="0.9"/>
    <circle cx="110" cy="160" r="1.2" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="170" cy="190" r="1" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="130" cy="175" r="1.3" fill="#FFFF99" filter="url(#firefly)" opacity="0.9"/>
    <circle cx="150" cy="165" r="1.1" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="190" cy="180" r="1.2" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="105" cy="160" r="0.8" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="125" cy="185" r="0.7" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="175" cy="165" r="0.9" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="155" cy="155" r="0.8" fill="#FFFF99" filter="url(#firefly)" opacity="0.9"/>
    <circle cx="145" cy="190" r="0.7" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="195" cy="175" r="0.9" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="115" cy="170" r="0.8" fill="#FFFF99" filter="url(#firefly)" opacity="0.9"/>
    <circle cx="135" cy="180" r="0.7" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    
    <!-- Larger, brighter fireflies -->
    <circle cx="80" cy="170" r="2" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="210" cy="180" r="1.8" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
    <circle cx="130" cy="160" r="1.9" fill="#FFFF99" filter="url(#firefly)" opacity="0.7"/>
    <circle cx="160" cy="190" r="2.1" fill="#FFFF99" filter="url(#firefly)" opacity="0.8"/>
  </g>
  
  <!-- Moonlight beams -->
  <g id="moonlight" opacity="0.15">
    <path d="M230,50 L150,180" stroke="white" stroke-width="2"/>
    <path d="M230,50 L170,190" stroke="white" stroke-width="1.5"/>
    <path d="M230,50 L130,185" stroke="white" stroke-width="1.7"/>
    <path d="M230,50 L100,170" stroke="white" stroke-width="1.2"/>
    <path d="M230,50 L190,170" stroke="white" stroke-width="1.3"/>
  </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 image more effectively captures the prompt with a detailed depiction of an octopus dancing in a moonlit forest clearing.

    The use of light and shadow, along with the inclusion of a forest backdrop and a visible moon, enhances the scene's ambiance.

    In contrast, Player 1's image lacks clear representation of both the octopus and the forest setting, reducing its adherence to the prompt and visual appeal.

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
13
Player 2
128
Rectangles

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

Player 1
2
Player 2
1
Circles

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

Player 1
5
Player 2
84
Ellipses

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

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

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

Player 1
1
Player 2
12

Visual Effects Metrics

Gradients

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

Player 1
2
Player 2
8
Patterns

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

Player 1
1
Player 2
1
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
—
Player 2
22

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
5
Player 2
24

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

Complexity Metrics

Path Commands

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

Player 1
8
Player 2
192
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
3
Player 2
11
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
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 #2672 May 09, 2025

"A spaceship shaped like a teapot soaring through a galaxy filled with glowing donuts."

P1
SVG by GPT-4o mini (2024-07-18)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4o mini (2024-07-18)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1031 Mar 13, 2025

"Surreal: A clock melting over a tree branch, with a sunset backdrop"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4o mini (2024-07-18)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4o mini (2024-07-18)
View
Match #647 Mar 13, 2025

"A giraffe on roller skates juggling flamingos"

P1
SVG by GPT-4o mini (2024-07-18)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4o mini (2024-07-18)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View