GPT-4o
Challenge Creator
Creative Challenge
"An octopus juggling colorful planets in outer space."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="bg" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#000428"/>
<stop offset="100%" stop-color="#000010"/>
</radialGradient>
<linearGradient id="octGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ff46ff"/>
<stop offset="100%" stop-color="#5d33ff"/>
</linearGradient>
<radialGradient id="p1" cx="35%" cy="35%" r="70%">
<stop offset="0%" stop-color="#ffffb3"/>
<stop offset="100%" stop-color="#ff7f00"/>
</radialGradient>
<radialGradient id="p2" cx="35%" cy="35%" r="70%">
<stop offset="0%" stop-color="#b3e5ff"/>
<stop offset="100%" stop-color="#004bff"/>
</radialGradient>
<radialGradient id="p3" cx="35%" cy="35%" r="70%">
<stop offset="0%" stop-color="#ffb3d9"/>
<stop offset="100%" stop-color="#ff0066"/>
</radialGradient>
<radialGradient id="p4" cx="35%" cy="35%" r="70%">
<stop offset="0%" stop-color="#c7ffd8"/>
<stop offset="100%" stop-color="#00b36b"/>
</radialGradient>
<radialGradient id="p5" cx="35%" cy="35%" r="70%">
<stop offset="0%" stop-color="#e5ccff"/>
<stop offset="100%" stop-color="#6a00ff"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#bg)"/>
<!-- Stars -->
<g fill="white">
<circle cx="20" cy="15" r="1.2" opacity="0.8"/>
<circle cx="50" cy="40" r="0.9" opacity="0.9"/>
<circle cx="80" cy="25" r="1.3" opacity="0.7"/>
<circle cx="110" cy="50" r="1.1" opacity="0.8"/>
<circle cx="140" cy="30" r="1.4" opacity="0.9"/>
<circle cx="200" cy="20" r="1.2" opacity="0.8"/>
<circle cx="260" cy="40" r="1" opacity="0.8"/>
<circle cx="280" cy="70" r="1.3" opacity="0.7"/>
<circle cx="240" cy="90" r="1.1" opacity="0.8"/>
<circle cx="60" cy="100" r="1" opacity="0.9"/>
<circle cx="30" cy="130" r="0.9" opacity="0.8"/>
<circle cx="90" cy="140" r="1.2" opacity="0.9"/>
<circle cx="130" cy="120" r="1" opacity="0.7"/>
<circle cx="170" cy="150" r="0.8" opacity="0.8"/>
<circle cx="210" cy="130" r="1.3" opacity="0.9"/>
<circle cx="50" cy="200" r="1.1" opacity="0.7"/>
<circle cx="20" cy="230" r="1.4" opacity="0.8"/>
<circle cx="100" cy="260" r="1.2" opacity="0.9"/>
<circle cx="180" cy="250" r="1" opacity="0.7"/>
<circle cx="250" cy="220" r="1.3" opacity="0.9"/>
<circle cx="280" cy="180" r="1" opacity="0.8"/>
<circle cx="150" cy="20" r="0.9" opacity="0.9"/>
</g>
<!-- Juggling trajectories -->
<g fill="none" stroke="white" stroke-width="0.6" stroke-dasharray="2 3" opacity="0.4">
<path d="M85 80 A120 120 0 0 1 215 60"/>
<path d="M70 220 A130 130 0 0 0 230 240"/>
</g>
<!-- Planets -->
<g filter="url(#glow)">
<circle cx="80" cy="80" r="12" fill="url(#p1)"/>
<circle cx="220" cy="60" r="16" fill="url(#p2)"/>
<circle cx="260" cy="150" r="10" fill="url(#p3)"/>
<circle cx="200" cy="240" r="14" fill="url(#p4)"/>
<circle cx="70" cy="220" r="18" fill="url(#p5)"/>
</g>
<!-- Ring around planet -->
<ellipse cx="220" cy="60" rx="26" ry="8" fill="none" stroke="#bcdcff" stroke-width="2" transform="rotate(-15 220 60)" opacity="0.8"/>
<!-- Octopus arms -->
<g stroke="url(#octGrad)" stroke-width="12" stroke-linecap="round" fill="none" filter="url(#glow)">
<path d="M150 170 Q120 180 90 190 Q70 200 80 220"/>
<path d="M150 170 Q110 160 70 140 Q50 130 60 110"/>
<path d="M150 170 Q140 140 120 110 Q110 90 130 80"/>
<path d="M150 170 Q160 130 190 110 Q210 100 230 90"/>
<path d="M150 170 Q180 160 220 150 Q240 140 250 160"/>
<path d="M150 170 Q170 180 190 210 Q200 230 180 240"/>
<path d="M150 170 Q130 190 120 220 Q110 240 130 250"/>
<path d="M150 170 Q150 140 150 110 Q150 80 160 60"/>
</g>
<!-- Octopus body -->
<ellipse cx="150" cy="160" rx="45" ry="35" fill="url(#octGrad)" filter="url(#glow)"/>
<!-- Octopus eyes -->
<g>
<circle cx="135" cy="155" r="8" fill="white"/>
<circle cx="165" cy="155" r="8" fill="white"/>
<circle cx="135" cy="155" r="4" fill="black"/>
<circle cx="165" cy="155" r="4" fill="black"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#1a0b2e"/>
<stop offset="50%" stop-color="#0f0524"/>
<stop offset="100%" stop-color="#03010a"/>
</radialGradient>
<radialGradient id="planetRed" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ff9d9d"/>
<stop offset="100%" stop-color="#ff2d2d"/>
</radialGradient>
<radialGradient id="planetBlue" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#9dceff"/>
<stop offset="100%" stop-color="#2d7aff"/>
</radialGradient>
<radialGradient id="planetGreen" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#9dffb0"/>
<stop offset="100%" stop-color="#2dff57"/>
</radialGradient>
<radialGradient id="planetPurple" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#d59dff"/>
<stop offset="100%" stop-color="#9d2dff"/>
</radialGradient>
<radialGradient id="planetYellow" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#fff59d"/>
<stop offset="100%" stop-color="#ffda2d"/>
</radialGradient>
<radialGradient id="octopusGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#b288c0"/>
<stop offset="100%" stop-color="#7a4a8b"/>
</radialGradient>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
<pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="0.8" fill="white" opacity="0.8"/>
<circle cx="30" cy="15" r="0.6" fill="white" opacity="0.6"/>
<circle cx="50" cy="30" r="1" fill="white" opacity="0.9"/>
<circle cx="70" cy="40" r="0.5" fill="white" opacity="0.7"/>
<circle cx="90" cy="90" r="0.7" fill="white" opacity="0.8"/>
<circle cx="20" cy="70" r="0.9" fill="white" opacity="0.9"/>
<circle cx="40" cy="50" r="0.5" fill="white" opacity="0.6"/>
<circle cx="80" cy="60" r="1.2" fill="white" opacity="0.7"/>
<circle cx="75" cy="75" r="0.8" fill="white" opacity="0.8"/>
<circle cx="65" cy="15" r="0.7" fill="white" opacity="0.7"/>
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#spaceGradient)"/>
<rect x="0" y="0" width="300" height="300" fill="url(#stars)"/>
<!-- Distant Galaxies -->
<ellipse cx="50" cy="40" rx="30" ry="10" fill="#9d4edd" opacity="0.3" transform="rotate(-20 50 40)"/>
<ellipse cx="250" cy="60" rx="40" ry="8" fill="#4ea8de" opacity="0.3" transform="rotate(15 250 60)"/>
<ellipse cx="200" cy="260" rx="50" ry="15" fill="#f72585" opacity="0.2" transform="rotate(-10 200 260)"/>
<!-- Planets in Juggling Motion -->
<circle cx="80" cy="90" r="15" fill="url(#planetRed)" filter="url(#glow)">
<animate attributeName="cx" values="80;90;100;80" dur="5s" repeatCount="indefinite"/>
<animate attributeName="cy" values="90;60;90" dur="5s" repeatCount="indefinite"/>
</circle>
<circle cx="150" cy="60" r="18" fill="url(#planetBlue)" filter="url(#glow)">
<animate attributeName="cx" values="150;130;110;150" dur="5.5s" repeatCount="indefinite"/>
<animate attributeName="cy" values="60;40;60" dur="5.5s" repeatCount="indefinite"/>
</circle>
<circle cx="220" cy="90" r="12" fill="url(#planetGreen)" filter="url(#glow)">
<animate attributeName="cx" values="220;210;200;220" dur="6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="90;50;90" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="120" cy="40" r="10" fill="url(#planetPurple)" filter="url(#glow)">
<animate attributeName="cx" values="120;140;160;120" dur="4.5s" repeatCount="indefinite"/>
<animate attributeName="cy" values="40;20;40" dur="4.5s" repeatCount="indefinite"/>
</circle>
<circle cx="180" cy="70" r="14" fill="url(#planetYellow)" filter="url(#glow)">
<animate attributeName="cx" values="180;170;160;180" dur="5.2s" repeatCount="indefinite"/>
<animate attributeName="cy" values="70;30;70" dur="5.2s" repeatCount="indefinite"/>
</circle>
<!-- Octopus Body -->
<ellipse cx="150" cy="180" rx="40" ry="35" fill="url(#octopusGradient)"/>
<!-- Octopus Eyes -->
<circle cx="140" cy="170" r="6" fill="white"/>
<circle cx="160" cy="170" r="6" fill="white"/>
<circle cx="140" cy="170" r="3" fill="black"/>
<circle cx="160" cy="170" r="3" fill="black"/>
<!-- Octopus Smile -->
<path d="M135,185 Q150,195 165,185" fill="none" stroke="#5c3a72" stroke-width="2.5" stroke-linecap="round"/>
<!-- Octopus Tentacles -->
<path d="M120,180 Q90,150 80,90" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M120,180 Q90,150 80,90;M120,180 Q85,145 90,60;M120,180 Q90,150 80,90" dur="5s" repeatCount="indefinite"/>
</path>
<path d="M130,190 Q100,220 110,110" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M130,190 Q100,220 110,110;M130,190 Q110,210 130,40;M130,190 Q100,220 110,110" dur="5.5s" repeatCount="indefinite"/>
</path>
<path d="M150,200 Q150,240 150,60" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M150,200 Q150,240 150,60;M150,200 Q160,230 170,20;M150,200 Q150,240 150,60" dur="6s" repeatCount="indefinite"/>
</path>
<path d="M170,190 Q200,220 180,70" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M170,190 Q200,220 180,70;M170,190 Q190,210 160,30;M170,190 Q200,220 180,70" dur="5.2s" repeatCount="indefinite"/>
</path>
<path d="M180,180 Q210,150 220,90" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M180,180 Q210,150 220,90;M180,180 Q215,145 210,50;M180,180 Q210,150 220,90" dur="4.5s" repeatCount="indefinite"/>
</path>
<path d="M115,165 Q80,120 120,40" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M115,165 Q80,120 120,40;M115,165 Q70,110 100,20;M115,165 Q80,120 120,40" dur="5.8s" repeatCount="indefinite"/>
</path>
<path d="M185,165 Q220,120 190,40" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M185,165 Q220,120 190,40;M185,165 Q230,110 210,20;M185,165 Q220,120 190,40" dur="6.2s" repeatCount="indefinite"/>
</path>
<path d="M135,200 Q120,260 180,230" fill="none" stroke="#7a4a8b" stroke-width="6" stroke-linecap="round">
<animate attributeName="d" values="M135,200 Q120,260 180,230;M135,200 Q130,270 190,240;M135,200 Q120,260 180,230" dur="7s" repeatCount="indefinite"/>
</path>
<!-- Rings around planets -->
<ellipse cx="150" cy="60" rx="25" ry="6" fill="none" stroke="#4ea8de" stroke-width="1.5" opacity="0.7" transform="rotate(-15 150 60)">
<animate attributeName="cx" values="150;130;110;150" dur="5.5s" repeatCount="indefinite"/>
<animate attributeName="cy" values="60;40;60" dur="5.5s" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="220" cy="90" rx="18" ry="4" fill="none" stroke="#2dff57" stroke-width="1.5" opacity="0.7" transform="rotate(20 220 90)">
<animate attributeName="cx" values="220;210;200;220" dur="6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="90;50;90" dur="6s" repeatCount="indefinite"/>
</ellipse>
<!-- Small stars twinkling -->
<g>
<circle cx="50" cy="150" r="1" fill="white">
<animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="270" cy="100" r="1.2" fill="white">
<animate attributeName="opacity" values="0.2;1;0.2" dur="2.5s" repeatCount="indefinite"/>
</circle>
<circle cx="200" cy="200" r="0.8" fill="white">
<animate attributeName="opacity" values="0.2;1;0.2" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="100" cy="250" r="1.3" fill="white">
<animate attributeName="opacity" values="0.2;1;0.2" dur="3.5s" repeatCount="indefinite"/>
</circle>
<circle cx="30" cy="220" r="1" fill="white">
<animate attributeName="opacity" values="0.2;1;0.2" dur="2.8s" repeatCount="indefinite"/>
</circle>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet (2025-02-19)
Player 2
Judge's Analysis
Player 2's submission demonstrates stronger adherence to the prompt by depicting a more dynamic juggling scene with an octopus whose tentacles visibly hold colorful planets, creating a sense of motion and interaction.
The composition is more engaging and detailed, with additional elements like rings around the planets and a textured background contributing to better visual appeal and creativity.
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
44
Player 2
41
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
1
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
31
Player 2
24
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
2
Player 2
6
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
10
Player 2
9
Groups
The number of group elements (g) in the SVG.
Player 1
5
Player 2
1
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
7
Player 2
7
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
24
Player 2
15
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
3
Player 2
11
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
17
Player 2
21
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
27
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
1
Player 2
5
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
28
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
8
Player 2
9
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.
