Back

SVG Drawing Match #2709

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"An octopus juggling flaming swords underwater."

o4-mini medium (2025-04-16)
Player 1
ELO: 1,055.052 1,048.207 (-6.8)
SVG by o4-mini medium (2025-04-16) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="bgGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#4facfe"/>
      <stop offset="100%" stop-color="#00f2fe"/>
    </radialGradient>
    <radialGradient id="octoGrad" cx="50%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#ff6ec4"/>
      <stop offset="100%" stop-color="#7873f5"/>
    </radialGradient>
    <linearGradient id="bladeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="50%" stop-color="#cccccc"/>
      <stop offset="100%" stop-color="#999999"/>
    </linearGradient>
    <radialGradient id="flameGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffeb3b"/>
      <stop offset="30%" stop-color="#ff9800"/>
      <stop offset="60%" stop-color="#f44336"/>
      <stop offset="100%" stop-color="transparent"/>
    </radialGradient>
    <radialGradient id="bubbleGrad" cx="30%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="300" height="300" fill="url(#bgGrad)"/>
  <g opacity="0.5">
    <circle cx="40" cy="60" r="10" fill="url(#bubbleGrad)"/>
    <circle cx="260" cy="80" r="6" fill="url(#bubbleGrad)"/>
    <circle cx="200" cy="40" r="8" fill="url(#bubbleGrad)"/>
    <circle cx="120" cy="20" r="5" fill="url(#bubbleGrad)"/>
    <circle cx="160" cy="120" r="12" fill="url(#bubbleGrad)"/>
    <circle cx="80" cy="200" r="7" fill="url(#bubbleGrad)"/>
  </g>
  <g id="octopus">
    <ellipse cx="150" cy="130" rx="50" ry="40" fill="url(#octoGrad)"/>
    <circle cx="135" cy="120" r="8" fill="#fff"/>
    <circle cx="165" cy="120" r="8" fill="#fff"/>
    <circle cx="135" cy="120" r="4" fill="#000"/>
    <circle cx="165" cy="120" r="4" fill="#000"/>
  </g>
  <g fill="url(#octoGrad)" stroke="#692579" stroke-width="2">
    <path d="M150,150 C120,180 100,230 130,260 S145,270 150,260"/>
    <path d="M150,150 C180,180 200,230 170,260 S155,270 150,260"/>
    <path d="M150,150 C100,170 80,210 90,240 S130,250 140,240"/>
    <path d="M150,150 C200,170 220,210 210,240 S170,250 160,240"/>
    <path d="M150,150 C130,140 110,120 100,100 S120,90 140,110"/>
    <path d="M150,150 C170,140 190,120 200,100 S180,90 160,110"/>
    <g fill="#e0b3ff" opacity="0.7">
      <circle cx="125" cy="200" r="3"/>
      <circle cx="115" cy="215" r="2.5"/>
      <circle cx="140" cy="210" r="3"/>
      <circle cx="175" cy="200" r="3"/>
      <circle cx="185" cy="215" r="2.5"/>
      <circle cx="160" cy="210" r="3"/>
      <circle cx="105" cy="140" r="3"/>
      <circle cx="125" cy="120" r="2.5"/>
      <circle cx="175" cy="140" r="3"/>
      <circle cx="155" cy="120" r="2.5"/>
    </g>
  </g>
  <g filter="url(#glow)">
    <g transform="translate(80,50) rotate(30)">
      <rect x="-2" y="0" width="4" height="80" fill="url(#bladeGrad)"/>
      <rect x="-4" y="80" width="8" height="10" fill="#8b4513"/>
      <circle cx="0" cy="80" r="2" fill="#daa520"/>
      <path d="M0,0 C5,-5 15,-5 18,0 C15,5 5,5 0,0 Z" fill="url(#flameGrad)"/>
    </g>
    <g transform="translate(220,60) rotate(-20)">
      <rect x="-2" y="0" width="4" height="80" fill="url(#bladeGrad)"/>
      <rect x="-4" y="80" width="8" height="10" fill="#8b4513"/>
      <circle cx="0" cy="80" r="2" fill="#daa520"/>
      <path d="M0,0 C5,-5 15,-5 18,0 C15,5 5,5 0,0 Z" fill="url(#flameGrad)"/>
    </g>
    <g transform="translate(150,30)">
      <rect x="-2" y="0" width="4" height="80" fill="url(#bladeGrad)"/>
      <rect x="-4" y="80" width="8" height="10" fill="#8b4513"/>
      <circle cx="0" cy="80" r="2" fill="#daa520"/>
      <path d="M0,0 C5,-5 15,-5 18,0 C15,5 5,5 0,0 Z" fill="url(#flameGrad)"/>
    </g>
    <g transform="translate(100,100) rotate(140)">
      <rect x="-2" y="0" width="4" height="80" fill="url(#bladeGrad)"/>
      <rect x="-4" y="80" width="8" height="10" fill="#8b4513"/>
      <circle cx="0" cy="80" r="2" fill="#daa520"/>
      <path d="M0,0 C5,-5 15,-5 18,0 C15,5 5,5 0,0 Z" fill="url(#flameGrad)"/>
    </g>
    <g transform="translate(200,120) rotate(-100)">
      <rect x="-2" y="0" width="4" height="80" fill="url(#bladeGrad)"/>
      <rect x="-4" y="80" width="8" height="10" fill="#8b4513"/>
      <circle cx="0" cy="80" r="2" fill="#daa520"/>
      <path d="M0,0 C5,-5 15,-5 18,0 C15,5 5,5 0,0 Z" fill="url(#flameGrad)"/>
    </g>
  </g>
</svg>
Gemini 2.5 Pro Preview 05-06
Player 2
ELO: 1,281.151 1,287.996 (+6.8)
SVG by Gemini 2.5 Pro Preview 05-06 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="waterGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="30%">
      <stop offset="0%" style="stop-color:#30A9DE; stop-opacity:1" />
      <stop offset="40%" style="stop-color:#2070A0; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#003049; stop-opacity:1" />
    </radialGradient>

    <radialGradient id="octopusSkin" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#FF6B6B;" />
      <stop offset="60%" style="stop-color:#C44536;" />
      <stop offset="100%" style="stop-color:#A13C2F;" />
    </radialGradient>
    <linearGradient id="tentacleShade" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#FF8C8C"/>
        <stop offset="100%" stop-color="#C44536"/>
    </linearGradient>
    <color id="suctionCupColor" >#E57373</color>

    <linearGradient id="swordBlade" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#E8E8E8;" />
      <stop offset="50%" style="stop-color:#BDBDBD;" />
      <stop offset="100%" style="stop-color:#D0D0D0;" />
    </linearGradient>

    <linearGradient id="swordHilt" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#6D4C41;" /> <!-- Darker Brown -->
      <stop offset="100%" style="stop-color:#4E342E;" />
    </linearGradient>

    <radialGradient id="flameCore" cx="50%" cy="70%" r="60%">
      <stop offset="0%" style="stop-color:#FFFFFF; stop-opacity:0.95;" />
      <stop offset="30%" style="stop-color:#00FFFF; stop-opacity:0.85;" /> <!-- Cyan -->
      <stop offset="70%" style="stop-color:#2196F3; stop-opacity:0.6;" /> <!-- Bright Blue -->
      <stop offset="100%" style="stop-color:#0D47A1; stop-opacity:0.3;" /> <!-- Dark Blue -->
    </radialGradient>

    <filter id="flameGlow">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect width="300" height="300" fill="url(#waterGradient)" />

  <g id="static-bubbles">
    <circle cx="50" cy="250" r="5" fill="#B2EBF2" opacity="0.6"/> <circle cx="70" cy="200" r="3" fill="#B2EBF2" opacity="0.4"/>
    <circle cx="250" cy="220" r="6" fill="#B2EBF2" opacity="0.5"/><circle cx="200" cy="80" r="4" fill="#B2EBF2" opacity="0.7"/>
    <circle cx="100" cy="50" r="2.5" fill="#B2EBF2" opacity="0.3"/><circle cx="280" cy="150" r="3.5" fill="#B2EBF2" opacity="0.5"/>
    <circle cx="30" cy="100" r="4" fill="#B2EBF2" opacity="0.6"/>
  </g>

  <g id="octopus" transform="translate(150, 150)">
    <!-- Scaled Mantle/Head (0.8x) -->
    <path d="M 0 -48 C 24 -56, 36 -40, 36 -16 C 36 8, 24 24, 0 28 C -24 24, -36 8, -36 -16 C -36 -40, -24 -56, 0 -48 Z"
          fill="url(#octopusSkin)" stroke="#772E25" stroke-width="1.6"/>

    <!-- Scaled Eyes (0.8x) -->
    <g id="left-eye" transform="translate(-16, -28)">
      <ellipse cx="0" cy="0" rx="9.6" ry="12" fill="white"/>
      <circle cx="0" cy="1.6" r="5.6" fill="#00ACC1"/> <!-- Cyan iris -->
      <circle cx="0" cy="2.4" r="2.4" fill="black"/>
      <circle cx="0.8" cy="0.8" r="1.2" fill="white" opacity="0.8"/>
    </g>
    <g id="right-eye" transform="translate(16, -28)">
      <ellipse cx="0" cy="0" rx="9.6" ry="12" fill="white"/>
      <circle cx="0" cy="1.6" r="5.6" fill="#00ACC1"/>
      <circle cx="0" cy="2.4" r="2.4" fill="black"/>
      <circle cx="0.8" cy="0.8" r="1.2" fill="white" opacity="0.8"/>
    </g>
    
    <!-- Scaled Tentacles (0.8x sizes, 0.8x stroke-width) -->
    <!-- Tentacle 5 (back left) -->
    <g id="tentacle5">
      <path d="M -8 24 Q -16 48 0 64 Q 24 72 16 48" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="6.4" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="-10" cy="38" r="2" fill="#E57373" opacity="0.7"/><circle cx="-4" cy="55" r="2.2" fill="#E57373" opacity="0.7"/><circle cx="10" cy="60" r="2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 6 (back right) -->
    <g id="tentacle6">
      <path d="M 8 24 Q 16 48 0 64 Q -24 72 -16 48" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="6.4" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="10" cy="38" r="2" fill="#E57373" opacity="0.7"/><circle cx="4" cy="55" r="2.2" fill="#E57373" opacity="0.7"/><circle cx="-10" cy="60" r="2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 7 (lower left support) -->
    <g id="tentacle7">
      <path d="M -4 24 Q -12 40 -4 56 Q 4 72 12 56 Q 20 40 4 24" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="-8" cy="35" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="-2" cy="50" r="2.8" fill="#E57373" opacity="0.7"/><circle cx="8" cy="50" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="14" cy="38" r="2.2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 8 (lower right support, new path) -->
     <g id="tentacle8">
        <path d="M 3.2 19.2 Q 16 36 8 52 Q -4 64 -12 48" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
        <circle cx="10" cy="30" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="8" cy="45" r="2.8" fill="#E57373" opacity="0.7"/><circle cx="0" cy="58" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="-8" cy="52" r="2.2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 1 (front left, holding sword 1) end at (-56, 88) -->
    <g id="tentacle1">
      <path d="M -12 16 Q -24 40 -48 56 Q -65 72 -56 88" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="-20" cy="32" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="-38" cy="48" r="2.8" fill="#E57373" opacity="0.7"/><circle cx="-52" cy="65" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="-55" cy="80" r="2.2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 2 (front right, holding sword 2) end at (56, 88) -->
    <g id="tentacle2">
      <path d="M 12 16 Q 24 40 48 56 Q 65 72 56 88" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="20" cy="32" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="38" cy="48" r="2.8" fill="#E57373" opacity="0.7"/><circle cx="52" cy="65" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="55" cy="80" r="2.2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 3 (upper left, reaching) end at (-72, 24) -->
    <g id="tentacle3">
      <path d="M -20 -8 Q -40 -24 -64 -16 Q -80 0 -72 24" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="7.2" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="-32" cy="-18" r="2.2" fill="#E57373" opacity="0.7"/><circle cx="-50" cy="-20" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="-68" cy="-5" r="2.2" fill="#E57373" opacity="0.7"/><circle cx="-70" cy="15" r="2" fill="#E57373" opacity="0.7"/>
    </g>
    <!-- Tentacle 4 (upper right, reaching) end at (72, 24) -->
    <g id="tentacle4">
      <path d="M 20 -8 Q 40 -24 64 -16 Q 80 0 72 24" fill="url(#tentacleShade)" stroke="#772E25" stroke-width="7.2" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="32" cy="-18" r="2.2" fill="#E57373" opacity="0.7"/><circle cx="50" cy="-20" r="2.5" fill="#E57373" opacity="0.7"/><circle cx="68" cy="-5" r="2.2" fill="#E57373" opacity="0.7"/><circle cx="70" cy="15" r="2" fill="#E57373" opacity="0.7"/>
    </g>
  </g> <!-- End Octopus -->

  <!-- Swords and Flames (Shortened) -->
  <!-- Sword Component: Hilt center (0,0). Blade tip (-54). Flame tip (-54-30 = -84) -->
  <!-- Sword 1 (held by tentacle 1) Hilt at (150-56, 150+88) = (94, 238), Rot -135 -->
  <g id="sword1-group" transform="translate(94, 238) rotate(-135 0 0)">
    <rect x="-4" y="-7.5" width="8" height="15" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <circle cx="0" cy="10.5" r="3" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <rect x="-10" y="-9.5" width="20" height="4" rx="1" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <path d="M -2.5 -11.5 L -2.5 -51.5 L 0 -54 L 2.5 -51.5 L 2.5 -11.5 Z" fill="url(#swordBlade)" stroke="#7F7F7F" stroke-width="0.5"/>
    <g transform="translate(0, -54)" filter="url(#flameGlow)">
      <path d="M -4 0 Q 0 -10 4 0 Q 6 -8 6 -20 Q 3 -25 0 -30 Q -3 -25 -6 -20 Q -6 -8 -4 0 Z" fill="url(#flameCore)" opacity="0.85"/>
      <circle cx="0" cy="-15" r="2" fill="white" opacity="0.6"><animate attributeName="cy" values="-15;-18;-15" dur="1s" repeatCount="indefinite" /><animate attributeName="r" values="2;2.5;2" dur="1s" repeatCount="indefinite" /></circle>
      <circle cx="2.5" cy="-20" r="1.5" fill="white" opacity="0.5"><animate attributeName="cy" values="-20;-22;-20" dur="1.2s" repeatCount="indefinite" /></circle>
    </g>
  </g>

  <!-- Sword 2 (held by tentacle 2) Hilt at (150+56, 150+88) = (206, 238), Rot 135 -->
  <g id="sword2-group" transform="translate(206, 238) rotate(135 0 0)">
    <rect x="-4" y="-7.5" width="8" height="15" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <circle cx="0" cy="10.5" r="3" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <rect x="-10" y="-9.5" width="20" height="4" rx="1" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <path d="M -2.5 -11.5 L -2.5 -51.5 L 0 -54 L 2.5 -51.5 L 2.5 -11.5 Z" fill="url(#swordBlade)" stroke="#7F7F7F" stroke-width="0.5"/>
    <g transform="translate(0, -54)" filter="url(#flameGlow)">
      <path d="M -4 0 Q 0 -10 4 0 Q 6 -8 6 -20 Q 3 -25 0 -30 Q -3 -25 -6 -20 Q -6 -8 -4 0 Z" fill="url(#flameCore)" opacity="0.85"/>
      <circle cx="0" cy="-15" r="2" fill="white" opacity="0.6"><animate attributeName="cy" values="-15;-18;-15" dur="1.1s" repeatCount="indefinite" /><animate attributeName="r" values="2;2.5;2" dur="1.1s" repeatCount="indefinite" /></circle>
      <circle cx="-2.5" cy="-20" r="1.5" fill="white" opacity="0.5"><animate attributeName="cy" values="-20;-22;-20" dur="1.3s" repeatCount="indefinite" /></circle>
    </g>
  </g>

  <!-- Sword 3 (juggled) Hilt at (150,100), Rot 45 -->
  <g id="sword3-group" transform="translate(150, 100) rotate(45 0 0)">
    <rect x="-4" y="-7.5" width="8" height="15" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <circle cx="0" cy="10.5" r="3" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <rect x="-10" y="-9.5" width="20" height="4" rx="1" fill="url(#swordHilt)" stroke="#3A1F17" stroke-width="0.5"/>
    <path d="M -2.5 -11.5 L -2.5 -51.5 L 0 -54 L 2.5 -51.5 L 2.5 -11.5 Z" fill="url(#swordBlade)" stroke="#7F7F7F" stroke-width="0.5"/>
    <g transform="translate(0, -54)" filter="url(#flameGlow)">
      <path d="M -4 0 Q 0 -10 4 0 Q 6 -8 6 -20 Q 3 -25 0 -30 Q -3 -25 -6 -20 Q -6 -8 -4 0 Z" fill="url(#flameCore)" opacity="0.9"/> <!-- Slightly brighter -->
      <circle cx="0" cy="-15" r="2.2" fill="white" opacity="0.7"><animate attributeName="cy" values="-15;-19;-15" dur="0.9s" repeatCount="indefinite" /><animate attributeName="r" values="2.2;2.7;2.2" dur="0.9s" repeatCount="indefinite" /></circle>
      <circle cx="3" cy="-22" r="1.8" fill="white" opacity="0.55"><animate attributeName="cy" values="-22;-24;-22" dur="1s" repeatCount="indefinite" /></circle>
    </g>
  </g>
  
  <g id="rising-bubbles">
    <circle cx="150" cy="320" r="4" fill="#B2EBF2" opacity="0.7"> <animate attributeName="cy" from="320" to="-20" dur="8s" repeatCount="indefinite" /><animate attributeName="cx" values="150;155;145;150" dur="3s" repeatCount="indefinite" /></circle>
    <circle cx="60" cy="310" r="3" fill="#B2EBF2" opacity="0.5"> <animate attributeName="cy" from="310" to="-10" dur="10s" begin="1s" repeatCount="indefinite" /><animate attributeName="cx" values="60;55;65;60" dur="4s" repeatCount="indefinite" /></circle>
    <circle cx="240" cy="315" r="5" fill="#B2EBF2" opacity="0.6"> <animate attributeName="cy" from="315" to="-15" dur="7s" begin="0.5s" repeatCount="indefinite" /><animate attributeName="cx" values="240;248;232;240" dur="3.5s" repeatCount="indefinite" /></circle>
    <circle cx="120" cy="325" r="2.5" fill="#B2EBF2" opacity="0.4"> <animate attributeName="cy" from="325" to="-5" dur="12s" begin="2s" repeatCount="indefinite" /><animate attributeName="cx" values="120;123;117;120" dur="5s" repeatCount="indefinite" /></circle>
    <circle cx="200" cy="330" r="3.5" fill="#B2EBF2" opacity="0.55"> <animate attributeName="cy" from="330" to="-10" dur="9s" begin="1.5s" repeatCount="indefinite" /><animate attributeName="cx" values="200;195;205;200" dur="3.8s" repeatCount="indefinite" /></circle>
  </g>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Gemini 2.5 Pro Preview 05-06 Player 2

Judge's Analysis

    Player 2's submission demonstrates stronger adherence to the prompt with a more detailed and expressive octopus juggling flaming swords underwater, using blue flames for an underwater effect.

    The composition is dynamic and visually appealing, while Player 1's work, though colorful, lacks clear detailing of the octopus and swords, making it less convincing in meeting the prompt's requirements.

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
48
Player 2
81
Rectangles

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

Player 1
11
Player 2
7
Circles

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

Player 1
25
Player 2
57
Ellipses

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

Player 1
1
Player 2
2
Lines

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

Player 1
—
Player 2
—
Polygons

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

Player 1
—
Player 2
—
Paths

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

Player 1
11
Player 2
15
Groups

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

Player 1
10
Player 2
19

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
6
Patterns

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

Player 1
—
Player 2
—
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
1
Player 2
21

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
17
Player 2
10

Interactivity Metrics

Animations

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

Player 1
—
Player 2
19
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
5
Player 2
9

Complexity Metrics

Path Commands

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

Player 1
38
Player 2
70
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
6
Player 2
8
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 #2622 May 09, 2025

"A rocket-powered snail racing a wind-up turtle across a vibrant checkerboard track."

P1
SVG by o4-mini medium (2025-04-16)
P2
SVG by Gemini 2.5 Pro Preview 05-06
o4-mini medium (2025-04-16)
vs
Gemini 2.5 Pro Preview 05-06
View
Match #2547 May 09, 2025

"A cactus wearing a top hat and monocle in a desert sunset."

P1
SVG by o4-mini medium (2025-04-16)
P2
SVG by Gemini 2.5 Pro Preview 05-06
o4-mini medium (2025-04-16)
vs
Gemini 2.5 Pro Preview 05-06
View
Match #2413 May 09, 2025

"A snail racing a rocket under a starry sky."

P1
SVG by Gemini 2.5 Pro Preview 05-06
P2
SVG by o4-mini medium (2025-04-16)
Gemini 2.5 Pro Preview 05-06
vs
o4-mini medium (2025-04-16)
View