GPT-4o
Challenge Creator
Creative Challenge
"A jellyfish wearing a top hat playing a violin underwater."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="waterGrad" cx="50%" cy="30%" r="80%">
<stop offset="0%" style="stop-color:#1E3A8A;stop-opacity:1" />
<stop offset="60%" style="stop-color:#1E40AF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0F172A;stop-opacity:1" />
</radialGradient>
<radialGradient id="jellyfishBell" cx="50%" cy="40%" r="70%">
<stop offset="0%" style="stop-color:#FBBF24;stop-opacity:0.2" />
<stop offset="30%" style="stop-color:#F59E0B;stop-opacity:0.4" />
<stop offset="60%" style="stop-color:#D97706;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#92400E;stop-opacity:0.8" />
</radialGradient>
<radialGradient id="biolumGlow" cx="50%" cy="50%" r="60%">
<stop offset="0%" style="stop-color:#00D9FF;stop-opacity:0.9" />
<stop offset="50%" style="stop-color:#0EA5E9;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#0369A1;stop-opacity:0.2" />
</radialGradient>
<linearGradient id="tentacleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FBBF24;stop-opacity:0.8" />
<stop offset="50%" style="stop-color:#F59E0B;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#D97706;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="violinGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#A0522D" />
<stop offset="40%" style="stop-color:#CD853F" />
<stop offset="100%" style="stop-color:#8B4513" />
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Underwater background -->
<rect width="300" height="300" fill="url(#waterGrad)" />
<!-- Floating particles and plankton -->
<g opacity="0.4">
<circle cx="40" cy="80" r="1" fill="#00D9FF" />
<circle cx="260" cy="120" r="1.5" fill="#0EA5E9" />
<circle cx="80" cy="180" r="0.8" fill="#38BDF8" />
<circle cx="220" cy="50" r="1.2" fill="#00D9FF" />
</g>
<!-- Background tentacles -->
<g fill="url(#tentacleGrad)" opacity="0.7">
<path d="M 105 150 Q 70 190 85 230 Q 75 260 90 290 Q 95 295 85 300" />
<path d="M 115 155 Q 85 195 100 235 Q 90 265 105 295 Q 110 300 100 300" />
<path d="M 195 150 Q 230 190 215 230 Q 225 260 210 290 Q 205 295 215 300" />
<path d="M 185 155 Q 215 195 200 235 Q 210 265 195 295 Q 190 300 200 300" />
</g>
<!-- Jellyfish bell with glow effect -->
<ellipse cx="150" cy="130" rx="55" ry="40" fill="url(#jellyfishBell)" filter="url(#glow)" />
<!-- Bioluminescent patterns -->
<g opacity="0.8">
<circle cx="135" cy="120" r="6" fill="url(#biolumGlow)" />
<circle cx="165" cy="125" r="4" fill="url(#biolumGlow)" />
<circle cx="150" cy="115" r="3" fill="url(#biolumGlow)" />
<circle cx="140" cy="140" r="2" fill="url(#biolumGlow)" />
<circle cx="160" cy="135" r="2.5" fill="url(#biolumGlow)" />
</g>
<!-- Elegant top hat -->
<g>
<!-- Hat brim shadow -->
<ellipse cx="152" cy="97" rx="28" ry="9" fill="#000000" opacity="0.3" />
<!-- Hat brim -->
<ellipse cx="150" cy="95" rx="28" ry="9" fill="#1A1A1A" stroke="#333" stroke-width="1" />
<!-- Hat cylinder -->
<rect x="132" y="60" width="36" height="35" fill="#000000" rx="3" />
<!-- Hat top -->
<ellipse cx="150" cy="60" rx="18" ry="6" fill="#1A1A1A" />
<!-- Decorative band -->
<rect x="132" y="82" width="36" height="5" fill="#8B0000" />
<!-- Hat highlight -->
<ellipse cx="145" cy="70" rx="3" ry="8" fill="#333" opacity="0.6" />
</g>
<!-- Violin positioned naturally -->
<g transform="translate(180,140) rotate(20)">
<!-- Violin body -->
<path d="M 0 -20 Q -8 -15 -10 -5 Q -12 0 -10 5 Q -8 15 0 20 Q 8 15 10 5 Q 12 0 10 -5 Q 8 -15 0 -20 Z" fill="url(#violinGrad)" />
<!-- Sound holes -->
<path d="M -3 -6 Q 0 -4 -3 -1 M 3 -6 Q 0 -4 3 -1" stroke="#654321" stroke-width="1.2" fill="none" />
<path d="M -3 1 Q 0 4 -3 6 M 3 1 Q 0 4 3 6" stroke="#654321" stroke-width="1.2" fill="none" />
<!-- Neck -->
<rect x="-2.5" y="-30" width="5" height="20" fill="#654321" />
<!-- Strings -->
<line x1="-1.5" y1="-30" x2="-1.5" y2="20" stroke="#E5E7EB" stroke-width="0.4" />
<line x1="-0.5" y1="-30" x2="-0.5" y2="20" stroke="#E5E7EB" stroke-width="0.4" />
<line x1="0.5" y1="-30" x2="0.5" y2="20" stroke="#E5E7EB" stroke-width="0.4" />
<line x1="1.5" y1="-30" x2="1.5" y2="20" stroke="#E5E7EB" stroke-width="0.4" />
<!-- Bridge -->
<rect x="-4" y="8" width="8" height="1.5" fill="#8B4513" />
</g>
<!-- Violin bow in playing position -->
<g transform="translate(200,120) rotate(50)">
<line x1="0" y1="0" x2="35" y2="0" stroke="#8B4513" stroke-width="2.5" />
<line x1="2" y1="0" x2="33" y2="0" stroke="#F5F5DC" stroke-width="0.8" />
<!-- Bow tip -->
<circle cx="35" cy="0" r="1" fill="#2D1810" />
</g>
<!-- Front tentacles elegantly positioned -->
<g fill="url(#tentacleGrad)" opacity="0.9">
<!-- Tentacle supporting violin -->
<path d="M 145 165 Q 165 150 175 145 Q 180 143 185 145" />
<!-- Tentacle holding bow -->
<path d="M 155 170 Q 180 155 195 145 Q 200 142 205 145" />
<!-- Additional graceful tentacles -->
<path d="M 125 165 Q 90 200 105 240 Q 100 270 115 300" />
<path d="M 175 165 Q 210 200 195 240 Q 200 270 185 300" />
<path d="M 135 170 Q 110 205 120 245 Q 115 275 125 300" />
<path d="M 165 170 Q 190 205 180 245 Q 185 275 175 300" />
</g>
<!-- Musical notes floating gracefully -->
<g fill="#FBBF24" opacity="0.8" font-family="serif">
<text x="95" y="90" font-size="18" transform="rotate(-10 95,90)">♪</text>
<text x="230" y="70" font-size="22" transform="rotate(15 230,70)">♫</text>
<text x="70" y="60" font-size="16" transform="rotate(-20 70,60)">♬</text>
<text x="250" y="50" font-size="14" transform="rotate(25 250,50)">♪</text>
<text x="210" y="45" font-size="20" transform="rotate(-5 210,45)">♩</text>
</g>
<!-- Bubbles rising through water -->
<g opacity="0.7">
<circle cx="60" cy="200" r="4" fill="#87CEEB" />
<circle cx="90" cy="160" r="2.5" fill="#B0E0E6" />
<circle cx="240" cy="180" r="5" fill="#87CEEB" />
<circle cx="270" cy="140" r="3" fill="#B0E0E6" />
<circle cx="50" cy="120" r="2" fill="#E0F6FF" />
<circle cx="180" cy="90" r="3.5" fill="#87CEEB" />
<circle cx="120" cy="70" r="2.5" fill="#B0E0E6" />
<circle cx="260" cy="90" r="1.8" fill="#E0F6FF" />
</g>
<!-- Seafloor coral and plants -->
<g opacity="0.6">
<path d="M 20 270 Q 35 250 30 230 Q 40 240 35 260 Q 45 240 40 270 Q 50 250 45 280" fill="#16A34A" />
<path d="M 260 275 Q 245 255 250 235 Q 240 245 245 265 Q 235 245 240 275 Q 230 255 235 285" fill="#22C55E" />
<!-- Coral formations -->
<circle cx="25" cy="285" r="8" fill="#F97316" opacity="0.8" />
<circle cx="275" cy="290" r="6" fill="#EC4899" opacity="0.8" />
<ellipse cx="280" cy="285" rx="4" ry="8" fill="#8B5CF6" opacity="0.7" />
</g>
<!-- Water light rays -->
<g opacity="0.2">
<path d="M 100 0 L 110 300" stroke="#60A5FA" stroke-width="8" />
<path d="M 200 0 L 190 300" stroke="#60A5FA" stroke-width="6" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="waterGradient" cx="50%" cy="0%" r="100%">
<stop offset="0%" style="stop-color:#1e3a8a;stop-opacity:1" />
<stop offset="50%" style="stop-color:#1e40af;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0f172a;stop-opacity:1" />
</radialGradient>
<radialGradient id="jellyfishGradient" cx="50%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#fbbf24;stop-opacity:0.8" />
<stop offset="40%" style="stop-color:#f59e0b;stop-opacity:0.6" />
<stop offset="80%" style="stop-color:#d97706;stop-opacity:0.4" />
<stop offset="100%" style="stop-color:#92400e;stop-opacity:0.2" />
</radialGradient>
<linearGradient id="hatGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#374151;stop-opacity:1" />
<stop offset="50%" style="stop-color:#1f2937;stop-opacity:1" />
<stop offset="100%" style="stop-color:#111827;stop-opacity:1" />
</linearGradient>
<linearGradient id="violinGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#92400e;stop-opacity:1" />
<stop offset="50%" style="stop-color:#b45309;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="bubblePattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<circle cx="15" cy="15" r="3" fill="#60a5fa" opacity="0.3"/>
<circle cx="5" cy="8" r="1.5" fill="#93c5fd" opacity="0.4"/>
<circle cx="22" cy="5" r="2" fill="#dbeafe" opacity="0.5"/>
</pattern>
</defs>
<!-- Background water -->
<rect width="300" height="300" fill="url(#waterGradient)"/>
<rect width="300" height="300" fill="url(#bubblePattern)"/>
<!-- Floating bubbles -->
<circle cx="50" cy="80" r="4" fill="#60a5fa" opacity="0.6">
<animate attributeName="cy" values="80;20;80" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="250" cy="120" r="6" fill="#93c5fd" opacity="0.5">
<animate attributeName="cy" values="120;40;120" dur="8s" repeatCount="indefinite"/>
</circle>
<circle cx="30" cy="200" r="3" fill="#dbeafe" opacity="0.7">
<animate attributeName="cy" values="200;100;200" dur="5s" repeatCount="indefinite"/>
</circle>
<!-- Jellyfish bell -->
<ellipse cx="150" cy="120" rx="60" ry="45" fill="url(#jellyfishGradient)" filter="url(#glow)">
<animate attributeName="ry" values="45;50;45" dur="3s" repeatCount="indefinite"/>
<animate attributeName="rx" values="60;55;60" dur="3s" repeatCount="indefinite"/>
</ellipse>
<!-- Jellyfish inner patterns -->
<ellipse cx="150" cy="115" rx="35" ry="25" fill="none" stroke="#fbbf24" stroke-width="2" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.9;0.6" dur="2s" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="150" cy="110" rx="20" ry="15" fill="none" stroke="#f59e0b" stroke-width="1.5" opacity="0.8">
<animate attributeName="opacity" values="0.8;1;0.8" dur="2.5s" repeatCount="indefinite"/>
</ellipse>
<!-- Top hat -->
<ellipse cx="150" cy="85" rx="25" ry="8" fill="url(#hatGradient)"/>
<rect x="125" y="45" width="50" height="40" fill="url(#hatGradient)" rx="2"/>
<ellipse cx="150" cy="45" rx="25" ry="8" fill="#4b5563"/>
<rect x="140" y="65" width="20" height="4" fill="#f59e0b" rx="2"/>
<!-- Jellyfish tentacles -->
<path d="M 120 150 Q 110 180 115 220 Q 120 250 125 280" stroke="#f59e0b" stroke-width="3" fill="none" opacity="0.7">
<animate attributeName="d" values="M 120 150 Q 110 180 115 220 Q 120 250 125 280;M 120 150 Q 105 185 120 225 Q 115 255 120 285;M 120 150 Q 110 180 115 220 Q 120 250 125 280" dur="4s" repeatCount="indefinite"/>
</path>
<path d="M 140 155 Q 130 190 135 230 Q 140 260 145 290" stroke="#fbbf24" stroke-width="2.5" fill="none" opacity="0.6">
<animate attributeName="d" values="M 140 155 Q 130 190 135 230 Q 140 260 145 290;M 140 155 Q 125 195 140 235 Q 135 265 140 295;M 140 155 Q 130 190 135 230 Q 140 260 145 290" dur="3.5s" repeatCount="indefinite"/>
</path>
<path d="M 160 155 Q 170 190 165 230 Q 160 260 155 290" stroke="#fbbf24" stroke-width="2.5" fill="none" opacity="0.6">
<animate attributeName="d" values="M 160 155 Q 170 190 165 230 Q 160 260 155 290;M 160 155 Q 175 195 160 235 Q 165 265 160 295;M 160 155 Q 170 190 165 230 Q 160 260 155 290" dur="3.8s" repeatCount="indefinite"/>
</path>
<path d="M 180 150 Q 190 180 185 220 Q 180 250 175 280" stroke="#f59e0b" stroke-width="3" fill="none" opacity="0.7">
<animate attributeName="d" values="M 180 150 Q 190 180 185 220 Q 180 250 175 280;M 180 150 Q 195 185 180 225 Q 185 255 180 285;M 180 150 Q 190 180 185 220 Q 180 250 175 280" dur="4.2s" repeatCount="indefinite"/>
</path>
<!-- Violin body -->
<ellipse cx="210" cy="140" rx="18" ry="35" fill="url(#violinGradient)" transform="rotate(15 210 140)"/>
<ellipse cx="210" cy="125" rx="12" ry="8" fill="url(#violinGradient)" transform="rotate(15 210 140)"/>
<ellipse cx="210" cy="155" rx="12" ry="8" fill="url(#violinGradient)" transform="rotate(15 210 140)"/>
<!-- Violin f-holes -->
<path d="M 205 130 Q 207 135 205 140 Q 203 145 205 150" stroke="#1f2937" stroke-width="1.5" fill="none" transform="rotate(15 210 140)"/>
<path d="M 215 130 Q 213 135 215 140 Q 217 145 215 150" stroke="#1f2937" stroke-width="1.5" fill="none" transform="rotate(15 210 140)"/>
<!-- Violin neck -->
<rect x="190" y="100" width="6" height="30" fill="#92400e" transform="rotate(15 210 140)"/>
<!-- Violin strings -->
<line x1="192" y1="105" x2="192" y2="175" stroke="#e5e7eb" stroke-width="0.5" transform="rotate(15 210 140)"/>
<line x1="194" y1="105" x2="194" y2="175" stroke="#e5e7eb" stroke-width="0.5" transform="rotate(15 210 140)"/>
<line x1="196" y1="105" x2="196" y2="175" stroke="#e5e7eb" stroke-width="0.5" transform="rotate(15 210 140)"/>
<line x1="198" y1="105" x2="198" y2="175" stroke="#e5e7eb" stroke-width="0.5" transform="rotate(15 210 140)"/>
<!-- Violin bow -->
<line x1="240" y1="120" x2="270" y2="110" stroke="#4b5563" stroke-width="2"/>
<line x1="240" y1="120" x2="270" y2="110" stroke="#f3f4f6" stroke-width="0.5"/>
<!-- Jellyfish arms holding violin -->
<path d="M 130 140 Q 160 135 190 138" stroke="#f59e0b" stroke-width="4" fill="none" opacity="0.8"/>
<path d="M 170 150 Q 200 145 230 125" stroke="#fbbf24" stroke-width="3" fill="none" opacity="0.7"/>
<!-- Musical notes -->
<circle cx="260" cy="90" r="3" fill="#fbbf24" opacity="0.8">
<animate attributeName="cy" values="90;60;90" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="275" cy="100" r="2.5" fill="#f59e0b" opacity="0.7">
<animate attributeName="cy" values="100;70;100" dur="2.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="2.5s" repeatCount="indefinite"/>
</circle>
<circle cx="285" cy="85" r="2" fill="#fbbf24" opacity="0.6">
<animate attributeName="cy" values="85;55;85" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0.1;0.6" dur="3s" repeatCount="indefinite"/>
</circle>
<!-- Water current lines -->
<path d="M 20 150 Q 80 145 140 150 Q 200 155 280 150" stroke="#60a5fa" stroke-width="1" fill="none" opacity="0.3">
<animate attributeName="d" values="M 20 150 Q 80 145 140 150 Q 200 155 280 150;M 20 155 Q 80 150 140 145 Q 200 150 280 155;M 20 150 Q 80 145 140 150 Q 200 155 280 150" dur="6s" repeatCount="indefinite"/>
</path>
<path d="M 10 200 Q 70 195 130 200 Q 190 205 270 200" stroke="#93c5fd" stroke-width="1" fill="none" opacity="0.2">
<animate attributeName="d" values="M 10 200 Q 70 195 130 200 Q 190 205 270 200;M 10 205 Q 70 200 130 195 Q 190 200 270 205;M 10 200 Q 70 195 130 200 Q 190 205 270 200" dur="7s" repeatCount="indefinite"/>
</path>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 Thinking (2025-05-14)
Player 1
Judge's Analysis
Player 1's image demonstrates a stronger composition with a clearer depiction of the jellyfish wearing a top hat and playing a violin, surrounded by underwater elements like bubbles and sea plants.
The addition of musical notes enhances the adherence to the theme.
While Player 2's image is creative, its execution lacks the same level of detail and visual balance, making Player 1's submission more compelling 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
54
Player 2
38
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
5
Player 2
5
Circles
The number of circle elements (circle) in the SVG.
Player 1
20
Player 2
9
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
6
Player 2
8
Lines
The number of line elements (line) in the SVG.
Player 1
6
Player 2
6
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
17
Player 2
10
Groups
The number of group elements (g) in the SVG.
Player 1
11
Player 2
—
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
4
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
—
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
13
Player 2
19
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
11
Player 2
18
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
22
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
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
64
Player 2
28
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
6
Player 2
6
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
5
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.