GPT-4o
Challenge Creator
Creative Challenge
"An octopus juggling airplanes under a starry night sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#00162e" />
<stop offset="100%" stop-color="#000814" />
</linearGradient>
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
<pattern id="stars" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="white" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<rect width="300" height="300" fill="url(#stars)" opacity="0.8" />
<circle cx="150" cy="100" r="30" fill="url(#starGlow)" />
<circle cx="50" cy="50" r="2" fill="white" />
<circle cx="250" cy="80" r="2" fill="white" />
<circle cx="100" cy="200" r="2" fill="white" />
<circle cx="200" cy="250" r="2" fill="white" />
<circle cx="280" cy="150" r="2" fill="white" />
<circle cx="120" cy="30" r="2" fill="white" />
<circle cx="80" cy="120" r="2" fill="white" />
<circle cx="220" cy="50" r="2" fill="white" />
<circle cx="170" cy="180" r="2" fill="white" />
<circle cx="40" cy="250" r="2" fill="white" />
<circle cx="270" cy="220" r="2" fill="white" />
<path d="M150,200 Q100,100 50,150 T150,200" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M150,200 Q200,100 250,150 T150,200" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<circle cx="150" cy="200" r="20" fill="#ff6f61" />
<ellipse cx="150" cy="180" rx="30" ry="20" fill="#ff6f61" />
<circle cx="130" cy="170" r="5" fill="white" />
<circle cx="170" cy="170" r="5" fill="white" />
<path d="M140,190 Q150,200 160,190" fill="none" stroke="black" stroke-width="2" />
<path d="M150,220 Q170,230 150,240 Q130,230 150,220" fill="#ff6f61" />
<path d="M150,240 Q170,250 150,260 Q130,250 150,240" fill="#ff6f61" />
<path d="M150,260 Q170,270 150,280 Q130,270 150,260" fill="#ff6f61" />
<path d="M150,280 Q170,290 150,300 Q130,290 150,280" fill="#ff6f61" />
<path d="M100,220 Q120,200 140,220" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M200,220 Q180,200 160,220" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M120,240 Q140,220 160,240" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M180,240 Q160,220 140,240" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M110,260 Q130,240 150,260" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M190,260 Q170,240 150,260" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M100,280 Q120,260 140,280" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M200,280 Q180,260 160,280" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M120,300 Q140,280 160,300" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M180,300 Q160,280 140,300" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M110,320 Q130,300 150,320" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M190,320 Q170,300 150,320" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M100,340 Q120,320 140,340" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M200,340 Q180,320 160,340" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M120,360 Q140,340 160,360" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
<path d="M180,360 Q160,340 140,360" fill="none" stroke="#ff6f61" stroke-width="5" stroke-linecap="round" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Gradient for night sky -->
<defs>
<radialGradient id="skyGrad" cx="50%" cy="30%" r="80%">
<stop offset="0%" stop-color="#232965"/>
<stop offset="70%" stop-color="#182044"/>
<stop offset="100%" stop-color="#0c0e25"/>
</radialGradient>
<radialGradient id="octoBody" cx="50%" cy="40%" r="80%">
<stop offset="0%" stop-color="#ff60a8"/>
<stop offset="60%" stop-color="#8c26b5"/>
<stop offset="100%" stop-color="#431a4c"/>
</radialGradient>
<radialGradient id="tentacleGrad" cx="40%" cy="15%" r="100%">
<stop offset="0%" stop-color="#eb75d6"/>
<stop offset="60%" stop-color="#7e2fc2"/>
<stop offset="100%" stop-color="#340248"/>
</radialGradient>
<linearGradient id="airplaneGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f5f6fa"/>
<stop offset="60%" stop-color="#b6b7cc"/>
<stop offset="100%" stop-color="#3a496a"/>
</linearGradient>
<radialGradient id="starGlow" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#fffbe9" stop-opacity="1"/>
<stop offset="80%" stop-color="#ffe099" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#fffbe9" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background night sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)"/>
<!-- Stars: both glowing big and small scatter -->
<g>
<!-- Glowing big stars -->
<circle cx="62" cy="44" r="12" fill="url(#starGlow)" opacity="0.7"/>
<circle cx="204" cy="32" r="7" fill="url(#starGlow)" opacity="0.4"/>
<circle cx="271" cy="79" r="6" fill="url(#starGlow)" opacity="0.5"/>
<circle cx="97" cy="25" r="6" fill="url(#starGlow)" opacity="0.35"/>
<!-- Small stars -->
<g fill="#fffbe9" opacity="0.7">
<circle cx="30" cy="25" r="1.1"/>
<circle cx="55" cy="81" r="0.7"/>
<circle cx="74" cy="14" r="0.8"/>
<circle cx="102" cy="68" r="0.9"/>
<circle cx="183" cy="43" r="1.2"/>
<circle cx="257" cy="58" r="0.7"/>
<circle cx="216" cy="94" r="1"/>
<circle cx="294" cy="18" r="0.6"/>
<circle cx="259" cy="28" r="0.7"/>
<circle cx="111" cy="44" r="1"/>
<circle cx="168" cy="20" r="0.8"/>
<circle cx="38" cy="95" r="0.8"/>
<circle cx="63" cy="58" r="0.4"/>
<circle cx="87" cy="89" r="0.7"/>
<circle cx="134" cy="23" r="0.7"/>
<circle cx="170" cy="70" r="0.8"/>
<circle cx="277" cy="44" r="0.5"/>
<circle cx="210" cy="24" r="1"/>
</g>
</g>
<!-- Moon (stylized crescent) -->
<g>
<ellipse cx="251" cy="52" rx="20" ry="18" fill="#fffcd1" opacity="0.7"/>
<ellipse cx="257" cy="47" rx="16" ry="13" fill="url(#skyGrad)" opacity="1"/>
</g>
<!-- Ocean hint at the bottom (waves) -->
<g>
<path d="M0 250 Q 50 240 100 254 T 200 248 T 300 260 V300 H0Z"
fill="#2e3065" opacity="0.65"/>
<path d="M0 268 Q 55 265 110 272 T 210 265 T 300 273 V300 H0Z"
fill="#433e94" opacity="0.53"/>
</g>
<!-- Octopus main body -->
<ellipse cx="150" cy="185" rx="52" ry="48" fill="url(#octoBody)" filter="url(#f1)"/>
<!-- Octopus shadow for "pop" -->
<ellipse cx="150" cy="205" rx="30" ry="8" fill="#100f1e" opacity="0.3" />
<!-- Octopus face: Eyes -->
<g>
<ellipse cx="137" cy="180" rx="9.2" ry="12" fill="#fff"/>
<ellipse cx="163" cy="180" rx="9.2" ry="12" fill="#fff"/>
<ellipse cx="139" cy="184" rx="4.7" ry="6" fill="#2c114b"/>
<ellipse cx="165" cy="184" rx="4.7" ry="6" fill="#2c114b"/>
<!-- Highlight dots in eyes -->
<circle cx="142" cy="181" r="1.5" fill="#fff" opacity="0.8"/>
<circle cx="168" cy="181" r="1.5" fill="#fff" opacity="0.8"/>
<!-- Smile -->
<path d="M143 197 Q150 205 157 197" stroke="#e853a0" stroke-width="3.5" fill="none" stroke-linecap="round"/>
</g>
<!-- Tentacles with gradients and suckers -->
<g>
<!-- Each tentacle will be a path with a gradient fill, and small circles for suckers -->
<!-- Rightmost tentacle (up, juggling) -->
<path d="M170 202 Q210 188 242 103 Q246 91 260 90"
stroke="url(#tentacleGrad)" stroke-width="17" fill="none" stroke-linecap="round"/>
<!-- Suckers on rightmost tentacle -->
<g>
<circle cx="200" cy="175" r="3" fill="#ffe3ec" stroke="#8b3eb1" stroke-width="0.7" />
<ellipse cx="218" cy="145" rx="2.4" ry="1.3" fill="#f9b8e5" stroke="#873da6" stroke-width="0.6"/>
<ellipse cx="233" cy="123" rx="2.1" ry="1.2" fill="#fdeaec" stroke="#7a39a2" stroke-width="0.6"/>
</g>
<!-- Next tentacle (loop upward left) -->
<path d="M140 210 Q112 136 50 120 Q43 121 38 105"
stroke="url(#tentacleGrad)" stroke-width="16" fill="none" stroke-linecap="round"/>
<g>
<circle cx="99" cy="148" r="2.7" fill="#fff4f7" stroke="#872ad7" stroke-width="0.5" />
<ellipse cx="75" cy="128" rx="2.4" ry="1.2" fill="#f9bbe7" stroke="#8a3fae" stroke-width="0.5"/>
</g>
<!-- Middle-right tentacle (spiral right) -->
<path d="M170 220 Q225 230 227 258 Q225 278 209 275 Q200 273 200 263 Q200 254 216 257"
stroke="url(#tentacleGrad)" stroke-width="17" fill="none" stroke-linecap="round"/>
<g>
<ellipse cx="205" cy="236" rx="2.8" ry="1.2" fill="#ffeaff" stroke="#8f2ab7" stroke-width="0.5"/>
<ellipse cx="213" cy="249" rx="2.2" ry="0.8" fill="#fae7ff" stroke="#8f2ab7" stroke-width="0.4"/>
</g>
<!-- Middle-left tentacle (curl) -->
<path d="M135 225 Q63 255 75 270 Q94 292 140 255"
stroke="url(#tentacleGrad)" stroke-width="16" fill="none" stroke-linecap="round"/>
<g>
<ellipse cx="85" cy="263" rx="2.1" ry="1.1" fill="#ffe4fa" stroke="#963db9" stroke-width="0.4"/>
<ellipse cx="105" cy="275" rx="2" ry="1" fill="#f9c0ed" stroke="#932eb3" stroke-width="0.4"/>
<ellipse cx="129" cy="257" rx="1.6" ry="0.7" fill="#ffe8fc" stroke="#a53cbf" stroke-width="0.3"/>
</g>
<!-- Bottom tentacle (forward spiral) -->
<path d="M151 235 Q151 283 185 295 Q220 307 218 275"
stroke="url(#tentacleGrad)" stroke-width="14" fill="none" stroke-linecap="round"/>
<g>
<ellipse cx="158" cy="272" rx="2.2" ry="1.1" fill="#ffe1f2" stroke="#b971cf" stroke-width="0.4"/>
<ellipse cx="176" cy="287" rx="2" ry="1" fill="#fbccf4" stroke="#a651b5" stroke-width="0.3"/>
</g>
<!-- Top tentacle (straight up to the left) -->
<path d="M150 196 Q148 127 155 55 Q158 33 134 28"
stroke="url(#tentacleGrad)" stroke-width="15" fill="none" stroke-linecap="round"/>
<g>
<ellipse cx="154" cy="105" rx="2.5" ry="1.3" fill="#f3e7fd" stroke="#7e48c3" stroke-width="0.6"/>
<ellipse cx="152" cy="66" rx="2.3" ry="1.1" fill="#ffe8fa" stroke="#9042c9" stroke-width="0.5"/>
</g>
<!-- Left tentacle (wide arc left) -->
<path d="M126 201 Q70 190 38 150 Q15 127 52 106"
stroke="url(#tentacleGrad)" stroke-width="16" fill="none" stroke-linecap="round"/>
<g>
<ellipse cx="60" cy="138" rx="2.2" ry="1.1" fill="#fff1fb" stroke="#c258d3" stroke-width="0.5"/>
<ellipse cx="38" cy="126" rx="2" ry="1" fill="#ffd9ef" stroke="#8c3daa" stroke-width="0.3"/>
</g>
<!-- Extra tentacle (right lower arc) -->
<path d="M172 211 Q230 202 280 153 Q291 140 250 120"
stroke="url(#tentacleGrad)" stroke-width="15" fill="none" stroke-linecap="round"/>
<g>
<ellipse cx="235" cy="175" rx="2.4" ry="1.3" fill="#fee3fd" stroke="#c85bdb" stroke-width="0.5"/>
<ellipse cx="260" cy="147" rx="2" ry="1" fill="#fbbee3" stroke="#944ebc" stroke-width="0.3"/>
</g>
</g>
<!-- Airplanes being juggled by tentacle tips -->
<g>
<!-- Specific positions above/toward tentacles -->
<!-- Rightmost (top right) -->
<g transform="translate(260,80) rotate(-9)">
<g>
<polygon points="0,-11 4.5,8 -4.5,8"
fill="url(#airplaneGrad)"/>
<rect x="-1.3" y="6.5" width="2.6" height="7.8" rx="1.1" fill="#3a92b3" />
<polygon points="0,8.1 6.2,8.6 0,12.7 -6.2,8.6"
fill="#f2cc60"/>
</g>
</g>
<!-- Top left -->
<g transform="translate(137,24) rotate(-6)">
<g>
<polygon points="0,-12 5,8 -5,8"
fill="url(#airplaneGrad)"/>
<rect x="-1.4" y="7.2" width="2.8" height="8.6" rx="1.2" fill="#43a378" />
<polygon points="0,9.2 7,10 0,14 -7,10"
fill="#caf594"/>
</g>
</g>
<!-- Upper left arc -->
<g transform="translate(53,111) rotate(19)">
<g>
<polygon points="0,-11 4.2,8 -4.2,8"
fill="url(#airplaneGrad)"/>
<rect x="-1.1" y="6.7" width="2.2" height="7.6" rx="1.1" fill="#e87281"/>
<polygon points="0,7.9 6,9.1 0,12.3 -6,9.1"
fill="#f6c5bc"/>
</g>
</g>
<!-- Far left arc -->
<g transform="translate(44,141) rotate(-15)">
<g>
<polygon points="0,-8 3,6 -3,6"
fill="url(#airplaneGrad)"/>
<rect x="-0.8" y="5.3" width="1.6" height="5" rx="0.8" fill="#abb7ee"/>
<polygon points="0,7 5,7.5 0,10.5 -5,7.5"
fill="#daebec"/>
</g>
</g>
<!-- Bottom right curl -->
<g transform="translate(171,288) rotate(11)">
<g>
<polygon points="0,-7.5 3.6,5 -3.6,5"
fill="url(#airplaneGrad)"/>
<rect x="-0.7" y="3.8" width="1.4" height="4.2" rx="0.7" fill="#ed85b2"/>
<polygon points="0,5.5 4.1,6.9 0,9.1 -4.1,6.9"
fill="#f5e3ea"/>
</g>
</g>
<!-- Upper right curl -->
<g transform="translate(230,134) rotate(9)">
<g>
<polygon points="0,-8 3.7,6.2 -3.7,6.2"
fill="url(#airplaneGrad)"/>
<rect x="-0.7" y="5.6" width="1.4" height="4.1" rx="0.7" fill="#d8db7a"/>
<polygon points="0,6.8 5,7.7 0,10.1 -5,7.7"
fill="#f2ecb0"/>
</g>
</g>
<!-- Top center (flip vertically) -->
<g transform="translate(157,35) rotate(13)">
<g>
<polygon points="0,-11 4.2,8 -4.2,8"
fill="url(#airplaneGrad)"/>
<rect x="-1.1" y="6.7" width="2.2" height="7.6" rx="1.1" fill="#edbeef"/>
<polygon points="0,7.9 6,9.1 0,12.3 -6,9.1"
fill="#f7d4f2"/>
</g>
</g>
</g>
<!-- Sparkle on octopus head for highlight -->
<ellipse cx="165" cy="165" rx="16" ry="5" fill="#fff" opacity="0.20"/>
<!-- Abstract "motion swirls" for juggling -->
<g>
<path d="M240 87 Q217 107 197 127" fill="none" stroke="#c6f5ff" stroke-width="2" stroke-dasharray="3 5" opacity="0.33"/>
<path d="M153 46 Q155 82 144 121" fill="none" stroke="#fbeed8" stroke-width="2" stroke-dasharray="3.5 4" opacity="0.27"/>
<path d="M50 115 Q90 145 120 177" fill="none" stroke="#f7d1fd" stroke-width="1.8" stroke-dasharray="2 7" opacity="0.25"/>
<path d="M90 267 Q155 245 205 270" fill="none" stroke="#e3c5ff" stroke-width="2" stroke-dasharray="3 5" opacity="0.20"/>
<path d="M42 150 q27 12 55 40" fill="none" stroke="#f2cbdf" stroke-width="1.8" stroke-dasharray="2 7" opacity="0.18"/>
<path d="M264 153 Q210 178 172 193" fill="none" stroke="#e5e7f2" stroke-width="1.8" stroke-dasharray="2 7" opacity="0.20"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 (2025-04-14)
Player 2
Judge's Analysis
Player 2's image adheres more closely to the prompt with a clear depiction of an octopus juggling airplanes under a starry night sky.
The creative use of curving tentacles and floating airplanes adds dynamism and visual appeal, while the starry background enhances the scene's atmosphere.
Player 1's image, while visually interesting, does not meet the prompt's requirements as it lacks an octopus and airplanes, making Player 2's submission the clear winner.
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
42
Player 2
90
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
8
Circles
The number of circle elements (circle) in the SVG.
Player 1
16
Player 2
26
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
1
Player 2
25
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
14
Paths
The number of path elements (path) in the SVG.
Player 1
23
Player 2
17
Groups
The number of group elements (g) in the SVG.
Player 1
—
Player 2
30
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
2
Player 2
5
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
—
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
1
Player 2
19
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
19
Player 2
33
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
5
Player 2
76
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
7
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
52
Player 2
54
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
2
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
3
Player 2
5
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.
