Back

SVG Drawing Match #2328

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"An octopus juggling flaming swords underwater."

SVG by GPT-4.1 mini (2025-04-14)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
  <defs>
    <!-- Gradient for water background -->
    <radialGradient id="waterGradient" cx="50%" cy="50%" r="80%">
      <stop offset="0%" stop-color="#144d7d" />
      <stop offset="100%" stop-color="#02111f" />
    </radialGradient>

    <!-- Gradient for octopus body -->
    <radialGradient id="octoBody" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#ff5588" />
      <stop offset="100%" stop-color="#881145" />
    </radialGradient>

    <!-- Tentacle shading gradient -->
    <radialGradient id="tentacleShade" cx="50%" cy="50%" r="60%" fx="50%" fy="70%">
      <stop offset="0%" stop-color="#ff88aa" />
      <stop offset="100%" stop-color="#661136" />
    </radialGradient>

    <!-- Octopus eye whites -->
    <radialGradient id="eyeWhite" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff" />
      <stop offset="100%" stop-color="#ccc" />
    </radialGradient>

    <!-- Sword blade gradient -->
    <linearGradient id="bladeGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ddd" />
      <stop offset="40%" stop-color="#eee" />
      <stop offset="60%" stop-color="#bbb" />
      <stop offset="100%" stop-color="#eee" />
    </linearGradient>

    <!-- Flame gradient - core -->
    <radialGradient id="flameCore" cx="50%" cy="50%" r="50%">
      <stop offset="10%" stop-color="#ffff66" />
      <stop offset="50%" stop-color="#ff6611" />
      <stop offset="90%" stop-color="transparent" />
    </radialGradient>

    <!-- Flame gradient - flicker -->
    <radialGradient id="flameFlicker" cx="50%" cy="80%" r="70%">
      <stop offset="20%" stop-color="#ffbb33" />
      <stop offset="80%" stop-color="transparent" />
    </radialGradient>

    <!-- Fire flicker pattern -->
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%" >
      <feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="#ff6600" flood-opacity="0.9"/>
      <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#ffa533" flood-opacity="0.5"/>
    </filter>

    <!-- Tentacle suction gradient -->
    <radialGradient id="sucker" cx="50%" cy="50%" r="60%">
      <stop offset="0%" stop-color="#ffe6f0" />
      <stop offset="85%" stop-color="#8a274a" />
      <stop offset="100%" stop-color="#570d2b" />
    </radialGradient>

    <!-- Sword hilt gradient -->
    <linearGradient id="hiltGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#805020" />
      <stop offset="100%" stop-color="#412810" />
    </linearGradient>

    <!-- Water bubbles -->
    <radialGradient id="bubbleGlow" cx="50%" cy="50%" r="60%">
      <stop offset="0%" stop-color="#a0e8ff" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#41668e" stop-opacity="0" />
    </radialGradient>

  </defs>

  <!-- Background: water -->
  <rect width="300" height="300" fill="url(#waterGradient)" />

  <!-- Abstract water currents waves -->
  <g stroke="#0b2a51" stroke-width="1" fill="none" opacity="0.15" >
    <path d="M0 40 Q50 30 100 50 T200 60 T300 45" />
    <path d="M0 80 Q60 70 110 90 T210 100 T300 85" />
    <path d="M0 120 Q40 110 90 130 T190 140 T300 125" />
  </g>

  <!-- Underwater bubbles floating upward -->
  <g opacity="0.7" stroke="none" >
    <circle cx="50" cy="250" r="6" fill="url(#bubbleGlow)" />
    <circle cx="80" cy="280" r="4" fill="url(#bubbleGlow)" />
    <circle cx="220" cy="260" r="7" fill="url(#bubbleGlow)" />
    <circle cx="160" cy="275" r="5" fill="url(#bubbleGlow)" />
    <circle cx="200" cy="285" r="3" fill="url(#bubbleGlow)" />
    <circle cx="130" cy="240" r="8" fill="url(#bubbleGlow)" />
  </g>

  <!-- Octopus center body -->
  <ellipse cx="150" cy="170" rx="56" ry="48" fill="url(#octoBody)" filter="url(#glow)" />
  <circle cx="150" cy="170" r="48" fill="url(#tentacleShade)" opacity="0.9" />

  <!-- Octopus shading highlights -->
  <ellipse cx="140" cy="160" rx="30" ry="20" fill="rgba(255,255,255,0.2)" />

  <!-- Octopus head dome -->
  <path d="M100 150 Q150 90 200 150 Q195 180 105 180 Z" fill="url(#octoBody)" stroke="#771044" stroke-width="2"/>

  <!-- Tentacles base shapes - 8 tentacles twisting outward -->
  <g stroke="none" fill="url(#tentacleShade)">
    <!-- Tentacle 1 left bottom -->
    <path d="M90 185 Q70 210 88 235 Q98 245 108 229 Q105 210 90 185Z" />
    <!-- Tentacle 2 left middle -->
    <path d="M105 190 Q75 215 82 245 Q89 255 103 235 Q108 215 105 190Z" />
    <!-- Tentacle 3 left top -->
    <path d="M120 185 Q95 210 98 240 Q105 250 115 230 Q118 210 120 185Z" />
    <!-- Tentacle 4 top left -->
    <path d="M140 165 Q130 135 140 105 Q150 100 158 122 Q155 140 140 165Z" />
    <!-- Tentacle 5 top right -->
    <path d="M160 165 Q170 130 176 102 Q185 98 190 120 Q185 140 160 165Z" />
    <!-- Tentacle 6 right top -->
    <path d="M180 185 Q210 210 202 235 Q195 245 185 230 Q183 210 180 185Z" />
    <!-- Tentacle 7 right middle -->
    <path d="M195 190 Q225 215 220 245 Q212 255 198 235 Q195 215 195 190Z" />
    <!-- Tentacle 8 right bottom -->
    <path d="M210 185 Q240 210 225 235 Q215 245 205 230 Q205 210 210 185Z" />
  </g>

  <!-- Tentacles suckers detailing with small circles -->
  <g fill="url(#sucker)">
    <!-- Left bottom tentacle suckers -->
    <circle cx="80" cy="205" r="5" />
    <circle cx="85" cy="220" r="4" />
    <circle cx="95" cy="225" r="4.5" />
    <!-- Left middle tentacle suckers -->
    <circle cx="78" cy="225" r="4.3" />
    <circle cx="85" cy="240" r="5" />
    <circle cx="97" cy="235" r="4" />
    <!-- Left top tentacle suckers -->
    <circle cx="90" cy="210" r="3.8"/>
    <circle cx="100" cy="230" r="4.3"/>
    <circle cx="110" cy="235" r="4" />
    <!-- Right tentacles (some) suckers -->
    <circle cx="220" cy="210" r="5" />
    <circle cx="215" cy="230" r="4.8" />
    <circle cx="205" cy="235" r="4" />
    <circle cx="210" cy="215" r="4.5" />
    <circle cx="200" cy="230" r="4" />
  </g>

  <!-- Octopus eyes -->
  <g filter="url(#glow)">
    <!-- Left eye white -->
    <ellipse cx="125" cy="145" rx="15" ry="20" fill="url(#eyeWhite)" stroke="#700a3b" stroke-width="1.5"/>
    <!-- Left pupil -->
    <circle cx="128" cy="148" r="8" fill="#221414" />
    <circle cx="122" cy="142" r="3" fill="#eeeeee" opacity="0.7" />
    <!-- Right eye white -->
    <ellipse cx="175" cy="145" rx="13" ry="18" fill="url(#eyeWhite)" stroke="#700a3b" stroke-width="1.5"/>
    <!-- Right pupil -->
    <circle cx="172" cy="148" r="7" fill="#221414" />
    <circle cx="166" cy="140" r="2.5" fill="#eeeeee" opacity="0.7" />
  </g>

  <!-- Mouth / beak abstract -->
  <path d="M145 170 Q150 185 155 170" fill="#4b0928" stroke="#2b0417" stroke-width="1" />

  <!-- Position of flaming swords in juggling motion (five swords) -->
  <g filter="url(#glow)" >
    <!-- Sword 1 (top center, flame up) -->
    <g transform="translate(150 70) rotate(-10)" >
      <rect x="-4" y="0" width="8" height="65" fill="url(#bladeGradient)" stroke="#666" stroke-width="0.7" rx="2" ry="2"/>
      <rect x="-12" y="60" width="24" height="12" fill="url(#hiltGradient)" stroke="#442a13" stroke-width="1" rx="4" ry="3" />
      <ellipse cx="0" cy="60" rx="6" ry="3" fill="#7a4e22"/>
      <ellipse cx="0" cy="72" rx="6" ry="3" fill="#6a3f18"/>
      <!-- Flame -->
      <g>
        <ellipse cx="0" cy="0" rx="10" ry="22" fill="url(#flameCore)" />
        <ellipse cx="3" cy="5" rx="7" ry="18" fill="url(#flameFlicker)" />
        <path d="M0 -16 C5 -22 2 -12 3 -4 C-2 -10 -5 -18 0 -16Z" fill="#ff5511" opacity="0.9"/>
        <path d="M0 -19 C3 -17 7 -6 3 -4" stroke="#ffbb33" stroke-width="1" fill="none" opacity="0.8"/>
      </g>
    </g>

    <!-- Sword 2 (top left, flame flicking) -->
    <g transform="translate(85 70) rotate(15)" >
      <rect x="-3.5" y="0" width="7" height="58" fill="url(#bladeGradient)" stroke="#555" stroke-width="0.5" rx="1.5" ry="1.5"/>
      <rect x="-11" y="55" width="22" height="10" fill="url(#hiltGradient)" stroke="#412810" stroke-width="1" rx="4" ry="3" />
      <ellipse cx="0" cy="55" rx="5.5" ry="2.5" fill="#794a1f"/>
      <ellipse cx="0" cy="65" rx="5.5" ry="2.5" fill="#633d16"/>
      <!-- Flame -->
      <g>
        <ellipse cx="0" cy="0" rx="9" ry="18" fill="url(#flameCore)" />
        <ellipse cx="3" cy="4" rx="6" ry="14" fill="url(#flameFlicker)" />
        <path d="M0 -14 C4 -20 1 -11 2 -3 C-2 -8 -4 -15 0 -14Z" fill="#ff6622" opacity="0.85"/>
        <path d="M0 -16 C3 -15 6 -6 2 -3" stroke="#ffaa11" stroke-width="1" fill="none" opacity="0.75"/>
      </g>
    </g>

    <!-- Sword 3 (top right, reversed flame) -->
    <g transform="translate(215 90) rotate(-25)">
      <rect x="-4" y="0" width="8" height="60" fill="url(#bladeGradient)" stroke="#666" stroke-width="0.7" rx="3" ry="3"/>
      <rect x="-11" y="55" width="22" height="10" fill="url(#hiltGradient)" stroke="#3f2712" stroke-width="1" rx="4" ry="3" />
      <ellipse cx="0" cy="55" rx="6" ry="3" fill="#7f510f"/>
      <ellipse cx="0" cy="65" rx="6" ry="3" fill="#5a3610"/>
      <!-- Flame -->
      <g transform="scale(1,-1)" >
        <ellipse cx="0" cy="0" rx="9" ry="20" fill="url(#flameCore)" />
        <ellipse cx="-3" cy="4" rx="6" ry="16" fill="url(#flameFlicker)" />
        <path d="M0 -15 C-4 -19 -1 -9 -2 -2 C2 -7 5 -15 0 -15Z" fill="#ff7a11" opacity="0.9"/>
        <path d="M0 -17 C-3 -15 -6 -5 -2 -2" stroke="#ffbb33" stroke-width="1" fill="none" opacity="0.8"/>
      </g>
    </g>

    <!-- Sword 4 (left center, leaning with flame to left) -->
    <g transform="translate(80 150) rotate(65)" >
      <rect x="-4" y="0" width="8" height="50" fill="url(#bladeGradient)" stroke="#666" stroke-width="0.7" rx="2" ry="2"/>
      <rect x="-11" y="45" width="22" height="10" fill="url(#hiltGradient)" stroke="#442a13" stroke-width="1" rx="4" ry="3" />
      <ellipse cx="0" cy="45" rx="6" ry="3" fill="#6d4316"/>
      <ellipse cx="0" cy="55" rx="6" ry="3" fill="#573510"/>
      <!-- Flame -->
      <g>
        <ellipse cx="0" cy="0" rx="8" ry="18" fill="url(#flameCore)" />
        <ellipse cx="3" cy="6" rx="5.5" ry="14" fill="url(#flameFlicker)" />
        <path d="M0 -14 C4 -22 1 -12 3 -4 C-3 -10 -5 -18 0 -14Z" fill="#ff6611" opacity="0.9"/>
        <path d="M0 -16 C3 -16 6 -6 3 -4" stroke="#ffbb33" stroke-width="1" fill="none" opacity="0.75"/>
      </g>
    </g>

    <!-- Sword 5 (right center, slight tilt, flame to right) -->
    <g transform="translate(215 140) rotate(-45)" >
      <rect x="-3.5" y="0" width="7" height="50" fill="url(#bladeGradient)" stroke="#666" stroke-width="0.6" rx="1.5" ry="1.5"/>
      <rect x="-11" y="45" width="22" height="10" fill="url(#hiltGradient)" stroke="#452a12" stroke-width="1" rx="4" ry="3" />
      <ellipse cx="0" cy="45" rx="5.5" ry="2.5" fill="#754a1a"/>
      <ellipse cx="0" cy="55" rx="5.5" ry="2.5" fill="#5a3a17"/>
      <!-- Flame -->
      <g>
        <ellipse cx="0" cy="0" rx="8.8" ry="19" fill="url(#flameCore)" />
        <ellipse cx="3" cy="5" rx="5" ry="14" fill="url(#flameFlicker)" />
        <path d="M0 -15 C4 -16 1 -9 3 -3 C-2 -9 -5 -15 0 -15Z" fill="#ff7a11" opacity="0.87"/>
        <path d="M0 -17 C3 -16 6 -6 3 -3" stroke="#ffaa22" stroke-width="1" fill="none" opacity="0.8"/>
      </g>
    </g>
  </g>

  <!-- Tentacles wrapping subtly around swords for juggling effect -->
  <g fill="none" stroke="#300023" stroke-width="3" opacity="0.25" >
    <path d="M95 230 Q80 195 85 150" />
    <path d="M110 230 Q100 185 115 140" />
    <path d="M125 220 Q135 190 145 160" />
    <path d="M180 220 Q190 190 195 145" />
    <path d="M200 210 Q210 180 200 140" />
  </g>

  <!-- Light shafts faintly to reinforce underwater atmosphere -->
  <g stroke="url(#waterGradient)" stroke-width="4" opacity="0.07" >
    <line x1="20" y1="0" x2="60" y2="300"/>
    <line x1="100" y1="0" x2="130" y2="300"/>
    <line x1="200" y1="0" x2="230" y2="300"/>
    <line x1="270" y1="0" x2="300" y2="300"/>
  </g>
</svg>
SVG by GPT-4.1 nano (2025-04-14)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Definitions for gradients and filters -->
  <defs>
    <!-- Gradient for the underwater background -->
    <linearGradient id="backgroundGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0a1f2f"/>
      <stop offset="100%" stop-color="#05132c"/>
    </linearGradient>
    <!-- Gradient for the octopus body -->
    <radialGradient id="octopusGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ff6f61"/>
      <stop offset="100%" stop-color="#cc443f"/>
    </radialGradient>
    <!-- Gradient for the flames -->
    <linearGradient id="flameGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff9500"/>
      <stop offset="100%" stop-color="#ff4b2b"/>
    </linearGradient>
    <!-- Pattern for sparks -->
    <pattern id="sparkPattern" patternUnits="userSpaceOnUse" width="4" height="4">
      <circle cx="2" cy="2" r="1" fill="#ffd700" opacity="0.8"/>
    </pattern>
    <!-- Filter for glow effect on flames -->
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="#ff9500" flood-opacity="0.8"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="300" height="300" fill="url(#backgroundGradient)" />

  <!-- Light rays to enhance underwater feeling -->
  <g opacity="0.2" mask="url(#lightMask)">
    <line x1="0" y1="0" x2="300" y2="300" stroke="#ffffff" stroke-width="1" opacity="0.05"/>
    <line x1="300" y1="0" x2="0" y2="300" stroke="#ffffff" stroke-width="1" opacity="0.05"/>
    <line x1="150" y1="0" x2="150" y2="300" stroke="#ffffff" stroke-width="0.5" opacity="0.02"/>
    <line x1="0" y1="150" x2="300" y2="150" stroke="#ffffff" stroke-width="0.5" opacity="0.02"/>
  </g>
  <mask id="lightMask">
    <rect width="300" height="300" fill="#fff"/>
  </mask>

  <!-- Octopus body -->
  <g id="octopus" transform="translate(150,150)">
    <!-- Body -->
    <ellipse cx="0" cy="0" rx="40" ry="30" fill="url(#octopusGradient)" stroke="#444" stroke-width="2"/>
    
    <!-- Head tentacle (top) -->
    <path d="M 0 -20 Q -10 -40 -5 -70 Q 0 -100 5 -70 Q 10 -40 0 -20 Z" fill="#ff6f61" opacity="0.8"/>
    <!-- Left side tentacle -->
    <path d="M -30 10 Q -70 0 -70 30 Q -70 60 -40 80 Q -20 100 -20 80 Q -20 60 -40 50 Q -60 50 -60 20 Q -60 -10 -30 10 Z" fill="#ff6f61" opacity="0.8"/>
    <!-- Right side tentacle -->
    <path d="M 30 10 Q 70 0 70 30 Q 70 60 40 80 Q 20 100 20 80 Q 20 60 40 50 Q 60 50 60 20 Q 60 -10 30 10 Z" fill="#ff6f61" opacity="0.8"/>
    <!-- Additional tentacles for juggling -->
    <path d="M -50 0 Q -90 -20 -85 -60 Q -80 -100 -50 -120 Q -20 -140 0 -100" stroke="#ff6f61" stroke-width="8" fill="none" stroke-linecap="round" transform="rotate(-20)" opacity="0.7"/>
    <path d="M 50 0 Q 90 -20 85 -60 Q 80 -100 50 -120 Q 20 -140 0 -100" stroke="#ff6f61" stroke-width="8" fill="none" stroke-linecap="round" transform="rotate(20)" opacity="0.7"/>
  </g>

  <!-- Flaming Swords -->
  <!-- Left sword -->
  <g id="sword-left" transform="translate(115,160)">
    <!-- Blade -->
    <rect x="0" y="-60" width="4" height="60" fill="url(#flameGradient)" filter="url(#glow)" rx="1"/>
    <!-- Hilt -->
    <rect x="-4" y="0" width="8" height="8" fill="#654321"/>
    <!-- Flame tip -->
    <path d="M 2 -60 C 0 -70 -10 -70 0 -80 C 10 -70 0 -70 2 -60 Z" fill="url(#flameGradient)" filter="url(#glow)"/>
  </g>
  
  <!-- Middle sword -->
  <g id="sword-middle" transform="translate(150,140)">
    <rect x="0" y="-80" width="4" height="80" fill="url(#flameGradient)" filter="url(#glow)" rx="1"/>
    <rect x="-4" y="0" width="8" height="8" fill="#654321"/>
    <path d="M 2 -80 C 0 -90 -10 -90 0 -100 C 10 -90 0 -90 2 -80 Z" fill="url(#flameGradient)" filter="url(#glow)"/>
  </g>
  
  <!-- Right sword -->
  <g id="sword-right" transform="translate(185,160)">
    <!-- Blade -->
    <rect x="0" y="-60" width="4" height="60" fill="url(#flameGradient)" filter="url(#glow)" rx="1"/>
    <!-- Hilt -->
    <rect x="-4" y="0" width="8" height="8" fill="#654321"/>
    <!-- Flame tip -->
    <path d="M 2 -60 C 0 -70 -10 -70 0 -80 C 10 -70 0 -70 2 -60 Z" fill="url(#flameGradient)" filter="url(#glow)"/>
  </g>

  <!-- Sparks and floating particles for underwater effect -->
  <circle cx="150" cy="150" r="100" fill="url(#sparkPattern)" opacity="0.3"/>

  <!-- Bubbles -->
  <circle cx="70" cy="200" r="4" fill="#B0E0E6" opacity="0.7"/>
  <circle cx="90" cy="210" r="2" fill="#B0E0E6" opacity="0.5"/>
  <circle cx="220" cy="180" r="3" fill="#B0E0E6" opacity="0.6"/>
  <circle cx="180" cy="220" r="2.5" fill="#B0E0E6" opacity="0.5"/>
  <circle cx="130" cy="250" r="3" fill="#B0E0E6" opacity="0.4"/>
  <circle cx="160" cy="230" r="2" fill="#B0E0E6" opacity="0.5"/>
  <circle cx="100" cy="190" r="2" fill="#B0E0E6" opacity="0.6"/>
  <circle cx="70" cy="230" r="1.5" fill="#B0E0E6" opacity="0.4"/>
  <circle cx="230" cy="210" r="2" fill="#B0E0E6" opacity="0.5"/>

</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is GPT-4.1 mini (2025-04-14) Player 1

Judge's Analysis

    Player 1's image is more vibrant and expressive, with a clear depiction of an octopus juggling flaming swords underwater.

    The playful design and glowing elements enhance the visual appeal.

    While Player 2's submission is creative, it is more abstract and less detailed, making it harder to identify the prompt's elements clearly.

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
92
Player 2
32
Rectangles

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

Player 1
11
Player 2
8
Circles

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

Player 1
25
Player 2
11
Ellipses

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

Player 1
24
Player 2
1
Lines

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

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

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

Player 1
18
Player 2
5

Visual Effects Metrics

Gradients

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

Player 1
10
Player 2
3
Patterns

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

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

The number of elements with stroke attributes in the SVG.

Player 1
24
Player 2
7

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
52
Player 2
12

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

Complexity Metrics

Path Commands

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

Player 1
98
Player 2
41
Max Group Nesting

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

Player 1
2
Player 2
Defs Elements

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

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