GPT-4o
Challenge Creator
Creative Challenge
"Floating city on giant turtle's back in a starry sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a2a" />
<stop offset="50%" stop-color="#1a1a4a" />
<stop offset="100%" stop-color="#2a2a6a" />
</linearGradient>
<!-- Nebula gradients -->
<radialGradient id="nebula1" cx="30%" cy="30%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#5a3a7a" stop-opacity="0.3" />
<stop offset="100%" stop-color="#5a3a7a" stop-opacity="0" />
</radialGradient>
<radialGradient id="nebula2" cx="70%" cy="20%" r="40%" fx="70%" fy="20%">
<stop offset="0%" stop-color="#7a3a5a" stop-opacity="0.2" />
<stop offset="100%" stop-color="#7a3a5a" stop-opacity="0" />
</radialGradient>
<!-- Star glow -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Turtle shell pattern -->
<pattern id="shellPattern" patternUnits="userSpaceOnUse" width="30" height="30">
<path d="M0,15 L15,0 L30,15 L15,30 Z" fill="#5a4a2f" />
<path d="M15,0 L30,15 L15,30 L0,15 Z" fill="#6a5a3f" />
<path d="M7.5,15 L15,7.5 L22.5,15 L15,22.5 Z" fill="#4a3a1f" stroke="#3a2a0f" stroke-width="0.5" />
</pattern>
<!-- City glow -->
<filter id="cityGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Window light -->
<radialGradient id="windowLight" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffffaa" />
<stop offset="100%" stop-color="#ffaa00" stop-opacity="0" />
</radialGradient>
<!-- Cloud filter -->
<filter id="cloudBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Nebula effects -->
<ellipse cx="90" cy="90" rx="120" ry="80" fill="url(#nebula1)" />
<ellipse cx="210" cy="60" rx="100" ry="70" fill="url(#nebula2)" />
<!-- Stars -->
<g id="stars">
<!-- Larger, glowing stars -->
<circle cx="30" cy="40" r="1.5" fill="white" filter="url(#starGlow)" />
<circle cx="70" cy="25" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="120" cy="35" r="1.2" fill="white" filter="url(#starGlow)" />
<circle cx="180" cy="20" r="1.3" fill="white" filter="url(#starGlow)" />
<circle cx="220" cy="45" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="250" cy="30" r="1.5" fill="white" filter="url(#starGlow)" />
<circle cx="40" cy="80" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="90" cy="60" r="1.2" fill="white" filter="url(#starGlow)" />
<circle cx="160" cy="70" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="210" cy="90" r="1.3" fill="white" filter="url(#starGlow)" />
<circle cx="270" cy="75" r="1.2" fill="white" filter="url(#starGlow)" />
<!-- Small stars -->
<g fill="white">
<circle cx="15" cy="15" r="0.5" />
<circle cx="45" cy="35" r="0.7" />
<circle cx="75" cy="10" r="0.6" />
<circle cx="105" cy="25" r="0.5" />
<circle cx="135" cy="15" r="0.7" />
<circle cx="165" cy="30" r="0.6" />
<circle cx="195" cy="10" r="0.5" />
<circle cx="225" cy="25" r="0.7" />
<circle cx="255" cy="15" r="0.6" />
<circle cx="285" cy="30" r="0.5" />
<circle cx="25" cy="45" r="0.7" />
<circle cx="55" cy="60" r="0.6" />
<circle cx="85" cy="45" r="0.5" />
<circle cx="115" cy="60" r="0.7" />
<circle cx="145" cy="45" r="0.6" />
<circle cx="175" cy="60" r="0.5" />
<circle cx="205" cy="45" r="0.7" />
<circle cx="235" cy="60" r="0.6" />
<circle cx="265" cy="45" r="0.5" />
<circle cx="295" cy="60" r="0.7" />
<circle cx="10" cy="75" r="0.6" />
<circle cx="40" cy="90" r="0.5" />
<circle cx="70" cy="75" r="0.7" />
<circle cx="100" cy="90" r="0.6" />
<circle cx="130" cy="75" r="0.5" />
<circle cx="160" cy="90" r="0.7" />
<circle cx="190" cy="75" r="0.6" />
<circle cx="220" cy="90" r="0.5" />
<circle cx="250" cy="75" r="0.7" />
<circle cx="280" cy="90" r="0.6" />
<circle cx="20" cy="105" r="0.5" />
<circle cx="50" cy="120" r="0.7" />
<circle cx="80" cy="105" r="0.6" />
<circle cx="110" cy="120" r="0.5" />
<circle cx="140" cy="105" r="0.7" />
<circle cx="170" cy="120" r="0.6" />
<circle cx="200" cy="105" r="0.5" />
<circle cx="230" cy="120" r="0.7" />
<circle cx="260" cy="105" r="0.6" />
</g>
</g>
<!-- Distant clouds -->
<g id="distant-clouds" opacity="0.5" filter="url(#cloudBlur)">
<ellipse cx="50" cy="160" rx="30" ry="10" fill="white" opacity="0.2" />
<ellipse cx="250" cy="140" rx="40" ry="12" fill="white" opacity="0.2" />
</g>
<!-- Giant Turtle -->
<g id="turtle" transform="translate(150, 180) scale(0.85)">
<!-- Turtle body -->
<ellipse cx="0" cy="20" rx="130" ry="70" fill="#4d7a44" />
<!-- Turtle shell -->
<ellipse cx="0" cy="0" rx="100" ry="80" fill="url(#shellPattern)" stroke="#3d5a34" stroke-width="5" />
<!-- Shell details -->
<path d="M-80,0 Q -40,-50 0,-60 Q 40,-50 80,0 Q 40,50 0,60 Q -40,50 -80,0 Z" fill="none" stroke="#3d5a34" stroke-width="2" />
<path d="M-60,0 Q -30,-40 0,-45 Q 30,-40 60,0 Q 30,40 0,45 Q -30,40 -60,0 Z" fill="none" stroke="#3d5a34" stroke-width="2" />
<path d="M-40,0 Q -20,-30 0,-35 Q 20,-30 40,0 Q 20,30 0,35 Q -20,30 -40,0 Z" fill="none" stroke="#3d5a34" stroke-width="2" />
<path d="M-20,0 Q -10,-15 0,-20 Q 10,-15 20,0 Q 10,15 0,20 Q -10,15 -20,0 Z" fill="none" stroke="#3d5a34" stroke-width="2" />
<!-- Shell highlight -->
<ellipse cx="-20" cy="-15" rx="15" ry="10" fill="white" opacity="0.1" />
<!-- Turtle head -->
<path d="M-100,0 C-120,-10 -140,-5 -150,10 C-155,20 -150,30 -140,35 C-130,40 -120,35 -110,20 Z" fill="#5d8a54" />
<!-- Turtle eye -->
<circle cx="-140" cy="15" r="3" fill="black" />
<circle cx="-140" cy="15" r="1" fill="white" />
<!-- Turtle flippers/legs -->
<path d="M-90,-45 C-100,-70 -120,-80 -140,-75 C-150,-70 -145,-60 -130,-55 C-115,-50 -100,-50 -90,-45 Z" fill="#5d8a54" />
<path d="M90,-45 C100,-70 120,-80 140,-75 C150,-70 145,-60 130,-55 C115,-50 100,-50 90,-45 Z" fill="#5d8a54" />
<path d="M-70,60 C-80,80 -100,90 -120,85 C-130,80 -125,70 -110,65 C-95,60 -80,60 -70,60 Z" fill="#5d8a54" />
<path d="M70,60 C80,80 100,90 120,85 C130,80 125,70 110,65 C95,60 80,60 70,60 Z" fill="#5d8a54" />
<!-- Turtle tail -->
<path d="M0,80 C10,95 15,110 10,120 C5,125 -5,125 -10,120 C-15,110 -10,95 0,80 Z" fill="#5d8a54" />
</g>
<!-- Floating City on turtle's back -->
<g id="city" transform="translate(150, 170) scale(0.5)" filter="url(#cityGlow)">
<!-- Central dome - main feature -->
<ellipse cx="0" cy="0" rx="40" ry="20" fill="#e0d6b8" stroke="#aa9966" stroke-width="2" />
<path d="M-40,0 Q0,-50 40,0" fill="none" stroke="#aa9966" stroke-width="2" />
<!-- Dome windows -->
<path d="M-30,-5 Q-20,-10 -10,-5" fill="none" stroke="#aa9966" stroke-width="1" />
<path d="M-5,-5 Q5,-10 15,-5" fill="none" stroke="#aa9966" stroke-width="1" />
<path d="M20,-5 Q30,-10 40,-5" fill="none" stroke="#aa9966" stroke-width="1" />
<!-- Dome decoration -->
<circle cx="0" cy="-40" r="5" fill="#d1583d" />
<!-- Central tower -->
<rect x="-5" y="-60" width="10" height="40" fill="#d6c69a" />
<polygon points="0,-70 -7,-60 7,-60" fill="#e0d6b8" />
<circle cx="0" cy="-65" r="3" fill="url(#windowLight)" />
<!-- Left side buildings -->
<g transform="translate(-30, -5)">
<!-- Tall tower -->
<rect x="-10" y="-40" width="20" height="40" fill="#c8b080" />
<polygon points="0,-50 -12,-40 12,-40" fill="#d6c69a" />
<!-- Windows -->
<rect x="-6" y="-35" width="4" height="4" fill="url(#windowLight)" />
<rect x="2" y="-35" width="4" height="4" fill="url(#windowLight)" />
<rect x="-6" y="-25" width="4" height="4" fill="url(#windowLight)" />
<rect x="2" y="-25" width="4" height="4" fill="url(#windowLight)" />
<rect x="-6" y="-15" width="4" height="4" fill="url(#windowLight)" />
<rect x="2" y="-15" width="4" height="4" fill="url(#windowLight)" />
<!-- Smaller structure next to tower -->
<rect x="-20" y="-25" width="8" height="25" fill="#d6c69a" />
<polygon points="-16,-30 -20,-25 -12,-25" fill="#e0d6b8" />
<rect x="-18" y="-20" width="4" height="4" fill="url(#windowLight)" />
<rect x="-18" y="-12" width="4" height="4" fill="url(#windowLight)" />
</g>
<!-- Right side buildings -->
<g transform="translate(30, -5)">
<!-- Fantasy towers -->
<rect x="-8" y="-35" width="16" height="35" fill="#d6c69a" />
<path d="M-8,-35 C-8,-45 8,-45 8,-35" fill="#e0d6b8" />
<!-- Windows -->
<rect x="-4" y="-30" width="3" height="3" fill="url(#windowLight)" />
<rect x="1" y="-30" width="3" height="3" fill="url(#windowLight)" />
<rect x="-4" y="-20" width="3" height="3" fill="url(#windowLight)" />
<rect x="1" y="-20" width="3" height="3" fill="url(#windowLight)" />
<rect x="-4" y="-10" width="3" height="3" fill="url(#windowLight)" />
<rect x="1" y="-10" width="3" height="3" fill="url(#windowLight)" />
<!-- Additional spire -->
<rect x="12" y="-30" width="6" height="30" fill="#c8b080" />
<polygon points="15,-40 10,-30 20,-30" fill="#d6c69a" />
<rect x="13" y="-25" width="4" height="4" fill="url(#windowLight)" />
<rect x="13" y="-15" width="4" height="4" fill="url(#windowLight)" />
</g>
<!-- Front buildings -->
<g transform="translate(0, 10)">
<rect x="-25" y="-15" width="50" height="15" fill="#d6c69a" />
<rect x="-20" y="-20" width="40" height="5" fill="#e0d6b8" />
<!-- Windows -->
<rect x="-18" y="-13" width="4" height="4" fill="url(#windowLight)" />
<rect x="-10" y="-13" width="4" height="4" fill="url(#windowLight)" />
<rect x="-2" y="-13" width="4" height="4" fill="url(#windowLight)" />
<rect x="6" y="-13" width="4" height="4" fill="url(#windowLight)" />
<rect x="14" y="-13" width="4" height="4" fill="url(#windowLight)" />
</g>
<!-- Smaller domes and structures -->
<circle cx="-20" cy="-15" r="8" fill="#e0d6b8" stroke="#aa9966" stroke-width="1" />
<circle cx="20" cy="-15" r="8" fill="#e0d6b8" stroke="#aa9966" stroke-width="1" />
<!-- Bridges connecting structures -->
<path d="M-15,0 C-10,-5 -5,-5 0,0" fill="none" stroke="#d6c69a" stroke-width="3" />
<path d="M0,0 C5,-5 10,-5 15,0" fill="none" stroke="#d6c69a" stroke-width="3" />
<!-- Smaller connecting bridges -->
<path d="M-25,-10 C-22,-13 -18,-13 -15,-10" fill="none" stroke="#d6c69a" stroke-width="2" />
<path d="M15,-10 C18,-13 22,-13 25,-10" fill="none" stroke="#d6c69a" stroke-width="2" />
<!-- Flagpoles and banners -->
<line x1="-30" y1="-45" x2="-30" y2="-60" stroke="#aa9966" stroke-width="1" />
<path d="M-30,-60 L-20,-55 L-30,-50 Z" fill="#d1583d" />
<line x1="30" y1="-45" x2="30" y2="-60" stroke="#aa9966" stroke-width="1" />
<path d="M30,-60 L40,-55 L30,-50 Z" fill="#5d83c1" />
<!-- Extra decoration elements -->
<circle cx="0" cy="-20" r="3" fill="#d1583d" />
<circle cx="-20" cy="-20" r="2" fill="#5d83c1" />
<circle cx="20" cy="-20" r="2" fill="#5d83c1" />
</g>
<!-- Water falling from city edge -->
<g id="water-falls">
<path d="M125,180 C120,190 115,200 120,210" fill="none" stroke="#8ac" stroke-width="0.8" stroke-opacity="0.6" />
<path d="M130,180 C125,195 120,210 125,220" fill="none" stroke="#8ac" stroke-width="0.8" stroke-opacity="0.6" />
<path d="M170,180 C175,190 180,200 175,210" fill="none" stroke="#8ac" stroke-width="0.8" stroke-opacity="0.6" />
<path d="M175,180 C180,195 185,210 180,220" fill="none" stroke="#8ac" stroke-width="0.8" stroke-opacity="0.6" />
</g>
<!-- Atmospheric clouds/mist around turtle -->
<g id="clouds" opacity="0.7">
<ellipse cx="80" cy="200" rx="40" ry="15" fill="white" opacity="0.3" />
<ellipse cx="220" cy="210" rx="35" ry="12" fill="white" opacity="0.3" />
<ellipse cx="150" cy="230" rx="50" ry="15" fill="white" opacity="0.2" />
<ellipse cx="50" cy="250" rx="30" ry="10" fill="white" opacity="0.25" />
<ellipse cx="250" cy="240" rx="30" ry="10" fill="white" opacity="0.25" />
</g>
<!-- Flying elements around the city -->
<g id="flying-elements">
<!-- Small flying creatures/vessels -->
<circle cx="100" cy="130" r="2" fill="#ffdd99" />
<path d="M98,130 Q100,126 102,130" fill="none" stroke="#ffdd99" stroke-width="0.5" />
<circle cx="180" cy="140" r="2" fill="#ffdd99" />
<path d="M178,140 Q180,136 182,140" fill="none" stroke="#ffdd99" stroke-width="0.5" />
<circle cx="140" cy="120" r="2" fill="#ffdd99" />
<path d="M138,120 Q140,116 142,120" fill="none" stroke="#ffdd99" stroke-width="0.5" />
<!-- Birds -->
<path d="M110,110 Q115,108 120,110 Q115,112 110,110" fill="#5d83c1" />
<path d="M190,120 Q195,118 200,120 Q195,122 190,120" fill="#5d83c1" />
<path d="M80,150 Q85,148 90,150 Q85,152 80,150" fill="#5d83c1" />
<!-- Air balloon -->
<g transform="translate(200, 130) scale(0.7)">
<ellipse cx="0" cy="-10" rx="8" ry="10" fill="#d1583d" />
<path d="M-2,0 L-1,5 L1,5 L2,0" fill="#aa9966" />
<rect x="-1" y="5" width="2" height="3" fill="#d6c69a" />
</g>
<!-- Another air balloon -->
<g transform="translate(90, 140) scale(0.5)">
<ellipse cx="0" cy="-10" rx="8" ry="10" fill="#5d83c1" />
<path d="M-2,0 L-1,5 L1,5 L2,0" fill="#aa9966" />
<rect x="-1" y="5" width="2" height="3" fill="#d6c69a" />
</g>
<!-- Fantasy flying ship -->
<g transform="translate(220, 100) scale(0.3)">
<path d="M-20,0 C-15,-5 15,-5 20,0 C15,5 -15,5 -20,0 Z" fill="#c8b080" />
<rect x="-15" y="-5" width="30" height="10" fill="#aa9966" />
<rect x="-2" y="-15" width="4" height="15" fill="#aa9966" />
<path d="M-2,-15 C-2,-20 2,-20 2,-15" fill="#d6c69a" />
<rect x="-10" y="-2" width="3" height="3" fill="url(#windowLight)" />
<rect x="7" y="-2" width="3" height="3" fill="url(#windowLight)" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Starry night sky -->
<rect x="0" y="0" width="300" height="300" fill="#2c3e50" rx="10" />
<g>
<circle cx="20" cy="100" r="2" fill="#ffffff" />
<circle cx="60" cy="200" r="1.5" fill="#ffffff" />
<circle cx="150" cy="50" r="3" fill="#ffffff" />
<circle cx="220" cy="250" r="2.5" fill="#ffffff" />
<circle cx="180" cy="150" r="2" fill="#ffffff" />
</g>
<!-- Gradient sky -->
<defs>
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3498db" />
<stop offset="100%" stop-color="#2ecc71" />
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)" opacity="0.5" />
<!-- Giant turtle -->
<g transform="translate(120 200)">
<ellipse cx="0" cy="0" rx="60" ry="40" fill="#95a5a6" />
<ellipse cx="0" cy="-20" rx="20" ry="15" fill="#e74c3c" />
<path d="M-30 -10 L-15 5 L0 -15 L15 5 L30 -10 Z" stroke="#e74c3c" stroke-width="3" />
</g>
<!-- Floating city -->
<g transform="translate(150 120)">
<rect x="-50" y="-30" width="100" height="60" fill="#f7f7f7" rx="10" />
<path d="M-35 -20 L-20 10 L0 -25 L20 10 L35 -20 Z" stroke="#bdc3c7" stroke-width="2" />
<circle cx="0" cy="20" r="10" fill="#2ecc71" />
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's submission more closely adheres to the prompt with a clear depiction of a turtle carrying a city under a starry sky.
The composition effectively integrates the elements of the prompt with creativity and visual appeal.
In contrast, Player 2's submission lacks clear representation of a turtle or city, making it less aligned with the theme.
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
156
Player 2
13
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
35
Player 2
3
Circles
The number of circle elements (circle) in the SVG.
Player 1
62
Player 2
6
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
15
Player 2
2
Lines
The number of line elements (line) in the SVG.
Player 1
2
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
4
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
38
Player 2
2
Groups
The number of group elements (g) in the SVG.
Player 1
14
Player 2
3
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
1
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
3
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
10
Player 2
1
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
26
Player 2
2
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
24
Player 2
8
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
8
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
132
Player 2
12
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
8
Player 2
1
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.
Similar Challenges
Match #2727
May 10, 2025
"Two penguins swordfighting with candy canes on an iceberg."
P1
P2
Match #2639
May 09, 2025
"A snail racing a rocket on a winding, abstract track."
P1
P2
Match #811
Mar 13, 2025
"A giraffe in a spacesuit playing chess with a floating jellyfish"
P1
P2
Match #459
Mar 13, 2025
"Clockwork butterfly with gears for wings fluttering above a blooming metal flower"
P1
P2
