GPT-4o
Challenge Creator
Creative Challenge
"A robotic octopus juggling planets under the sea."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#ocean)" rx="20" />
<!-- Ocean Gradient -->
<linearGradient id="ocean" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" stop-color="#03407a" />
<stop offset="50%" stop-color="#01a9db" />
<stop offset="100%" stop-color="#045a8d" />
</linearGradient>
<!-- Robotic Octopus -->
<g transform="translate(150, 150)">
<circle cx="0" cy="0" r="25" fill="#444" />
<circle cx="0" cy="0" r="20" fill="#666" />
<circle cx="0" cy="0" r="15" fill="#888" />
<circle cx="0" cy="0" r="10" fill="#aaa" />
<circle cx="0" cy="0" r="5" fill="#ccc" />
<!-- Octopus Arms -->
<g transform="rotate(45)">
<rect x="-30" y="-5" width="60" height="10" rx="2" fill="#666" />
<rect x="-25" y="-5" width="50" height="10" rx="2" fill="#888" />
<rect x="-20" y="-5" width="40" height="10" rx="2" fill="#aaa" />
<rect x="-15" y="-5" width="30" height="10" rx="2" fill="#ccc" />
</g>
<g transform="rotate(135)">
<rect x="-30" y="-5" width="60" height="10" rx="2" fill="#666" />
<rect x="-25" y="-5" width="50" height="10" rx="2" fill="#888" />
<rect x="-20" y="-5" width="40" height="10" rx="2" fill="#aaa" />
<rect x="-15" y="-5" width="30" height="10" rx="2" fill="#ccc" />
</g>
<g transform="rotate(-45)">
<rect x="-30" y="-5" width="60" height="10" rx="2" fill="#666" />
<rect x="-25" y="-5" width="50" height="10" rx="2" fill="#888" />
<rect x="-20" y="-5" width="40" height="10" rx="2" fill="#aaa" />
<rect x="-15" y="-5" width="30" height="10" rx="2" fill="#ccc" />
</g>
<g transform="rotate(-135)">
<rect x="-30" y="-5" width="60" height="10" rx="2" fill="#666" />
<rect x="-25" y="-5" width="50" height="10" rx="2" fill="#888" />
<rect x="-20" y="-5" width="40" height="10" rx="2" fill="#aaa" />
<rect x="-15" y="-5" width="30" height="10" rx="2" fill="#ccc" />
</g>
</g>
<!-- Planets -->
<g transform="translate(150, 150)">
<!-- Mercury -->
<circle cx="-50" cy="-50" r="10" fill="#f7dc6f" />
<circle cx="-50" cy="-50" r="8" fill="#ffd700" />
<circle cx="-50" cy="-50" r="6" fill="#ffffff" />
<!-- Earth -->
<circle cx="0" cy="-50" r="15" fill="#4567b7" />
<circle cx="0" cy="-50" r="12" fill="#6495ed" />
<circle cx="0" cy="-50" r="9" fill="#87ceeb" />
<!-- Mars -->
<circle cx="50" cy="-50" r="12" fill="#ff9900" />
<circle cx="50" cy="-50" r="10" fill="#ffa07a" />
<circle cx="50" cy="-50" r="8" fill="#ffd700" />
<!-- Jupiter -->
<circle cx="-50" cy="50" r="20" fill="#b5651d" />
<circle cx="-50" cy="50" r="18" fill="#ffa07a" />
<circle cx="-50" cy="50" r="16" fill="#ffd700" />
<!-- Saturn -->
<circle cx="0" cy="50" r="18" fill="#ffff00" />
<circle cx="0" cy="50" r="15" fill="#ffd700" />
<circle cx="0" cy="50" r="12" fill="#ffffff" />
<!-- Uranus -->
<circle cx="50" cy="50" r="15" fill="#33ccff" />
<circle cx="50" cy="50" r="12" fill="#66ffff" />
<circle cx="50" cy="50" r="9" fill="#99ffff" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sea Gradient -->
<linearGradient id="seaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#003366" />
<stop offset="30%" stop-color="#002855" />
<stop offset="100%" stop-color="#001122" />
</linearGradient>
<!-- Light Rays -->
<linearGradient id="lightRayGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(135, 206, 250, 0.3)" />
<stop offset="100%" stop-color="rgba(135, 206, 250, 0)" />
</linearGradient>
<!-- Octopus Metal Gradients -->
<radialGradient id="octopusMetal" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#C0C0C0" />
<stop offset="70%" stop-color="#808080" />
<stop offset="100%" stop-color="#505050" />
</radialGradient>
<radialGradient id="octopusHighlight" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#F0F0F0" />
<stop offset="100%" stop-color="#A0A0A0" />
</radialGradient>
<linearGradient id="tentacleHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#A0A0A0"/>
<stop offset="50%" stop-color="#E8E8E8"/>
<stop offset="100%" stop-color="#A0A0A0"/>
</linearGradient>
<!-- Planet Gradients -->
<radialGradient id="earthGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#87CEEB" />
<stop offset="50%" stop-color="#4682B4" />
<stop offset="100%" stop-color="#2E6B2E" />
</radialGradient>
<radialGradient id="marsGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#FFDAB9" />
<stop offset="50%" stop-color="#CD5C5C" />
<stop offset="100%" stop-color="#A52A2A" />
</radialGradient>
<radialGradient id="jupiterGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#FFEBCD" />
<stop offset="40%" stop-color="#F4A460" />
<stop offset="70%" stop-color="#D2B48C" />
<stop offset="100%" stop-color="#8B4513" />
</radialGradient>
<linearGradient id="saturnRingGradient">
<stop offset="0%" stop-color="#F5DEB3" />
<stop offset="50%" stop-color="#FFF8DC" />
<stop offset="100%" stop-color="#DEB887" />
</linearGradient>
<radialGradient id="icyPlanetGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#E0FFFF" />
<stop offset="60%" stop-color="#AFEEEE" />
<stop offset="100%" stop-color="#7FFFD4" />
</radialGradient>
<!-- Glow Filter -->
<filter id="glow">
<feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#seaGradient)" />
<!-- Light Rays -->
<polygon points="40,0 90,0 150,300 100,300" fill="url(#lightRayGradient)" opacity="0.15" transform="rotate(-15 65 150)"/>
<polygon points="130,0 180,0 200,300 150,300" fill="url(#lightRayGradient)" opacity="0.2"/>
<polygon points="220,0 270,0 270,300 220,300" fill="url(#lightRayGradient)" opacity="0.15" transform="rotate(15 245 150)"/>
<!-- Seabed -->
<path d="M0 300 Q 70 260, 150 275 T 300 265 V 300 H 0 Z" fill="#6B4226" />
<path d="M0 290 Q 60 255, 130 265 T 240 250 T 300 270 L 300 290 Q 200 310, 100 305 L 0 300 Z" fill="#54341C" opacity="0.5"/>
<!-- Coral-like structures -->
<g transform="translate(40 255) scale(0.9)">
<path d="M0,20 C5,-10 25,-15 30,10 C35,-5 45,-10 50,20 L40,25 C35,5 15,5 10,25 L0,20Z" fill="#FF7F50" opacity="0.8"/>
<path d="M5,18 C10,-5 28,-8 32,12 C37,0 43,-5 48,18 L38,23 C33,8 18,8 12,23 L5,18Z" fill="#FF6347" opacity="0.5" transform="translate(5 -5)"/>
</g>
<g transform="translate(230 245) scale(0.7)">
<ellipse cx="15" cy="20" rx="20" ry="12" fill="#9370DB" opacity="0.7"/>
<circle cx="15" cy="15" r="7" fill="#BA55D3" opacity="0.8"/>
<ellipse cx="25" cy="25" rx="15" ry="8" fill="#8A2BE2" opacity="0.6" transform="rotate(20 25 25)"/>
</g>
<!-- Bubbles with Animation -->
<g id="bubbles" fill-opacity="0.6">
<circle cx="25" cy="80" r="3" fill="#AFEEEE"><animate attributeName="cy" from="320" to="-20" dur="8s" repeatCount="indefinite" begin="0s"/><animate attributeName="cx" from="25" to="35" dur="4s" repeatCount="indefinite" direction="alternate" begin="0s"/></circle>
<circle cx="35" cy="120" r="2" fill="#B0E0E6"><animate attributeName="cy" from="320" to="-20" dur="10s" repeatCount="indefinite" begin="-2s"/><animate attributeName="cx" from="35" to="45" dur="5s" repeatCount="indefinite" direction="alternate" begin="-2s"/></circle>
<circle cx="270" cy="100" r="4" fill="#AFEEEE"><animate attributeName="cy" from="320" to="-20" dur="7s" repeatCount="indefinite" begin="-1s"/><animate attributeName="cx" from="270" to="260" dur="3.5s" repeatCount="indefinite" direction="alternate" begin="-1s"/></circle>
<circle cx="260" cy="150" r="2.5" fill="#B0E0E6"><animate attributeName="cy" from="320" to="-20" dur="11s" repeatCount="indefinite" begin="-3s"/><animate attributeName="cx" from="260" to="250" dur="5.5s" repeatCount="indefinite" direction="alternate" begin="-3s"/></circle>
<circle cx="160" cy="50" r="3.5" fill="#AFEEEE"><animate attributeName="cy" from="320" to="-20" dur="9s" repeatCount="indefinite" begin="-0.5s"/><animate attributeName="cx" from="160" to="170" dur="4.5s" repeatCount="indefinite" direction="alternate" begin="-0.5s"/></circle>
<circle cx="140" cy="200" r="2" fill="#B0E0E6"><animate attributeName="cy" from="320" to="-20" dur="12s" repeatCount="indefinite" begin="-2.5s"/><animate attributeName="cx" from="140" to="130" dur="6s" repeatCount="indefinite" direction="alternate" begin="-2.5s"/></circle>
</g>
<!-- Robotic Octopus -->
<g id="roboticOctopus">
<!-- Head -->
<circle cx="150" cy="180" r="40" fill="url(#octopusMetal)" stroke="#303030" stroke-width="2"/>
<circle cx="150" cy="180" r="35" fill="url(#octopusHighlight)" opacity="0.4"/>
<path d="M120 170 Q150 160, 180 170" stroke="#404040" stroke-width="1.5" fill="none" opacity="0.7"/>
<path d="M125 190 Q150 200, 175 190" stroke="#404040" stroke-width="1.5" fill="none" opacity="0.7"/>
<circle cx="130" cy="195" r="1.5" fill="#32CD32" filter="url(#glow)" opacity="0.8" />
<circle cx="135" cy="198" r="1.5" fill="#FFD700" filter="url(#glow)" opacity="0.8" />
<circle cx="165" cy="198" r="1.5" fill="#DC143C" filter="url(#glow)" opacity="0.8" />
<circle cx="170" cy="195" r="1.5" fill="#00BFFF" filter="url(#glow)" opacity="0.8" />
<ellipse cx="150" cy="170" rx="25" ry="15" fill="#181818" />
<ellipse cx="150" cy="170" rx="22" ry="12" fill="#FF6347" />
<ellipse cx="150" cy="170" rx="10" ry="5" fill="#FFA500" filter="url(#glow)" />
<ellipse cx="145" cy="168" rx="3" ry="2" fill="white" opacity="0.9"/>
<!-- Tentacles -->
<g>
<path d="M150 210 Q 120 195, 100 150 Q 90 115, 90 80" stroke="url(#octopusMetal)" stroke-width="13" fill="none" stroke-linecap="round"/>
<path d="M150 210 Q 120 195, 100 150 Q 90 115, 90 80" stroke="url(#tentacleHighlight)" stroke-width="7" fill="none" stroke-linecap="round"/>
<circle cx="90" cy="80" r="9" fill="#404040"/> <circle cx="90" cy="80" r="7" fill="#FFA500" filter="url(#glow)" opacity="0.8"/>
</g>
<g>
<path d="M150 210 Q 180 195, 200 150 Q 210 115, 210 80" stroke="url(#octopusMetal)" stroke-width="13" fill="none" stroke-linecap="round"/>
<path d="M150 210 Q 180 195, 200 150 Q 210 115, 210 80" stroke="url(#tentacleHighlight)" stroke-width="7" fill="none" stroke-linecap="round"/>
<circle cx="210" cy="80" r="9" fill="#404040"/> <circle cx="210" cy="80" r="7" fill="#FFA500" filter="url(#glow)" opacity="0.8"/>
</g>
<g>
<path d="M140 215 Q 90 235, 65 180 Q 45 135, 60 95" stroke="url(#octopusMetal)" stroke-width="13" fill="none" stroke-linecap="round"/>
<path d="M140 215 Q 90 235, 65 180 Q 45 135, 60 95" stroke="url(#tentacleHighlight)" stroke-width="7" fill="none" stroke-linecap="round"/>
<circle cx="60" cy="95" r="9" fill="#404040"/> <circle cx="60" cy="95" r="7" fill="#FFA500" filter="url(#glow)" opacity="0.8"/>
</g>
<g>
<path d="M160 215 Q 210 235, 235 180 Q 255 135, 240 95" stroke="url(#octopusMetal)" stroke-width="13" fill="none" stroke-linecap="round"/>
<path d="M160 215 Q 210 235, 235 180 Q 255 135, 240 95" stroke="url(#tentacleHighlight)" stroke-width="7" fill="none" stroke-linecap="round"/>
<circle cx="240" cy="95" r="9" fill="#404040"/> <circle cx="240" cy="95" r="7" fill="#FFA500" filter="url(#glow)" opacity="0.8"/>
</g>
<g opacity="0.7">
<path d="M145 218 Q 130 250, 100 270" stroke="url(#octopusMetal)" stroke-width="11" fill="none" stroke-linecap="round"/>
<path d="M145 218 Q 130 250, 100 270" stroke="url(#tentacleHighlight)" stroke-width="5" fill="none" stroke-linecap="round"/>
</g>
<g opacity="0.7">
<path d="M155 218 Q 170 250, 200 270" stroke="url(#octopusMetal)" stroke-width="11" fill="none" stroke-linecap="round"/>
<path d="M155 218 Q 170 250, 200 270" stroke="url(#tentacleHighlight)" stroke-width="5" fill="none" stroke-linecap="round"/>
</g>
</g>
<!-- Planets -->
<g id="planets">
<g transform="translate(90 50)">
<circle cx="0" cy="0" r="20" fill="url(#earthGradient)" />
<path d="M -15 2 A 15 15 0 0 1 5 -12 L 12 -6 A 10 10 0 0 0 -15 2 Z" fill="#38761D" opacity="0.9"/>
<path d="M 5 12 A 12 12 0 0 1 15 3 L 0 16 A 8 8 0 0 0 5 12 Z" fill="#558B2F" opacity="0.9"/>
<circle cx="-10" cy="-8" r="5" fill="rgba(255,255,255,0.5)" />
<circle cx="8" cy="5" r="7" fill="rgba(255,255,255,0.4)" />
</g>
<g transform="translate(210 50)">
<circle cx="0" cy="0" r="18" fill="url(#marsGradient)" />
<circle cx="-7" cy="-4" r="5" fill="#8B4513" opacity="0.6"/>
<circle cx="9" cy="6" r="3.5" fill="#A0522D" opacity="0.6"/>
<ellipse cx="0" cy="12" rx="10" ry="4" fill="rgba(255,228,196,0.5)" />
</g>
<g transform="translate(60 135)">
<circle cx="0" cy="0" r="22" fill="url(#jupiterGradient)" />
<ellipse cx="0" cy="-10" rx="21" ry="4.5" fill="rgba(255,250,240,0.7)" />
<ellipse cx="0" cy="0" rx="22" ry="5" fill="rgba(210,180,140,0.6)" />
<ellipse cx="0" cy="10" rx="21" ry="4.5" fill="rgba(205,133,63,0.7)" />
<ellipse cx="-10" cy="3" rx="7" ry="5" fill="#B22222" opacity="0.8" transform="rotate(-15 -10 3)"/>
</g>
<g transform="translate(240 135)">
<ellipse cx="0" cy="0" rx="30" ry="11" fill="url(#saturnRingGradient)" stroke="#B8860B" stroke-width="0.7" transform="rotate(-20)" />
<ellipse cx="0" cy="0" rx="24" ry="8" fill="#A0785A" transform="rotate(-20)" />
<circle cx="0" cy="0" r="17" fill="#F0E68C" />
<ellipse cx="0" cy="-6" rx="16" ry="3.5" fill="rgba(255,248,220,0.6)" />
<ellipse cx="0" cy="6" rx="16" ry="3.5" fill="rgba(210,180,140,0.5)" />
</g>
<g transform="translate(150 25)">
<circle cx="0" cy="0" r="16" fill="url(#icyPlanetGradient)"/>
<path d="M -12 0 A 12 12 0 0 1 0 -12 A 12 12 0 0 1 12 0 A 12 12 0 0 1 0 12 A 12 12 0 0 1 -12 0 Z"
stroke="rgba(255,255,255,0.7)" stroke-width="1.5" fill="none"
transform="rotate(30)"/>
<circle cx="4" cy="-5" r="2.5" fill="white" opacity="0.8"/>
<circle cx="-5" cy="6" r="2" fill="white" opacity="0.8"/>
</g>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Gemini 2.5 Pro Preview 05-06
Player 2
Judge's Analysis
Player 2's submission demonstrates a creative and clear depiction of a robotic octopus juggling planets under the sea, with detailed tentacle arms, an underwater setting, and vibrant planets.
In contrast, Player 1's image is abstract and lacks identifiable elements tying it to the concept of a robotic octopus or underwater environment, making it less aligned with the prompt.
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
40
Player 2
72
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
17
Player 2
1
Circles
The number of circle elements (circle) in the SVG.
Player 1
23
Player 2
32
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
—
Player 2
15
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
3
Paths
The number of path elements (path) in the SVG.
Player 1
—
Player 2
21
Groups
The number of group elements (g) in the SVG.
Player 1
6
Player 2
16
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
1
Player 2
10
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 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
—
Player 2
30
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
—
Player 2
17
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
21
Player 2
60
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
12
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
6
Player 2
15
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
—
Player 2
80
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
—
Player 2
11
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.
