GPT-4o
Challenge Creator
Creative Challenge
"Two giraffes tangled in a spaghetti fight under a disco ball."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Background gradient -->
<linearGradient id="floorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#330033" />
<stop offset="100%" stop-color="#660066" />
</linearGradient>
<!-- Disco ball reflection gradient -->
<radialGradient id="discoReflection" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.8" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
<!-- Spaghetti texture -->
<linearGradient id="spaghettiGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F9E0A2" />
<stop offset="50%" stop-color="#F4CB64" />
<stop offset="100%" stop-color="#F9E0A2" />
</linearGradient>
<!-- Giraffe pattern -->
<pattern id="giraffePattern" patternUnits="userSpaceOnUse" width="30" height="30">
<rect width="30" height="30" fill="#F9D976" />
<path d="M0,0 L15,15 L0,30 Z" fill="#D68C3F" />
<path d="M30,0 L15,15 L30,30 Z" fill="#D68C3F" />
</pattern>
<!-- Disco light filter -->
<filter id="discoLight">
<feGaussianBlur stdDeviation="2" />
<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>
<!-- Sauce splatter filter -->
<filter id="sauceFilter" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#floorGradient)" />
<!-- Dance floor tiles -->
<g id="danceFloor">
<rect x="0" y="200" width="300" height="100" fill="#220022" />
<g opacity="0.7">
<rect x="0" y="200" width="30" height="30" fill="white" />
<rect x="60" y="200" width="30" height="30" fill="white" />
<rect x="120" y="200" width="30" height="30" fill="white" />
<rect x="180" y="200" width="30" height="30" fill="white" />
<rect x="240" y="200" width="30" height="30" fill="white" />
<rect x="30" y="230" width="30" height="30" fill="white" />
<rect x="90" y="230" width="30" height="30" fill="white" />
<rect x="150" y="230" width="30" height="30" fill="white" />
<rect x="210" y="230" width="30" height="30" fill="white" />
<rect x="270" y="230" width="30" height="30" fill="white" />
<rect x="0" y="260" width="30" height="30" fill="white" />
<rect x="60" y="260" width="30" height="30" fill="white" />
<rect x="120" y="260" width="30" height="30" fill="white" />
<rect x="180" y="260" width="30" height="30" fill="white" />
<rect x="240" y="260" width="30" height="30" fill="white" />
</g>
</g>
<!-- Disco light spots (bottom layer) -->
<g id="discoLightsBottom">
<circle cx="50" cy="150" r="15" fill="red" opacity="0.3" filter="url(#discoLight)" />
<circle cx="90" cy="120" r="12" fill="blue" opacity="0.3" filter="url(#discoLight)" />
<circle cx="200" cy="100" r="18" fill="green" opacity="0.3" filter="url(#discoLight)" />
<circle cx="250" cy="160" r="14" fill="yellow" opacity="0.3" filter="url(#discoLight)" />
</g>
<!-- First Giraffe (behind) -->
<g id="giraffe1">
<!-- Back Legs -->
<rect x="75" y="220" width="10" height="70" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1" rx="4" ry="4" />
<rect x="95" y="220" width="10" height="75" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1" rx="4" ry="4" />
<!-- Body -->
<ellipse cx="90" cy="200" rx="25" ry="40" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1.5" />
<!-- Tail -->
<path d="M70,190 C65,185 60,195 65,205" fill="none" stroke="#D68C3F" stroke-width="2" />
<circle cx="65" cy="207" r="3" fill="#333" />
<!-- Neck curving in toward center -->
<path d="M90,170 C95,150 105,130 120,110 C135,90 140,80 150,75" fill="none" stroke="url(#giraffePattern)" stroke-width="18" stroke-linejoin="round" stroke-linecap="round" />
<!-- Head -->
<ellipse cx="155" cy="70" rx="14" ry="9" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1" transform="rotate(30 155 70)" />
<!-- Muzzle -->
<ellipse cx="162" cy="72" rx="7" ry="4" fill="#F9D976" stroke="#D68C3F" stroke-width="0.5" transform="rotate(30 162 72)" />
<!-- Eyes -->
<circle cx="158" cy="67" r="2" fill="#333333" />
<!-- Ears -->
<path d="M163,65 L168,60 L165,64" fill="#F9D976" stroke="#D68C3F" stroke-width="1" />
<!-- Ossicones (horn-like structures) -->
<path d="M150,65 L147,55" fill="none" stroke="#D68C3F" stroke-width="2" />
<path d="M160,62 L163,52" fill="none" stroke="#D68C3F" stroke-width="2" />
<circle cx="147" cy="55" r="2" fill="#D68C3F" />
<circle cx="163" cy="52" r="2" fill="#D68C3F" />
<!-- Additional spots on neck/body -->
<g id="giraffe1Spots">
<ellipse cx="90" cy="185" rx="6" ry="4" fill="#D68C3F" transform="rotate(10 90 185)" />
<ellipse cx="105" cy="175" rx="5" ry="3" fill="#D68C3F" transform="rotate(20 105 175)" />
<ellipse cx="100" cy="165" rx="4" ry="3" fill="#D68C3F" />
<ellipse cx="95" cy="155" rx="5" ry="4" fill="#D68C3F" transform="rotate(-10 95 155)" />
<ellipse cx="102" cy="145" rx="4" ry="3" fill="#D68C3F" transform="rotate(15 102 145)" />
<ellipse cx="110" cy="135" rx="4" ry="3" fill="#D68C3F" transform="rotate(25 110 135)" />
<ellipse cx="118" cy="125" rx="5" ry="3" fill="#D68C3F" transform="rotate(35 118 125)" />
<ellipse cx="125" cy="115" rx="4" ry="3" fill="#D68C3F" transform="rotate(45 125 115)" />
<ellipse cx="133" cy="105" rx="3" ry="2" fill="#D68C3F" transform="rotate(55 133 105)" />
<ellipse cx="140" cy="95" rx="4" ry="2" fill="#D68C3F" transform="rotate(65 140 95)" />
<ellipse cx="147" cy="85" rx="3" ry="2" fill="#D68C3F" transform="rotate(75 147 85)" />
</g>
</g>
<!-- Second Giraffe -->
<g id="giraffe2">
<!-- Back Legs -->
<rect x="195" y="220" width="10" height="75" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1" rx="4" ry="4" />
<rect x="215" y="220" width="10" height="70" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1" rx="4" ry="4" />
<!-- Body -->
<ellipse cx="210" cy="200" rx="25" ry="40" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1.5" />
<!-- Tail -->
<path d="M230,190 C235,185 240,195 235,205" fill="none" stroke="#D68C3F" stroke-width="2" />
<circle cx="235" cy="207" r="3" fill="#333" />
<!-- Neck curving in toward center -->
<path d="M210,170 C205,150 195,130 180,110 C165,90 160,80 150,75" fill="none" stroke="url(#giraffePattern)" stroke-width="18" stroke-linejoin="round" stroke-linecap="round" />
<!-- Head -->
<ellipse cx="145" cy="70" rx="14" ry="9" fill="url(#giraffePattern)" stroke="#D68C3F" stroke-width="1" transform="rotate(-30 145 70)" />
<!-- Muzzle -->
<ellipse cx="138" cy="72" rx="7" ry="4" fill="#F9D976" stroke="#D68C3F" stroke-width="0.5" transform="rotate(-30 138 72)" />
<!-- Eyes -->
<circle cx="142" cy="67" r="2" fill="#333333" />
<!-- Ears -->
<path d="M137,65 L132,60 L135,64" fill="#F9D976" stroke="#D68C3F" stroke-width="1" />
<!-- Ossicones (horn-like structures) -->
<path d="M150,65 L153,55" fill="none" stroke="#D68C3F" stroke-width="2" />
<path d="M140,62 L137,52" fill="none" stroke="#D68C3F" stroke-width="2" />
<circle cx="153" cy="55" r="2" fill="#D68C3F" />
<circle cx="137" cy="52" r="2" fill="#D68C3F" />
<!-- Additional spots on neck/body -->
<g id="giraffe2Spots">
<ellipse cx="210" cy="185" rx="6" ry="4" fill="#D68C3F" transform="rotate(-10 210 185)" />
<ellipse cx="195" cy="175" rx="5" ry="3" fill="#D68C3F" transform="rotate(-20 195 175)" />
<ellipse cx="200" cy="165" rx="4" ry="3" fill="#D68C3F" />
<ellipse cx="205" cy="155" rx="5" ry="4" fill="#D68C3F" transform="rotate(10 205 155)" />
<ellipse cx="198" cy="145" rx="4" ry="3" fill="#D68C3F" transform="rotate(-15 198 145)" />
<ellipse cx="190" cy="135" rx="4" ry="3" fill="#D68C3F" transform="rotate(-25 190 135)" />
<ellipse cx="182" cy="125" rx="5" ry="3" fill="#D68C3F" transform="rotate(-35 182 125)" />
<ellipse cx="175" cy="115" rx="4" ry="3" fill="#D68C3F" transform="rotate(-45 175 115)" />
<ellipse cx="167" cy="105" rx="3" ry="2" fill="#D68C3F" transform="rotate(-55 167 105)" />
<ellipse cx="160" cy="95" rx="4" ry="2" fill="#D68C3F" transform="rotate(-65 160 95)" />
<ellipse cx="153" cy="85" rx="3" ry="2" fill="#D68C3F" transform="rotate(-75 153 85)" />
</g>
</g>
<!-- Spaghetti around giraffes -->
<g id="spaghetti">
<!-- Various spaghetti strands intertwining around the giraffes -->
<path d="M80,160 C100,140 140,160 150,120 C160,80 180,160 220,140" fill="none" stroke="url(#spaghettiGradient)" stroke-width="4" stroke-linecap="round" />
<path d="M95,190 C120,130 150,170 150,120 C150,70 180,130 200,180" fill="none" stroke="url(#spaghettiGradient)" stroke-width="4" stroke-linecap="round" />
<path d="M90,170 C110,150 130,180 150,85 C170,90 190,180 210,150" fill="none" stroke="url(#spaghettiGradient)" stroke-width="4" stroke-linecap="round" />
<path d="M100,180 C115,170 140,150 150,150 C160,150 185,170 200,180" fill="none" stroke="url(#spaghettiGradient)" stroke-width="4" stroke-linecap="round" />
<path d="M85,200 C105,190 135,210 150,95 C165,100 195,210 215,200" fill="none" stroke="url(#spaghettiGradient)" stroke-width="4" stroke-linecap="round" />
<!-- Flying spaghetti bits -->
<path d="M125,100 C130,90 140,95 145,85" fill="none" stroke="url(#spaghettiGradient)" stroke-width="3" stroke-linecap="round" />
<path d="M155,100 C150,90 160,95 155,85" fill="none" stroke="url(#spaghettiGradient)" stroke-width="3" stroke-linecap="round" />
<path d="M140,120 C145,110 135,105 140,95" fill="none" stroke="url(#spaghettiGradient)" stroke-width="3" stroke-linecap="round" />
<path d="M170,130 C175,120 185,125 190,115" fill="none" stroke="url(#spaghettiGradient)" stroke-width="3" stroke-linecap="round" />
<path d="M120,140 C125,130 115,125 120,115" fill="none" stroke="url(#spaghettiGradient)" stroke-width="3" stroke-linecap="round" />
</g>
<!-- Sauce splatter -->
<g id="sauceSplatter" filter="url(#sauceFilter)">
<circle cx="130" cy="140" r="6" fill="#D1323C" opacity="0.7" />
<circle cx="180" cy="150" r="4" fill="#D1323C" opacity="0.7" />
<circle cx="95" cy="170" r="5" fill="#D1323C" opacity="0.7" />
<circle cx="205" cy="165" r="7" fill="#D1323C" opacity="0.7" />
<circle cx="150" cy="110" r="5" fill="#D1323C" opacity="0.7" />
<circle cx="120" cy="100" r="4" fill="#D1323C" opacity="0.7" />
<circle cx="180" cy="100" r="3" fill="#D1323C" opacity="0.7" />
<!-- Sauce drips -->
<path d="M130,140 C132,145 128,148 130,155" fill="none" stroke="#D1323C" stroke-width="2" opacity="0.7" />
<path d="M180,150 C182,155 178,158 180,165" fill="none" stroke="#D1323C" stroke-width="1.5" opacity="0.7" />
<path d="M205,165 C207,170 203,173 205,180" fill="none" stroke="#D1323C" stroke-width="2" opacity="0.7" />
<path d="M150,110 C152,115 148,118 150,125" fill="none" stroke="#D1323C" stroke-width="2" opacity="0.7" />
</g>
<!-- Action lines to indicate movement -->
<g id="actionLines" stroke="#FFFFFF" stroke-width="1.5" opacity="0.6">
<path d="M115,120 L125,130" />
<path d="M118,123 L128,133" />
<path d="M185,120 L175,130" />
<path d="M182,123 L172,133" />
<path d="M130,100 L140,90" />
<path d="M170,100 L160,90" />
<path d="M145,110 L155,110" />
<path d="M145,115 L155,115" />
</g>
<!-- "Fight cloud" behind the heads -->
<g id="fightCloud" opacity="0.4">
<path d="M130,90 C140,80 160,80 170,90 C180,80 190,90 185,100 C195,110 180,120 170,115 C160,125 140,125 130,115 C120,120 105,110 115,100 C105,90 120,80 130,90 Z" fill="white" />
</g>
<!-- Disco ball with chain -->
<g id="discoBall">
<!-- Chain -->
<line x1="150" y1="0" x2="150" y2="30" stroke="#999999" stroke-width="2" />
<!-- Ball -->
<circle cx="150" cy="40" r="20" fill="#DDDDDD" stroke="#999999" stroke-width="1" />
<!-- Reflective facets -->
<g id="discoFacets">
<path d="M150,20 L140,30 L150,40 L160,30 Z" fill="white" opacity="0.9" />
<path d="M150,40 L140,50 L150,60 L160,50 Z" fill="white" opacity="0.9" />
<path d="M130,40 L140,30 L150,40 L140,50 Z" fill="white" opacity="0.9" />
<path d="M150,40 L160,30 L170,40 L160,50 Z" fill="white" opacity="0.9" />
<path d="M135,25 L145,35 L135,45 Z" fill="white" opacity="0.8" />
<path d="M165,25 L155,35 L165,45 Z" fill="white" opacity="0.8" />
<circle cx="150" cy="40" r="20" fill="none" stroke="white" stroke-width="0.5" />
<circle cx="150" cy="40" r="15" fill="none" stroke="white" stroke-width="0.5" />
<circle cx="150" cy="40" r="10" fill="none" stroke="white" stroke-width="0.5" />
</g>
</g>
<!-- Disco light reflections (top layer) -->
<g id="discoReflections">
<circle cx="60" cy="120" r="15" fill="url(#discoReflection)" opacity="0.5" />
<circle cx="240" cy="130" r="12" fill="url(#discoReflection)" opacity="0.5" />
<circle cx="150" cy="200" r="20" fill="url(#discoReflection)" opacity="0.5" />
<circle cx="100" cy="80" r="10" fill="url(#discoReflection)" opacity="0.5" />
<circle cx="200" cy="70" r="15" fill="url(#discoReflection)" opacity="0.5" />
</g>
<!-- Disco light spots (top layer) -->
<g id="discoLightsTop">
<circle cx="120" cy="180" r="16" fill="purple" opacity="0.3" filter="url(#discoLight)" />
<circle cx="70" cy="220" r="12" fill="cyan" opacity="0.3" filter="url(#discoLight)" />
<circle cx="180" cy="230" r="15" fill="pink" opacity="0.3" filter="url(#discoLight)" />
<circle cx="230" cy="190" r="13" fill="orange" opacity="0.3" filter="url(#discoLight)" />
</g>
</svg>
<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="spaghetti" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0 C 5 5, 5 -5, 10 0" stroke="#e9b425" stroke-width="2" fill="none" />
</pattern>
</defs>
<circle cx="150" cy="50" r="25" fill="url(#disco-ball)" />
<g transform="translate(50, 75)">
<path d="M30 10 c 10 30, 20 50, 0 80" stroke="#f2e9d7" stroke-width="15" fill="none" stroke-linecap="round" />
<ellipse cx="30" cy="10" rx="15" ry="10" fill="#f2e9d7" />
<circle cx="30" cy="15" r="5" fill="#000"/>
<path d="M50 110 c -10 20, 10 40, 10 40" stroke="#f2e9d7" stroke-width="15" fill="none" stroke-linecap="round"/>
<ellipse cx="60" cy="150" rx="15" ry="10" fill="#f2e9d7" transform="rotate(-10 60 150)"/>
<circle cx="65" cy="155" r="5" fill="#000"/>
</g>
<g transform="translate(100, 75)">
<path d="M30 10 c -10 30, -20 50, 0 80" stroke="#e8d6b7" stroke-width="15" fill="none" stroke-linecap="round" />
<ellipse cx="30" cy="10" rx="15" ry="10" fill="#e8d6b7" />
<circle cx="30" cy="15" r="5" fill="#000"/>
<path d="M10 110 c 10 20, -10 40, -10 40" stroke="#e8d6b7" stroke-width="15" fill="none" stroke-linecap="round"/>
<ellipse cx="0" cy="150" rx="15" ry="10" fill="#e8d6b7" transform="rotate(10 0 150)"/>
<circle cx="-5" cy="155" r="5" fill="#000"/>
</g>
<path d="M50 150 C 100 100, 150 120, 200 150" stroke="url(#spaghetti)" stroke-width="10" fill="none" />
<path d="M70 180 C 130 150, 180 200, 230 180" stroke="url(#spaghetti)" stroke-width="10" fill="none" />
<path d="M100 200 C 150 180, 200 220, 250 200" stroke="url(#spaghetti)" stroke-width="10" fill="none" />
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's submission is more visually appealing and demonstrates stronger technical quality.
The giraffes are well-rendered with clear patterns, and the use of lighting and color creates a lively disco atmosphere.
In contrast, Player 2's image is simplistic and lacks detail, making it less engaging and less aligned with the prompt's whimsical nature.
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
124
Player 2
17
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
22
Player 2
—
Circles
The number of circle elements (circle) in the SVG.
Player 1
32
Player 2
5
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
28
Player 2
4
Lines
The number of line elements (line) in the SVG.
Player 1
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
41
Player 2
8
Groups
The number of group elements (g) in the SVG.
Player 1
15
Player 2
2
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
3
Player 2
1
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
2
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
33
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
40
Player 2
8
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
21
Player 2
6
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
24
Player 2
4
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
117
Player 2
16
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
6
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 #2636
May 09, 2025
"A snail racing a cheetah on a winding desert road."
P1
P2
Match #2556
May 09, 2025
"Two penguins jousting on icebergs with candy canes under a twilight sky."
P1
P2
Match #828
Mar 13, 2025
"A snail with a city skyline on its shell at sunset"
P1
P2
Match #301
Mar 13, 2025
"A cat made of clouds napping on a crescent moon"
P1
P2
