GPT-4o
Challenge Creator
Creative Challenge
"A giraffe wearing roller skates on a rainbow."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="30%" r="80%">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="100%" stop-color="#1E90FF"/>
</radialGradient>
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000"/>
<stop offset="16.66%" stop-color="#FF7F00"/>
<stop offset="33.33%" stop-color="#FFFF00"/>
<stop offset="50%" stop-color="#00FF00"/>
<stop offset="66.66%" stop-color="#0000FF"/>
<stop offset="83.33%" stop-color="#4B0082"/>
<stop offset="100%" stop-color="#9400D3"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Fluffy clouds -->
<g opacity="0.8" fill="white">
<circle cx="60" cy="50" r="12"/>
<circle cx="72" cy="45" r="16"/>
<circle cx="84" cy="50" r="12"/>
<circle cx="240" cy="70" r="10"/>
<circle cx="250" cy="65" r="14"/>
<circle cx="260" cy="70" r="10"/>
</g>
<!-- Rainbow track with 3D effect -->
<path d="M 20 240 Q 150 100 280 240" stroke="#FF0000" stroke-width="22" fill="none" opacity="0.9"/>
<path d="M 22 242 Q 150 102 278 242" stroke="#FF7F00" stroke-width="20" fill="none" opacity="0.9"/>
<path d="M 24 244 Q 150 104 276 244" stroke="#FFFF00" stroke-width="18" fill="none" opacity="0.9"/>
<path d="M 26 246 Q 150 106 274 246" stroke="#00FF00" stroke-width="16" fill="none" opacity="0.9"/>
<path d="M 28 248 Q 150 108 272 248" stroke="#0000FF" stroke-width="14" fill="none" opacity="0.9"/>
<path d="M 30 250 Q 150 110 270 250" stroke="#4B0082" stroke-width="12" fill="none" opacity="0.9"/>
<path d="M 32 252 Q 150 112 268 252" stroke="#9400D3" stroke-width="10" fill="none" opacity="0.9"/>
<!-- Giraffe in dynamic skating pose -->
<!-- Body -->
<ellipse cx="150" cy="165" rx="18" ry="28" fill="#FDB462" transform="rotate(5 150 165)"/>
<!-- Neck -->
<ellipse cx="138" cy="130" rx="7" ry="32" fill="#FDB462" transform="rotate(-25 138 130)"/>
<!-- Head -->
<ellipse cx="125" cy="95" rx="11" ry="14" fill="#FDB462" transform="rotate(-20 125 95)"/>
<!-- Giraffe spots pattern -->
<g fill="#8B4513">
<circle cx="145" cy="155" r="3"/>
<circle cx="155" cy="160" r="4"/>
<circle cx="150" cy="175" r="3"/>
<circle cx="160" cy="170" r="2"/>
<ellipse cx="142" cy="180" rx="2" ry="3"/>
<circle cx="135" cy="140" r="2"/>
<circle cx="142" cy="125" r="3"/>
<circle cx="130" cy="118" r="2"/>
<circle cx="120" cy="100" r="2"/>
<ellipse cx="125" cy="85" rx="1.5" ry="2"/>
</g>
<!-- Ears -->
<ellipse cx="120" cy="88" rx="2.5" ry="4" fill="#FDB462" transform="rotate(-35 120 88)"/>
<ellipse cx="128" cy="88" rx="2.5" ry="4" fill="#FDB462" transform="rotate(-15 128 88)"/>
<!-- Horns -->
<rect x="122" y="78" width="1.5" height="6" fill="#8B4513" transform="rotate(-20 122 78)"/>
<rect x="126" y="78" width="1.5" height="6" fill="#8B4513" transform="rotate(-20 126 78)"/>
<circle cx="122" cy="78" r="1" fill="#654321"/>
<circle cx="126" cy="78" r="1" fill="#654321"/>
<!-- Eye -->
<circle cx="123" cy="92" r="2" fill="white"/>
<circle cx="123" cy="92" r="1.2" fill="black"/>
<circle cx="123.5" cy="91.5" r="0.5" fill="white"/>
<!-- Legs in skating motion -->
<ellipse cx="142" cy="190" rx="3.5" ry="14" fill="#FDB462" transform="rotate(25 142 190)"/>
<ellipse cx="158" cy="195" rx="3.5" ry="16" fill="#FDB462" transform="rotate(-10 158 195)"/>
<!-- Spectacular roller skates -->
<!-- Left skate -->
<ellipse cx="138" cy="208" rx="14" ry="4.5" fill="#FF1493" transform="rotate(20 138 208)"/>
<rect x="126" y="205" width="24" height="2" fill="#FFD700" transform="rotate(20 138 207)"/>
<circle cx="130" cy="205" r="2.5" fill="#333" transform="rotate(20 138 208)"/>
<circle cx="138" cy="209" r="2.5" fill="#333" transform="rotate(20 138 208)"/>
<circle cx="146" cy="213" r="2.5" fill="#333" transform="rotate(20 138 208)"/>
<!-- Right skate -->
<ellipse cx="162" cy="215" rx="14" ry="4.5" fill="#00FF7F" transform="rotate(-5 162 215)"/>
<rect x="150" y="212" width="24" height="2" fill="#FFD700" transform="rotate(-5 162 214)"/>
<circle cx="154" cy="212" r="2.5" fill="#333" transform="rotate(-5 162 215)"/>
<circle cx="162" cy="216" r="2.5" fill="#333" transform="rotate(-5 162 215)"/>
<circle cx="170" cy="220" r="2.5" fill="#333" transform="rotate(-5 162 215)"/>
<!-- Tail -->
<path d="M 168 170 Q 178 180 173 190" stroke="#FDB462" stroke-width="3" fill="none"/>
<ellipse cx="173" cy="190" rx="2" ry="3" fill="#8B4513"/>
<!-- Speed lines -->
<g stroke="white" stroke-width="2" opacity="0.7">
<line x1="105" y1="110" x2="95" y2="105"/>
<line x1="110" y1="115" x2="100" y2="110"/>
<line x1="115" y1="120" x2="105" y2="115"/>
<line x1="180" y1="180" x2="190" y2="175"/>
<line x1="185" y1="185" x2="195" y2="180"/>
</g>
<!-- Magical sparkles -->
<g filter="url(#glow)">
<circle cx="90" cy="125" r="1.5" fill="#FFD700"/>
<circle cx="210" cy="130" r="2" fill="#FF69B4"/>
<circle cx="75" cy="145" r="1" fill="#00FFFF"/>
<circle cx="225" cy="155" r="1.5" fill="#FFD700"/>
<circle cx="60" cy="165" r="1" fill="#FF1493"/>
<circle cx="240" cy="170" r="2" fill="#00FF7F"/>
<polygon points="45,135 47,139 51,139 48,142 49,146 45,143 41,146 42,142 39,139 43,139" fill="#FFF"/>
<polygon points="255,145 256.5,148 259.5,148 257,150.5 258,153.5 255,151 252,153.5 253,150.5 250.5,148 253.5,148" fill="#FFF"/>
</g>
<!-- Rainbow reflection sparkles -->
<g opacity="0.6">
<circle cx="120" cy="190" r="1" fill="#FF7F00"/>
<circle cx="180" cy="195" r="1" fill="#4B0082"/>
<circle cx="160" cy="185" r="1.5" fill="#00FF00"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for reuse -->
<defs>
<!-- Rainbow gradient -->
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="16.6%" stop-color="#ff9900"/>
<stop offset="33.3%" stop-color="#ffff00"/>
<stop offset="50%" stop-color="#00ff00"/>
<stop offset="66.6%" stop-color="#0099ff"/>
<stop offset="83.3%" stop-color="#6633ff"/>
<stop offset="100%" stop-color="#ff00ff"/>
</linearGradient>
<!-- Giraffe pattern -->
<pattern id="giraffePattern" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,0 L10,0 L20,10 L10,20 L0,10 Z" fill="#e09952"/>
<path d="M5,5 L15,5 L15,15 L5,15 Z" fill="#7d4c26"/>
</pattern>
<!-- Sparkle filter -->
<filter id="sparkle" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feSpecularLighting in="blur" specularExponent="30" lighting-color="#ffffff" result="light">
<fePointLight x="150" y="60" z="100"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#87ceeb"/>
<path d="M0,250 C50,220 100,280 150,250 S250,200 300,250 L300,300 L0,300 Z" fill="#78d64b"/>
<ellipse cx="150" cy="280" rx="120" ry="10" fill="rgba(0,0,0,0.2)"/>
<!-- Rainbow path -->
<path d="M20,250 C80,150 220,150 280,250" stroke="url(#rainbowGradient)" stroke-width="15" fill="none" stroke-linecap="round"/>
<!-- Clouds -->
<g fill="white" opacity="0.8">
<ellipse cx="40" cy="70" rx="25" ry="15"/>
<ellipse cx="55" cy="65" rx="20" ry="18"/>
<ellipse cx="70" cy="75" rx="22" ry="12"/>
<ellipse cx="240" cy="50" rx="30" ry="18"/>
<ellipse cx="260" cy="45" rx="25" ry="15"/>
<ellipse cx="280" cy="55" rx="20" ry="12"/>
</g>
<!-- Giraffe body -->
<g transform="translate(120, 80) scale(0.9)">
<!-- Body -->
<ellipse cx="40" cy="130" rx="25" ry="40" fill="url(#giraffePattern)" stroke="#7d4c26" stroke-width="1.5"/>
<!-- Neck -->
<path d="M40,90 C35,70 30,50 40,30 C45,20 50,10 55,20 C60,40 55,70 50,90" fill="url(#giraffePattern)" stroke="#7d4c26" stroke-width="1.5"/>
<!-- Head -->
<ellipse cx="48" cy="20" rx="12" ry="18" fill="url(#giraffePattern)" stroke="#7d4c26" stroke-width="1.5"/>
<!-- Face features -->
<circle cx="53" cy="15" r="2" fill="#000"/>
<path d="M55,20 C58,22 60,24 58,26" fill="none" stroke="#000" stroke-width="1"/>
<path d="M42,15 C45,12 47,10 50,12" fill="#7d4c26" stroke="#7d4c26" stroke-width="1.5"/>
<path d="M46,12 C48,10 50,8 52,10" fill="#7d4c26" stroke="#7d4c26" stroke-width="1.5"/>
<!-- Legs -->
<path d="M25,160 L20,210" stroke="#e09952" stroke-width="10" stroke-linecap="round"/>
<path d="M55,160 L60,210" stroke="#e09952" stroke-width="10" stroke-linecap="round"/>
<path d="M30,160 L25,210" stroke="#e09952" stroke-width="10" stroke-linecap="round"/>
<path d="M50,160 L55,210" stroke="#e09952" stroke-width="10" stroke-linecap="round"/>
<!-- Tail -->
<path d="M20,130 C15,140 10,150 15,160" stroke="#e09952" stroke-width="4" fill="none"/>
<ellipse cx="15" cy="165" rx="5" ry="3" fill="#7d4c26"/>
<!-- Roller skates -->
<g transform="translate(20, 210)">
<rect x="-7" y="0" width="14" height="8" rx="2" fill="#ff6699" stroke="#333" stroke-width="1"/>
<circle cx="-5" cy="12" r="4" fill="#333"/>
<circle cx="5" cy="12" r="4" fill="#333"/>
<rect x="-7" y="8" width="14" height="2" fill="#ff6699" stroke="#333" stroke-width="0.5"/>
</g>
<g transform="translate(60, 210)">
<rect x="-7" y="0" width="14" height="8" rx="2" fill="#ff6699" stroke="#333" stroke-width="1"/>
<circle cx="-5" cy="12" r="4" fill="#333"/>
<circle cx="5" cy="12" r="4" fill="#333"/>
<rect x="-7" y="8" width="14" height="2" fill="#ff6699" stroke="#333" stroke-width="0.5"/>
</g>
<g transform="translate(25, 210)">
<rect x="-7" y="0" width="14" height="8" rx="2" fill="#ff6699" stroke="#333" stroke-width="1"/>
<circle cx="-5" cy="12" r="4" fill="#333"/>
<circle cx="5" cy="12" r="4" fill="#333"/>
<rect x="-7" y="8" width="14" height="2" fill="#ff6699" stroke="#333" stroke-width="0.5"/>
</g>
<g transform="translate(55, 210)">
<rect x="-7" y="0" width="14" height="8" rx="2" fill="#ff6699" stroke="#333" stroke-width="1"/>
<circle cx="-5" cy="12" r="4" fill="#333"/>
<circle cx="5" cy="12" r="4" fill="#333"/>
<rect x="-7" y="8" width="14" height="2" fill="#ff6699" stroke="#333" stroke-width="0.5"/>
</g>
</g>
<!-- Speed lines -->
<g stroke="#fff" stroke-width="2" opacity="0.7">
<path d="M80,220 L60,230" stroke-dasharray="5,5"/>
<path d="M90,200 L70,215" stroke-dasharray="8,4"/>
<path d="M100,180 L80,200" stroke-dasharray="6,6"/>
</g>
<!-- Sparkles -->
<g filter="url(#sparkle)">
<circle cx="220" cy="200" r="3" fill="white"/>
<circle cx="240" cy="180" r="2" fill="white"/>
<circle cx="200" cy="220" r="2.5" fill="white"/>
<circle cx="180" cy="190" r="2" fill="white"/>
</g>
<!-- Sun -->
<g transform="translate(260, 40)">
<circle cx="0" cy="0" r="15" fill="#ffdd44"/>
<g stroke="#ffdd44" stroke-width="2">
<path d="M0,-20 L0,-30"/>
<path d="M0,20 L0,30"/>
<path d="M-20,0 L-30,0"/>
<path d="M20,0 L30,0"/>
<path d="M-14,-14 L-20,-20"/>
<path d="M14,14 L20,20"/>
<path d="M-14,14 L-20,20"/>
<path d="M14,-14 L20,-20"/>
</g>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 Thinking (2025-05-14)
Player 1
Judge's Analysis
Player 1's image effectively combines a giraffe, roller skates, and a rainbow in a whimsical and cohesive way, with a playful composition and additional decorative elements like stars and vibrant colors.
Player 2's submission, while creative, lacks the same level of polish and compositional balance, as the rainbow and giraffe's position feel less dynamic and visually engaging.
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
66
Player 2
57
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
5
Player 2
9
Circles
The number of circle elements (circle) in the SVG.
Player 1
34
Player 2
14
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
12
Player 2
10
Lines
The number of line elements (line) in the SVG.
Player 1
5
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
2
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
8
Player 2
24
Groups
The number of group elements (g) in the SVG.
Player 1
5
Player 2
10
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
2
Player 2
1
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
10
Player 2
2
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
9
Player 2
22
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
21
Player 2
18
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
19
Player 2
6
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
16
Player 2
61
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
3
Player 2
3
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.