Back

SVG Drawing Match #2658

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Two giraffes tangled in a game of twister under a disco ball."

Gemini 2.5 Pro Preview 05-06
Player 1
ELO: 1,256.439 1,259.824 (+3.4)
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="discoShine" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
            <stop offset="0%" style="stop-color:rgb(240,240,255);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(150,150,200);stop-opacity:1" />
        </radialGradient>

        <pattern id="discoPattern" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(45)">
            <rect x="0" y="0" width="3.5" height="3.5" fill="rgba(255,255,255,0.7)" stroke="rgba(200,200,200,0.5)" stroke-width="0.1"/>
            <rect x="4" y="4" width="3.5" height="3.5" fill="rgba(230,230,255,0.6)" stroke="rgba(180,180,200,0.4)" stroke-width="0.1"/>
        </pattern>

        <radialGradient id="bgGradient" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
            <stop offset="0%" style="stop-color:#4A00E0;" /> <!-- Bright Purple -->
            <stop offset="60%" style="stop-color:#2A0845;" /> <!-- Dark Purple -->
            <stop offset="100%" style="stop-color:#100512;" /> <!-- Very dark purple/black -->
        </radialGradient>

        <filter id="lightGlow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur" />
            <feComponentTransfer in="blur" result="boostedBlur">
                <feFuncA type="linear" slope="2"/>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode in="boostedBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
        
        <linearGradient id="beamGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="rgba(255,255,224,0.7)" />
            <stop offset="100%" stop-color="rgba(255,255,224,0)" />
        </linearGradient>
        <filter id="beamFilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
        </filter>

        <pattern id="giraffeSpots1" patternUnits="userSpaceOnUse" width="25" height="25" viewBox="0 0 25 25">
            <path d="M3,3 Q8,1 12,4 T20,4 Q23,8 20,12 T12,20 Q8,23 3,20 T2,12 Q0,8 3,3 Z" fill="#D2691E" opacity="0.8"/> 
            <path d="M18,10 Q20,9 22,11 T23,15 Q21,17 19,16 T16,13 Q15.5,11 18,10Z" fill="#CD853F" opacity="0.8"/>
        </pattern>
        <linearGradient id="giraffeBodyGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#FFDB58;" /> 
            <stop offset="100%" style="stop-color:#F4A460;" />
        </linearGradient>

        <linearGradient id="giraffeBodyGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#F5EAAA;" /> 
            <stop offset="100%" style="stop-color:#EEDC82;" /> 
        </linearGradient>
        <pattern id="giraffeSpots2" patternUnits="userSpaceOnUse" width="30" height="30" viewBox="0 0 30 30">
            <path d="M5,2 Q10,0 15,3 T25,5 Q28,10 25,15 T15,25 Q10,28 5,25 T3,15 Q1,10 5,2 Z" fill="#A0522D" opacity="0.7"/>
            <path d="M20,12 Q23,10 26,12 T28,18 Q25,20 22,18 T18,15 Q17,13 20,12Z" fill="#B87333" opacity="0.7"/>
        </pattern>
        <filter id="simpleBlur">
            <feGaussianBlur stdDeviation="4"/>
        </filter>
    </defs>

    <rect width="300" height="300" fill="url(#bgGradient)" />
    <ellipse cx="150" cy="290" rx="100" ry="20" fill="black" opacity="0.3" filter="url(#simpleBlur)" />

    <g id="twisterMatGroup">
        <polygon points="40,210 260,210 230,300 70,300" fill="ivory" stroke="#B0B0B0" stroke-width="1"/>
        
        <!-- Background circles for texture -->
        <circle cx="90" cy="285" r="12" fill="#FF4136" opacity="0.4"/>
        <circle cx="140" cy="290" r="12" fill="#0074D9" opacity="0.4"/>
        <circle cx="200" cy="280" r="12" fill="#2ECC40" opacity="0.4"/>
        <circle cx="60" cy="260" r="12" fill="#FFDC00" opacity="0.4"/>
        <circle cx="120" cy="225" r="12" fill="#2ECC40" opacity="0.4"/>
        <circle cx="225" cy="240" r="12" fill="#FF4136" opacity="0.4"/>
        <circle cx="170" cy="255" r="12" fill="#FFDC00" opacity="0.4"/>
        <circle cx="70" cy="230" r="12" fill="#0074D9" opacity="0.4"/>


        <!-- Giraffe 1 target spots -->
        <circle id="G1_FL_Spot" cx="100" cy="250" r="14" fill="#0074D9" stroke="#005299" stroke-width="1"/> 
        <circle id="G1_BR_Spot" cx="190" cy="265" r="14" fill="#FFDC00" stroke="#B39B00" stroke-width="1"/> 
        <circle id="G1_FR_Spot" cx="170" cy="220" r="14" fill="#FF4136" stroke="#B32D26" stroke-width="1"/> 
        <circle id="G1_BL_Spot" cx="125" cy="235" r="14" fill="#2ECC40" stroke="#208E2D" stroke-width="1"/> 

        <!-- Giraffe 2 target spots -->
        <circle id="G2_FL_Spot" cx="80" cy="220" r="14" fill="#FF4136" stroke="#B32D26" stroke-width="1"/> 
        <circle id="G2_FR_Spot" cx="200" cy="240" r="14" fill="#2ECC40" stroke="#208E2D" stroke-width="1"/> 
        <circle id="G2_BL_Spot" cx="150" cy="270" r="14" fill="#FFDC00" stroke="#B39B00" stroke-width="1"/> 
        <circle id="G2_BR_Spot_alt" cx="230" cy="215" r="14" fill="#0074D9" stroke="#005299" stroke-width="1"/>
        
        <ellipse cx="90" cy="240" rx="18" ry="10" fill="rgba(255,105,180,0.3)" filter="url(#lightGlow)" opacity="0.8"/> <!-- Pink -->
        <ellipse cx="190" cy="260" rx="20" ry="12" fill="rgba(64,224,208,0.3)" filter="url(#lightGlow)" opacity="0.8"/> <!-- Turquoise -->
        <ellipse cx="160" cy="220" rx="15" ry="9" fill="rgba(255,255,0,0.3)" filter="url(#lightGlow)" opacity="0.8"/> <!-- Yellow -->
    </g>

    <g id="giraffe2" transform="translate(20, 0)">
        <ellipse cx="130" cy="190" rx="40" ry="25" fill="url(#giraffeBodyGradient2)" transform="rotate(25 130 190)"/>
        <ellipse cx="130" cy="190" rx="40" ry="25" fill="url(#giraffeSpots2)" transform="rotate(25 130 190)"/>

        <path d="M155,180 C185,135 160,85 120,105" stroke="url(#giraffeBodyGradient2)" stroke-width="15" fill="none" stroke-linecap="round"/>
        <path d="M155,180 C185,135 160,85 120,105" stroke="url(#giraffeSpots2)" stroke-width="15" fill="none" stroke-linecap="round" />
        <path d="M155,180 C185,135 160,85 120,105" stroke="#8B5A2B" stroke-width="5" fill="none" stroke-dasharray="4 2" stroke-linecap="round" transform="translate(0,-7.5)"/>

        <ellipse cx="115" cy="100" rx="12" ry="18" fill="url(#giraffeBodyGradient2)" transform="rotate(-25 115 100)"/>
        <ellipse cx="115" cy="100" rx="12" ry="18" fill="url(#giraffeSpots2)" transform="rotate(-25 115 100)"/>
        <line x1="120" y1="85" x2="123" y2="75" stroke="#8B5A2B" stroke-width="3.5" stroke-linecap="round"/><circle cx="123" cy="73" r="2.5" fill="#5B3A29"/>
        <line x1="108" y1="85" x2="105" y2="75" stroke="#8B5A2B" stroke-width="3.5" stroke-linecap="round"/><circle cx="105" cy="73" r="2.5" fill="#5B3A29"/>
        <ellipse cx="106" cy="96" rx="3.5" ry="2.5" fill="white"/><circle cx="105" cy="96" r="1.8" fill="black"/>
        <ellipse cx="115" cy="115" rx="5" ry="3" fill="#A0522D" transform="rotate(-25 115 100)"/>

        <path d="M100,200 Q70,220 60,220" stroke="url(#giraffeBodyGradient2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M100,200 Q70,220 60,220" stroke="url(#giraffeSpots2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="60" cy="220" r="5" fill="#5B3A29"/> 
        <path d="M150,205 Q180,220 180,240" stroke="url(#giraffeBodyGradient2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M150,205 Q180,220 180,240" stroke="url(#giraffeSpots2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="180" cy="240" r="5" fill="#5B3A29"/> 
        <path d="M110,190 Q120,240 130,270" stroke="url(#giraffeBodyGradient2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M110,190 Q120,240 130,270" stroke="url(#giraffeSpots2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="130" cy="270" r="5" fill="#5B3A29"/> 
        <path d="M160,180 Q190,190 210,215" stroke="url(#giraffeBodyGradient2)" stroke-width="9" fill="none" stroke-linecap="round"/> 
        <path d="M160,180 Q190,190 210,215" stroke="url(#giraffeSpots2)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="210" cy="215" r="5" fill="#5B3A29"/> 

        <path d="M95,180 Q85,195 80,185" stroke="#A0522D" stroke-width="3" fill="none" stroke-linecap="round"/>
        <circle cx="80" cy="185" r="4" fill="#5B3A29"/> 
    </g>

    <g id="giraffe1">
        <ellipse cx="150" cy="180" rx="38" ry="23" fill="url(#giraffeBodyGradient1)" transform="rotate(-10 150 180)"/>
        <ellipse cx="150" cy="180" rx="38" ry="23" fill="url(#giraffeSpots1)" transform="rotate(-10 150 180)"/>

        <path d="M125,170 C85,150 100,75 160,95" stroke="url(#giraffeBodyGradient1)" stroke-width="14" fill="none" stroke-linecap="round"/>
        <path d="M125,170 C85,150 100,75 160,95" stroke="url(#giraffeSpots1)" stroke-width="14" fill="none" stroke-linecap="round"/>
        <path d="M125,170 C85,150 100,75 160,95" stroke="#8B4513" stroke-width="4.5" fill="none" stroke-dasharray="4 2" stroke-linecap="round" transform="translate(0,-7)"/>

        <ellipse cx="165" cy="90" rx="11" ry="17" fill="url(#giraffeBodyGradient1)" transform="rotate(25 165 90)"/>
        <ellipse cx="165" cy="90" rx="11" ry="17" fill="url(#giraffeSpots1)" transform="rotate(25 165 90)"/>
        <line x1="160" y1="75" x2="158" y2="65" stroke="#8B4513" stroke-width="3.5" stroke-linecap="round"/><circle cx="158" cy="63" r="2.5" fill="#4A2E2D"/>
        <line x1="170" y1="75" x2="172" y2="65" stroke="#8B4513" stroke-width="3.5" stroke-linecap="round"/><circle cx="172" cy="63" r="2.5" fill="#4A2E2D"/>
        <circle cx="173" cy="85" r="2.5" fill="black"/><circle cx="173.5" cy="84.5" r="0.8" fill="white"/>
        <ellipse cx="165" cy="105" rx="4.5" ry="2.5" fill="#D2691E" transform="rotate(25 165 90)"/>

        <path d="M130,190 Q105,220 100,250" stroke="url(#giraffeBodyGradient1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M130,190 Q105,220 100,250" stroke="url(#giraffeSpots1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="100" cy="250" r="5" fill="#4A2E2D"/> 
        <path d="M170,195 Q185,230 190,265" stroke="url(#giraffeBodyGradient1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M170,195 Q185,230 190,265" stroke="url(#giraffeSpots1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="190" cy="265" r="5" fill="#4A2E2D"/> 
        <path d="M140,180 Q165,200 170,220" stroke="url(#giraffeBodyGradient1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M140,180 Q165,200 170,220" stroke="url(#giraffeSpots1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="170" cy="220" r="5" fill="#4A2E2D"/> 
        <path d="M155,190 C145,195 135,210 125,235" stroke="url(#giraffeBodyGradient1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <path d="M155,190 C145,195 135,210 125,235" stroke="url(#giraffeSpots1)" stroke-width="9" fill="none" stroke-linecap="round"/>
        <circle cx="125" cy="235" r="5" fill="#4A2E2D"/> 

        <path d="M183,170 Q193,185 198,175" stroke="#D2691E" stroke-width="3" fill="none" stroke-linecap="round"/>
        <circle cx="198" cy="175" r="4" fill="#4A2E2D"/> 
    </g>

    <g id="discoBallGroup" transform="translate(150, 55)">
        <line x1="0" y1="-25" x2="0" y2="-55" stroke="silver" stroke-width="1.5"/>
        <circle cx="0" cy="-25" r="25" fill="url(#discoShine)" />
        <circle cx="0" cy="-25" r="25" fill="url(#discoPattern)" />
        
        <polygon points="0,-25 -15,120 15,120" fill="url(#beamGradient)" opacity="0.5" filter="url(#beamFilter)" transform="rotate(20 0 -25)"/>
        <polygon points="0,-25 -12,130 12,130" fill="url(#beamGradient)" opacity="0.4" filter="url(#beamFilter)" transform="rotate(-20 0 -25)"/>
        <polygon points="0,-25 -10,125 10,125" fill="url(#beamGradient)" opacity="0.3" filter="url(#beamFilter)" transform="rotate(55 0 -25)"/>
        <polygon points="0,-25 -11,115 11,115" fill="url(#beamGradient)" opacity="0.4" filter="url(#beamFilter)" transform="rotate(-65 0 -25)"/>
    </g>
</svg>
Gemini Pro 1.5
Player 2
ELO: 885.62 882.235 (-3.4)
SVG by Gemini Pro 1.5 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="disco-ball" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff" />
      <stop offset="100%" stop-color="#eee" />
    </radialGradient>
    <pattern id="giraffe-spots" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="#964B00" />
    </pattern>
  </defs>

  <circle cx="150" cy="50" r="25" fill="url(#disco-ball)" />
  <g transform="translate(50, 100) rotate(15)">
    <path d="M 0 0 c 20 -20 50 0 70 10 s 30 50 50 60 c 10 5 40 10 50 20" stroke="url(#giraffe-spots)" stroke-width="20" fill="none" stroke-linecap="round" />
    <ellipse cx="50" cy="0" rx="10" ry="5" fill="#F0E68C" />
    <ellipse cx="55" cy="-5" rx="3" ry="2" fill="black" />
    <ellipse cx="45" cy="-5" rx="3" ry="2" fill="black" />
  </g>
  <g transform="translate(100, 120) rotate(-25)">
    <path d="M 0 0 c -20 -30 10 -10 30 0 s 50 50 60 70 c 5 10 10 30 20 40" stroke="url(#giraffe-spots)" stroke-width="20" fill="none" stroke-linecap="round" />
    <ellipse cx="0" cy="0" rx="10" ry="5" fill="#F0E68C" />
    <ellipse cx="5" cy="-5" rx="3" ry="2" fill="black" />
    <ellipse cx="-5" cy="-5" rx="3" ry="2" fill="black" />
  </g>

  <g transform="translate(100, 220)">
    <circle cx="40" cy="0" r="15" fill="red" />
    <circle cx="110" cy="0" r="15" fill="blue" />
    <circle cx="70" cy="50" r="15" fill="yellow" />
    <circle cx="140" cy="50" r="15" fill="green" />
  </g>
  <rect x="20" y="250" width="30" height="10" fill="blue" transform="rotate(15, 35, 255)" />
  <rect x="200" y="220" width="30" height="10" fill="yellow" transform="rotate(-10, 215, 225)" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Gemini 2.5 Pro Preview 05-06 Player 1

Judge's Analysis

    Player 1's submission is more visually appealing, with a vibrant disco setting, detailed giraffes, and a clear depiction of a Twister game.

    The composition is creative and adheres strongly to the prompt.

    Player 2's image, while recognizable, lacks technical quality, detail, and visual coherence, making it less engaging 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
91
Player 2
16
Rectangles

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

Player 1
3
Player 2
2
Circles

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

Player 1
35
Player 2
6
Ellipses

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

Player 1
15
Player 2
6
Lines

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

Player 1
5
Player 2
—
Polygons

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

Player 1
5
Player 2
—
Paths

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

Player 1
28
Player 2
2
Groups

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

Player 1
4
Player 2
3

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
1
Patterns

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

Player 1
3
Player 2
1
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
40
Player 2
2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
30
Player 2
9

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
18
Player 2
5

Complexity Metrics

Path Commands

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

Player 1
80
Player 2
8
Max Group Nesting

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

Player 1
—
Player 2
—
Defs Elements

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

Player 1
11
Player 2
2
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 #2742 May 10, 2025

"An octopus painting a self-portrait with all eight arms."

P1
SVG by Gemini Pro 1.5
P2
SVG by Gemini 2.5 Pro Preview 05-06
Gemini Pro 1.5
vs
Gemini 2.5 Pro Preview 05-06
View
Match #2579 May 09, 2025

"A floating island with a lone tree, roots dangling into the clouds below."

P1
SVG by Gemini 2.5 Pro Preview 05-06
P2
SVG by Gemini Pro 1.5
Gemini 2.5 Pro Preview 05-06
vs
Gemini Pro 1.5
View
Match #2319 May 09, 2025

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

P1
SVG by Gemini 2.5 Pro Preview 05-06
P2
SVG by Gemini Pro 1.5
Gemini 2.5 Pro Preview 05-06
vs
Gemini Pro 1.5
View
Match #2318 May 09, 2025

"An octopus juggling planets underwater in a glowing coral reef."

P1
SVG by Gemini Pro 1.5
P2
SVG by Gemini 2.5 Pro Preview 05-06
Gemini Pro 1.5
vs
Gemini 2.5 Pro Preview 05-06
View