GPT-4o
Challenge Creator
Creative Challenge
"Octopus juggling planets under a spotlight in deep space."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" style="stop-color:#0a0a2e"/>
<stop offset="50%" style="stop-color:#16213e"/>
<stop offset="100%" style="stop-color:#000000"/>
</radialGradient>
<radialGradient id="spotlightGradient" cx="50%" cy="0%" r="80%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.8"/>
<stop offset="30%" style="stop-color:#ffffcc;stop-opacity:0.6"/>
<stop offset="70%" style="stop-color:#ffff99;stop-opacity:0.3"/>
<stop offset="100%" style="stop-color:#ffff66;stop-opacity:0"/>
</radialGradient>
<radialGradient id="octopusGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#ff6b9d"/>
<stop offset="50%" style="stop-color:#8b5cf6"/>
<stop offset="100%" style="stop-color:#3b82f6"/>
</radialGradient>
<radialGradient id="planet1" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#fbbf24"/>
<stop offset="70%" style="stop-color:#f59e0b"/>
<stop offset="100%" style="stop-color:#d97706"/>
</radialGradient>
<radialGradient id="planet2" cx="40%" cy="20%" r="80%">
<stop offset="0%" style="stop-color:#34d399"/>
<stop offset="60%" style="stop-color:#10b981"/>
<stop offset="100%" style="stop-color:#059669"/>
</radialGradient>
<radialGradient id="planet3" cx="25%" cy="35%" r="75%">
<stop offset="0%" style="stop-color:#f472b6"/>
<stop offset="50%" style="stop-color:#ec4899"/>
<stop offset="100%" style="stop-color:#be185d"/>
</radialGradient>
<radialGradient id="planet4" cx="35%" cy="25%" r="70%">
<stop offset="0%" style="stop-color:#a78bfa"/>
<stop offset="60%" style="stop-color:#8b5cf6"/>
<stop offset="100%" style="stop-color:#7c3aed"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="tentacleGlow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Deep space background -->
<rect width="300" height="300" fill="url(#spaceGradient)"/>
<!-- Stars -->
<circle cx="50" cy="40" r="1" fill="#ffffff" opacity="0.8"/>
<circle cx="250" cy="60" r="0.5" fill="#ffffff" opacity="0.6"/>
<circle cx="280" cy="120" r="1.5" fill="#ffffff" opacity="0.9"/>
<circle cx="30" cy="180" r="0.8" fill="#ffffff" opacity="0.7"/>
<circle cx="270" cy="250" r="1" fill="#ffffff" opacity="0.8"/>
<circle cx="80" cy="280" r="0.6" fill="#ffffff" opacity="0.5"/>
<circle cx="200" cy="30" r="1.2" fill="#ffffff" opacity="0.8"/>
<circle cx="20" cy="100" r="0.7" fill="#ffffff" opacity="0.6"/>
<!-- Spotlight beam -->
<ellipse cx="150" cy="0" rx="60" ry="200" fill="url(#spotlightGradient)" opacity="0.7"/>
<!-- Octopus body -->
<ellipse cx="150" cy="180" rx="25" ry="30" fill="url(#octopusGradient)" filter="url(#glow)"/>
<!-- Octopus head/mantle -->
<ellipse cx="150" cy="160" rx="20" ry="25" fill="url(#octopusGradient)" filter="url(#glow)"/>
<!-- Eyes -->
<ellipse cx="145" cy="155" rx="4" ry="6" fill="#ffffff"/>
<ellipse cx="155" cy="155" rx="4" ry="6" fill="#ffffff"/>
<circle cx="145" cy="155" r="2" fill="#000000"/>
<circle cx="155" cy="155" r="2" fill="#000000"/>
<circle cx="146" cy="154" r="0.5" fill="#ffffff"/>
<circle cx="156" cy="154" r="0.5" fill="#ffffff"/>
<!-- Tentacles with curves -->
<!-- Tentacle 1 - holding planet -->
<path d="M 130 190 Q 80 200 60 160 Q 50 140 70 120" stroke="url(#octopusGradient)" stroke-width="8" fill="none" filter="url(#tentacleGlow)"/>
<circle cx="70" cy="120" r="3" fill="url(#octopusGradient)"/>
<!-- Tentacle 2 - holding planet -->
<path d="M 170 190 Q 220 180 240 140 Q 250 120 230 100" stroke="url(#octopusGradient)" stroke-width="8" fill="none" filter="url(#tentacleGlow)"/>
<circle cx="230" cy="100" r="3" fill="url(#octopusGradient)"/>
<!-- Tentacle 3 - holding planet -->
<path d="M 140 200 Q 100 230 80 260 Q 70 280 90 290" stroke="url(#octopusGradient)" stroke-width="8" fill="none" filter="url(#tentacleGlow)"/>
<circle cx="90" cy="290" r="3" fill="url(#octopusGradient)"/>
<!-- Tentacle 4 - holding planet -->
<path d="M 160 200 Q 200 240 220 270 Q 230 290 210 295" stroke="url(#octopusGradient)" stroke-width="8" fill="none" filter="url(#tentacleGlow)"/>
<circle cx="210" cy="295" r="3" fill="url(#octopusGradient)"/>
<!-- Tentacle 5 - graceful curve -->
<path d="M 135 185 Q 110 170 95 190 Q 85 210 105 220" stroke="url(#octopusGradient)" stroke-width="6" fill="none" filter="url(#tentacleGlow)"/>
<!-- Tentacle 6 - graceful curve -->
<path d="M 165 185 Q 190 170 205 190 Q 215 210 195 220" stroke="url(#octopusGradient)" stroke-width="6" fill="none" filter="url(#tentacleGlow)"/>
<!-- Tentacle 7 - supporting -->
<path d="M 145 195 Q 130 220 140 240 Q 150 260 130 270" stroke="url(#octopusGradient)" stroke-width="6" fill="none" filter="url(#tentacleGlow)"/>
<!-- Tentacle 8 - supporting -->
<path d="M 155 195 Q 170 220 160 240 Q 150 260 170 270" stroke="url(#octopusGradient)" stroke-width="6" fill="none" filter="url(#tentacleGlow)"/>
<!-- Planets being juggled -->
<!-- Planet 1 - Orange/Yellow -->
<circle cx="70" cy="120" r="12" fill="url(#planet1)" filter="url(#glow)"/>
<ellipse cx="75" cy="115" rx="3" ry="1.5" fill="#d97706" opacity="0.6"/>
<ellipse cx="68" cy="125" rx="2" ry="1" fill="#d97706" opacity="0.4"/>
<!-- Planet 2 - Green -->
<circle cx="230" cy="100" r="10" fill="url(#planet2)" filter="url(#glow)"/>
<path d="M 225 95 Q 235 98 230 105" stroke="#059669" stroke-width="2" fill="none"/>
<circle cx="232" cy="102" r="1.5" fill="#047857"/>
<!-- Planet 3 - Pink -->
<circle cx="90" cy="290" r="8" fill="url(#planet3)" filter="url(#glow)"/>
<ellipse cx="88" cy="287" rx="2" ry="1" fill="#be185d" opacity="0.7"/>
<!-- Planet 4 - Purple -->
<circle cx="210" cy="295" r="9" fill="url(#planet4)" filter="url(#glow)"/>
<ellipse cx="207" cy="292" rx="2.5" ry="1.5" fill="#7c3aed" opacity="0.6"/>
<circle cx="212" cy="297" r="1" fill="#6d28d9"/>
<!-- Motion trails for juggling effect -->
<path d="M 70 120 Q 100 80 150 70 Q 200 80 230 100" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3"/>
<path d="M 230 100 Q 250 150 220 200 Q 190 250 210 295" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3"/>
<path d="M 210 295 Q 150 280 120 260 Q 90 280 90 290" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3"/>
<path d="M 90 290 Q 60 250 50 200 Q 60 150 70 120" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3"/>
<!-- Spotlight source -->
<ellipse cx="150" cy="-10" rx="8" ry="4" fill="#ffffff" opacity="0.9"/>
<rect x="146" y="-15" width="8" height="10" fill="#cccccc"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="bgGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#001025"/>
<stop offset="100%" stop-color="#000010"/>
</radialGradient>
<linearGradient id="spotGrad" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="300">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<radialGradient id="planetBlue" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#4fc3f7"/>
<stop offset="100%" stop-color="#01579b"/>
</radialGradient>
<radialGradient id="planetRed" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#ff8a80"/>
<stop offset="100%" stop-color="#c62828"/>
</radialGradient>
<radialGradient id="planetGreen" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#b9f6ca"/>
<stop offset="100%" stop-color="#2e7d32"/>
</radialGradient>
<radialGradient id="planetPurple" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#e1bee7"/>
<stop offset="100%" stop-color="#6a1b9a"/>
</radialGradient>
<radialGradient id="planetOrange" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#ffcc80"/>
<stop offset="100%" stop-color="#e65100"/>
</radialGradient>
<radialGradient id="octoGrad" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#f8bbd0"/>
<stop offset="100%" stop-color="#6a1b9a"/>
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGrad)"/>
<!-- Stars -->
<g fill="#ffffff">
<circle cx="15" cy="25" r="1.2"/>
<circle cx="50" cy="10" r="0.8"/>
<circle cx="85" cy="45" r="1"/>
<circle cx="120" cy="30" r="0.9"/>
<circle cx="160" cy="60" r="1.3"/>
<circle cx="200" cy="20" r="0.7"/>
<circle cx="240" cy="80" r="1.1"/>
<circle cx="280" cy="40" r="0.8"/>
<circle cx="40" cy="90" r="1"/>
<circle cx="75" cy="120" r="1.2"/>
<circle cx="110" cy="85" r="0.9"/>
<circle cx="145" cy="110" r="1"/>
<circle cx="180" cy="95" r="1.1"/>
<circle cx="215" cy="130" r="0.8"/>
<circle cx="250" cy="100" r="1"/>
<circle cx="285" cy="130" r="0.9"/>
</g>
<!-- Spotlight -->
<path d="M150,0 L280,220 L20,220 Z" fill="url(#spotGrad)"/>
<!-- Motion trail -->
<path d="M100,170 Q150,100 200,150" fill="none" stroke="#ffffff" stroke-dasharray="4,4" stroke-opacity="0.3" stroke-width="1"/>
<!-- Planets -->
<circle cx="110" cy="160" r="10" fill="url(#planetBlue)"/>
<circle cx="130" cy="130" r="8" fill="url(#planetRed)"/>
<g>
<circle cx="160" cy="140" r="9" fill="url(#planetGreen)"/>
<ellipse cx="160" cy="140" rx="14" ry="4" fill="none" stroke="#a07600" stroke-width="2" transform="rotate(25 160 140)"/>
</g>
<circle cx="190" cy="155" r="7" fill="url(#planetPurple)"/>
<circle cx="170" cy="120" r="11" fill="url(#planetOrange)"/>
<!-- Octopus -->
<g transform="translate(150,220)">
<!-- Tentacles -->
<path d="M-20,-5 C-50,0 -60,30 -50,60" fill="none" stroke="url(#octoGrad)" stroke-width="6" stroke-linecap="round"/>
<path d="M-10,0 C-25,10 -30,35 -10,60" fill="none" stroke="url(#octoGrad)" stroke-width="6" stroke-linecap="round"/>
<path d="M0,2 C-5,15 -5,35 5,60" fill="none" stroke="url(#octoGrad)" stroke-width="6" stroke-linecap="round"/>
<path d="M10,0 C30,10 40,35 30,60" fill="none" stroke="url(#octoGrad)" stroke-width="6" stroke-linecap="round"/>
<path d="M20,0 C35,5 45,30 35,55" fill="none" stroke="url(#octoGrad)" stroke-width="6" stroke-linecap="round"/>
<path d="M-5,-10 C-30,-20 -40,10 -20,50" fill="none" stroke="url(#octoGrad)" stroke-width="6" stroke-linecap="round"/>
<!-- Head -->
<ellipse cx="0" cy="-20" rx="30" ry="25" fill="url(#octoGrad)" stroke="#330033" stroke-width="2"/>
<!-- Eyes -->
<circle cx="-10" cy="-25" r="5" fill="#ffffff"/>
<circle cx="10" cy="-25" r="5" fill="#ffffff"/>
<circle cx="-10" cy="-25" r="2" fill="#000000"/>
<circle cx="10" cy="-25" r="2" fill="#000000"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 (2025-05-14)
Player 1
Judge's Analysis
Player 1's submission features a more dynamic composition, with the octopus actively juggling planets in a visually engaging manner.
The glowing spotlight and the gradient colors of the octopus add depth and charm, aligning well with the prompt.
Player 2's submission is simpler and lacks the same level of energy and creativity in depicting the juggling concept under the spotlight.
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
47
Player 2
36
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
22
Player 2
25
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
10
Player 2
2
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
—
Paths
The number of path elements (path) in the SVG.
Player 1
13
Player 2
8
Groups
The number of group elements (g) in the SVG.
Player 1
—
Player 2
3
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
7
Player 2
8
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
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
18
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
13
Player 2
9
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
9
Player 2
17
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
—
Player 2
2
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
38
Player 2
18
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
9
Player 2
8
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.