GPT-4o
Challenge Creator
Creative Challenge
"A jellyfish conducting an underwater orchestra of fish and crabs."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<defs>
<linearGradient id="oceanBg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#003366"/>
<stop offset="100%" stop-color="#001f4d"/>
</linearGradient>
<!-- Gradient for jellyfish body -->
<radialGradient id="jellyGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff66cc"/>
<stop offset="100%" stop-color="#cc3399"/>
</radialGradient>
<!-- Gradient for fins -->
<linearGradient id="finGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff99cc"/>
<stop offset="100%" stop-color="#ff66cc"/>
</linearGradient>
<!-- Gradient for fish -->
<linearGradient id="fishGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffd700"/>
<stop offset="100%" stop-color="#ff8c00"/>
</linearGradient>
<!-- Pattern for crab shells -->
<pattern id="crabShell" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="4" fill="#e67373"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#oceanBg)" />
<!-- Jellyfish Main Body -->
<g id="jellyfish" transform="translate(150,100)">
<!-- Bell -->
<ellipse cx="0" cy="0" rx="50" ry="70" fill="url(#jellyGradient)" stroke="#fff" stroke-width="2"/>
<!-- Fins / Tentacles -->
<g id="tentacles">
<path d="M -30,70 Q -40,120 -20,170" fill="none" stroke="rgba(255, 102, 204, 0.7)" stroke-width="3" opacity="0.8"/>
<path d="M 0,70 Q 0,125 0,180" fill="none" stroke="rgba(255, 102, 204, 0.7)" stroke-width="3" opacity="0.8"/>
<path d="M 30,70 Q 40,120 20,170" fill="none" stroke="rgba(255, 102, 204, 0.7)" stroke-width="3" opacity="0.8"/>
</g>
<!-- Eyestalks -->
<g id="eyestalks">
<line x1="-15" y1="-20" x2="-15" y2="-40" stroke="#fff" stroke-width="2"/>
<circle cx="-15" cy="-45" r="3" fill="#fff"/>
<line x1="15" y1="-20" x2="15" y2="-40" stroke="#fff" stroke-width="2"/>
<circle cx="15" cy="-45" r="3" fill="#fff"/>
</g>
</g>
<!-- Conducting baton -->
<g id="baton" transform="translate(150,70)">
<rect x="-3" y="-50" width="6" height="50" fill="#fff"/>
</g>
<!-- Conducting Flashes -->
<circle cx="150" cy="30" r="10" fill="#ffff66" opacity="0.5" animation="r" dur="1s" repeatCount="indefinite"/>
<!-- Fish Orchestra -->
<!-- Fish 1 -->
<g id="fish1" transform="translate(80,160)">
<ellipse cx="0" cy="0" rx="15" ry="7" fill="url(#fishGradient)" stroke="#ffd700" stroke-width="1"/>
<polygon points="15,0 25,3 25,-3" fill="#ffd700"/>
<circle cx="-10" cy="0" r="2" fill="#000"/>
</g>
<!-- Fish 2 -->
<g id="fish2" transform="translate(220,190)">
<ellipse cx="0" cy="0" rx="10" ry="4" fill="url(#fishGradient)" stroke="#ff8c00" stroke-width="1"/>
<polygon points="10,0 15,2 15,-2" fill="#ff8c00"/>
<circle cx="-8" cy="0" r="1.5" fill="#000"/>
</g>
<!-- Fish 3 -->
<g id="fish3" transform="translate(150,220)">
<ellipse cx="0" cy="0" rx="12" ry="5" fill="url(#fishGradient)" stroke="#ffd700" stroke-width="1"/>
<polygon points="12,0 20,4 20,-4" fill="#ffd700"/>
<circle cx="-9" cy="0" r="1.8" fill="#000"/>
</g>
<!-- Crabs conducting -->
<!-- Crab 1 -->
<g id="crab1" transform="translate(100,250)">
<circle cx="0" cy="0" r="5" fill="url(#crabShell)" stroke="#cc3333" stroke-width="1"/>
<!-- Claws -->
<line x1="0" y1="0" x2="-8" y2="-3" stroke="#cc3333" stroke-width="1"/>
<line x1="0" y1="0" x2="8" y2="-3" stroke="#cc3333" stroke-width="1"/>
</g>
<!-- Crab 2 -->
<g id="crab2" transform="translate(200,250)">
<circle cx="0" cy="0" r="5" fill="url(#crabShell)" stroke="#cc3333" stroke-width="1"/>
<!-- Claws -->
<line x1="0" y1="0" x2="-8" y2="3" stroke="#cc3333" stroke-width="1"/>
<line x1="0" y1="0" x2="8" y2="3" stroke="#cc3333" stroke-width="1"/>
</g>
<!-- Artistic Metaphor: Light Rays from Jellyfish -->
<g stroke="#66ffff" stroke-opacity="0.3" stroke-width="2">
<line x1="150" y1="100" x2="150" y2="50"/>
<line x1="150" y1="100" x2="120" y2="70"/>
<line x1="150" y1="100" x2="180" y2="70"/>
<line x1="150" y1="100" x2="130" y2="90"/>
<line x1="150" y1="100" x2="170" y2="90"/>
</g>
<!-- Additional particles for depth -->
<circle cx="50" cy="200" r="1" fill="#fff" opacity="0.2"/>
<circle cx="250" cy="180" r="1" fill="#fff" opacity="0.2"/>
<circle cx="70" cy="130" r="0.8" fill="#fff" opacity="0.2"/>
<circle cx="230" cy="250" r="1" fill="#fff" opacity="0.2"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="waterGradient" cx="50%" cy="20%" r="80%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
<stop offset="50%" style="stop-color:#2E5B8A;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1A3A5C;stop-opacity:1" />
</radialGradient>
<radialGradient id="jellyfishGradient" cx="50%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#E6E6FA;stop-opacity:0.9" />
<stop offset="40%" style="stop-color:#DDA0DD;stop-opacity:0.7" />
<stop offset="100%" style="stop-color:#9370DB;stop-opacity:0.5" />
</radialGradient>
<linearGradient id="fishGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF8C00;stop-opacity:1" />
</linearGradient>
<linearGradient id="fishGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF6347;stop-opacity:1" />
<stop offset="100%" style="stop-color:#DC143C;stop-opacity:1" />
</linearGradient>
<linearGradient id="fishGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#32CD32;stop-opacity:1" />
<stop offset="100%" style="stop-color:#228B22;stop-opacity:1" />
</linearGradient>
<radialGradient id="crabGradient" cx="40%" cy="30%" r="60%">
<stop offset="0%" style="stop-color:#FF7F50;stop-opacity:1" />
<stop offset="100%" style="stop-color:#B22222;stop-opacity:1" />
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#waterGradient)"/>
<!-- Ambient bubbles -->
<g opacity="0.6">
<circle cx="50" cy="80" r="3" fill="#87CEEB"/>
<circle cx="250" cy="120" r="5" fill="#B0E0E6"/>
<circle cx="30" cy="200" r="2" fill="#87CEEB"/>
<circle cx="270" cy="250" r="4" fill="#B0E0E6"/>
<circle cx="120" cy="90" r="2" fill="#87CEEB"/>
<circle cx="180" cy="260" r="3" fill="#B0E0E6"/>
</g>
<!-- Seaweed backdrop -->
<g stroke="#228B22" stroke-width="4" fill="none" opacity="0.3">
<path d="M15 300 Q25 280 15 260 Q5 240 15 220 Q25 200 15 180 Q5 160 15 140"/>
<path d="M285 300 Q275 280 285 260 Q295 240 285 220 Q275 200 285 180"/>
<path d="M40 300 Q50 270 40 240 Q30 210 40 180"/>
</g>
<!-- Jellyfish conductor (main focus) -->
<g transform="translate(150, 65)">
<!-- Bell with glow -->
<ellipse cx="0" cy="0" rx="45" ry="35" fill="url(#jellyfishGradient)" filter="url(#glow)"/>
<ellipse cx="0" cy="0" rx="35" ry="25" fill="#E6E6FA" opacity="0.4"/>
<!-- Conducting tentacles with dynamic curves -->
<path d="M-25 30 Q-40 50 -30 70 Q-20 90 -35 110 Q-25 125 -15 140" stroke="#9370DB" stroke-width="4" fill="none" opacity="0.8"/>
<path d="M0 35 Q-15 55 10 75 Q30 95 15 115 Q5 130 20 145" stroke="#9370DB" stroke-width="3" fill="none" opacity="0.8"/>
<path d="M25 30 Q40 50 30 70 Q20 90 35 110 Q25 125 15 140" stroke="#9370DB" stroke-width="4" fill="none" opacity="0.8"/>
<path d="M-12 35 Q-25 60 -5 85 Q15 105 0 125 Q-10 140 5 155" stroke="#9370DB" stroke-width="2" fill="none" opacity="0.6"/>
<path d="M12 35 Q25 60 5 85 Q-15 105 0 125 Q10 140 -5 155" stroke="#9370DB" stroke-width="2" fill="none" opacity="0.6"/>
<!-- Conductor's baton with magical sparkle -->
<line x1="30" y1="15" x2="45" y2="5" stroke="#FFD700" stroke-width="3"/>
<circle cx="45" cy="5" r="3" fill="#FFD700" filter="url(#glow)"/>
<circle cx="48" cy="2" r="1" fill="#FFFF00"/>
<circle cx="42" cy="8" r="1" fill="#FFFF00"/>
</g>
<!-- Orchestra arrangement in semicircle -->
<!-- Front row - Bass/Cello fish -->
<g transform="translate(80, 190)">
<ellipse cx="0" cy="0" rx="22" ry="14" fill="url(#fishGradient1)"/>
<path d="M-22 0 L-35 -10 L-35 10 Z" fill="url(#fishGradient1)"/>
<circle cx="15" cy="-4" r="3" fill="#000"/>
<circle cx="17" cy="-4" r="1" fill="#FFF"/>
<!-- Violin bow -->
<line x1="8" y1="-18" x2="20" y2="-30" stroke="#8B4513" stroke-width="3"/>
<line x1="8" y1="-15" x2="20" y2="-27" stroke="#FFF" stroke-width="1"/>
</g>
<g transform="translate(220, 195)">
<ellipse cx="0" cy="0" rx="20" ry="12" fill="url(#fishGradient2)"/>
<path d="M-20 0 L-32 -8 L-32 8 Z" fill="url(#fishGradient2)"/>
<circle cx="13" cy="-3" r="3" fill="#000"/>
<circle cx="15" cy="-3" r="1" fill="#FFF"/>
<line x1="5" y1="-15" x2="18" y2="-25" stroke="#8B4513" stroke-width="3"/>
</g>
<!-- Middle row - Violin fish -->
<g transform="translate(110, 160)">
<ellipse cx="0" cy="0" rx="16" ry="9" fill="url(#fishGradient3)"/>
<path d="M-16 0 L-25 -6 L-25 6 Z" fill="url(#fishGradient3)"/>
<circle cx="10" cy="-2" r="2" fill="#000"/>
<circle cx="11" cy="-2" r="0.5" fill="#FFF"/>
<line x1="6" y1="-12" x2="15" y2="-20" stroke="#8B4513" stroke-width="2"/>
</g>
<g transform="translate(190, 165)">
<ellipse cx="0" cy="0" rx="17" ry="10" fill="#FF69B4"/>
<path d="M-17 0 L-27 -7 L-27 7 Z" fill="#FF69B4"/>
<circle cx="11" cy="-2" r="2" fill="#000"/>
<circle cx="12" cy="-2" r="0.5" fill="#FFF"/>
<line x1="7" y1="-13" x2="17" y2="-22" stroke="#8B4513" stroke-width="2"/>
</g>
<!-- Back row - Woodwind fish -->
<g transform="translate(150, 125)">
<ellipse cx="0" cy="0" rx="14" ry="7" fill="#40E0D0"/>
<path d="M-14 0 L-22 -5 L-22 5 Z" fill="#40E0D0"/>
<circle cx="8" cy="-1" r="1.5" fill="#000"/>
<circle cx="8.5" cy="-1" r="0.5" fill="#FFF"/>
<!-- Flute -->
<line x1="-8" y1="-10" x2="15" y2="-10" stroke="#C0C0C0" stroke-width="3"/>
<circle cx="-5" cy="-10" r="1" fill="#C0C0C0"/>
<circle cx="0" cy="-10" r="1" fill="#C0C0C0"/>
<circle cx="5" cy="-10" r="1" fill="#C0C0C0"/>
</g>
<!-- Crab percussion section -->
<g transform="translate(60, 245)">
<ellipse cx="0" cy="0" rx="18" ry="12" fill="url(#crabGradient)"/>
<!-- Claws -->
<ellipse cx="-25" cy="-6" rx="10" ry="5" fill="url(#crabGradient)"/>
<ellipse cx="25" cy="-6" rx="10" ry="5" fill="url(#crabGradient)"/>
<!-- Drumsticks -->
<line x1="-30" y1="-18" x2="-20" y2="-28" stroke="#8B4513" stroke-width="4"/>
<line x1="30" y1="-18" x2="20" y2="-28" stroke="#8B4513" stroke-width="4"/>
<circle cx="-20" cy="-28" r="3" fill="#8B4513"/>
<circle cx="20" cy="-28" r="3" fill="#8B4513"/>
<!-- Eyes on stalks -->
<line x1="-8" y1="-12" x2="-6" y2="-18" stroke="#B22222" stroke-width="2"/>
<line x1="8" y1="-12" x2="6" y2="-18" stroke="#B22222" stroke-width="2"/>
<circle cx="-6" cy="-18" r="2" fill="#000"/>
<circle cx="6" cy="-18" r="2" fill="#000"/>
<!-- Legs -->
<line x1="-12" y1="10" x2="-18" y2="20" stroke="url(#crabGradient)" stroke-width="3"/>
<line x1="-4" y1="12" x2="-6" y2="22" stroke="url(#crabGradient)" stroke-width="3"/>
<line x1="4" y1="12" x2="6" y2="22" stroke="url(#crabGradient)" stroke-width="3"/>
<line x1="12" y1="10" x2="18" y2="20" stroke="url(#crabGradient)" stroke-width="3"/>
</g>
<!-- Cymbal crab -->
<g transform="translate(240, 240)">
<ellipse cx="0" cy="0" rx="15" ry="10" fill="url(#crabGradient)"/>
<ellipse cx="-20" cy="-4" rx="8" ry="4" fill="url(#crabGradient)"/>
<ellipse cx="20" cy="-4" rx="8" ry="4" fill="url(#crabGradient)"/>
<!-- Cymbals -->
<ellipse cx="-25" cy="-15" rx="12" ry="3" fill="#FFD700" transform="rotate(-15)" opacity="0.8"/>
<ellipse cx="25" cy="-15" rx="12" ry="3" fill="#FFD700" transform="rotate(15)" opacity="0.8"/>
<!-- Sparkle effect -->
<circle cx="-25" cy="-15" r="1" fill="#FFFF00"/>
<circle cx="25" cy="-15" r="1" fill="#FFFF00"/>
<!-- Eyes -->
<line x1="-6" y1="-10" x2="-4" y2="-16" stroke="#B22222" stroke-width="2"/>
<line x1="6" y1="-10" x2="4" y2="-16" stroke="#B22222" stroke-width="2"/>
<circle cx="-4" cy="-16" r="2" fill="#000"/>
<circle cx="4" cy="-16" r="2" fill="#000"/>
</g>
<!-- Musical notes floating throughout -->
<g fill="#FFD700" opacity="0.8" font-family="serif">
<text x="90" y="50" font-size="18">♪</text>
<text x="210" y="75" font-size="14">♫</text>
<text x="70" y="130" font-size="16">♪</text>
<text x="230" y="115" font-size="18">♫</text>
<text x="180" y="210" font-size="12">♪</text>
<text x="120" y="280" font-size="14">♫</text>
<text x="40" y="170" font-size="10">♪</text>
<text x="260" y="180" font-size="16">♫</text>
</g>
<!-- Additional atmosphere bubbles -->
<g fill="#87CEEB" opacity="0.4">
<circle cx="100" cy="70" r="1.5"/>
<circle cx="200" cy="95" r="2.5"/>
<circle cx="75" cy="220" r="2"/>
<circle cx="225" cy="140" r="3"/>
<circle cx="160" cy="180" r="1"/>
<circle cx="130" cy="240" r="2"/>
</g>
<!-- Light rays from above -->
<g stroke="#87CEEB" stroke-width="2" opacity="0.3" fill="none">
<path d="M100 0 L105 50 Q110 75 100 100"/>
<path d="M200 0 L195 60 Q190 85 200 110"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 Thinking (2025-05-14)
Player 2
Judge's Analysis
Player 2's submission is more detailed and adheres closely to the prompt, showcasing a jellyfish conducting with a baton, surrounded by musically involved fish and crabs.
The composition is vibrant and dynamic, with clear musical elements and a lively underwater setting, making it more creative and visually appealing compared to Player 1's simpler and less descriptive illustration.
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
36
Player 2
84
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
13
Player 2
36
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
4
Player 2
15
Lines
The number of line elements (line) in the SVG.
Player 1
11
Player 2
17
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
3
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
3
Player 2
15
Groups
The number of group elements (g) in the SVG.
Player 1
10
Player 2
13
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
6
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 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
8
Player 2
13
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
16
Player 2
24
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
14
Player 2
14
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
7
Player 2
10
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
6
Player 2
58
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
5
Player 2
7
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
8
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.