GPT-4o
Challenge Creator
Creative Challenge
"A fox juggling planets under a glowing crescent moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradient for the moon crescent -->
<radialGradient id="moonGlow" cx="0.3" cy="0.3" r="0.7">
<stop offset="0%" stop-color="#fffced" stop-opacity="1"/>
<stop offset="100%" stop-color="#e3e0c5" stop-opacity="0"/>
</radialGradient>
<radialGradient id="moonGradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#fef8dc"/>
<stop offset="100%" stop-color="#c4c19b"/>
</radialGradient>
<!-- Star glow -->
<radialGradient id="starGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="white" stop-opacity="0.8"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Planet textures -->
<radialGradient id="planetRed" cx="0.5" cy="0.5" r="0.5" >
<stop offset="0%" stop-color="#ff6b6b" />
<stop offset="100%" stop-color="#a62222" />
</radialGradient>
<pattern id="ringsPattern" patternUnits="userSpaceOnUse" width="12" height="12" patternTransform="rotate(15)">
<circle cx="6" cy="6" r="5" stroke="#cfc4a2" stroke-width="1" fill="none"/>
<circle cx="6" cy="6" r="3" stroke="#b8ad7a" stroke-width="1" fill="none"/>
</pattern>
<radialGradient id="planetBlue" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#89cff0"/>
<stop offset="100%" stop-color="#064273"/>
</radialGradient>
<radialGradient id="planetGreen" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#6bcc65"/>
<stop offset="100%" stop-color="#1c3e13"/>
</radialGradient>
<!-- Fox Fur Gradients -->
<radialGradient id="furOrange" cx="0.4" cy="0.4" r="0.7">
<stop offset="0%" stop-color="#ff7d34"/>
<stop offset="100%" stop-color="#c24700"/>
</radialGradient>
<radialGradient id="furWhite" cx="0.5" cy="0.5" r="0.4">
<stop offset="0%" stop-color="#faf5e6"/>
<stop offset="100%" stop-color="#d4cbbe"/>
</radialGradient>
<!-- Shadow gradient for depth -->
<radialGradient id="shadow" cx="0.5" cy="0.5" r="0.7" >
<stop offset="0%" stop-color="#000" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<!-- Nose shine -->
<radialGradient id="noseShine" cx="0.7" cy="0.3" r="0.15">
<stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-opacity="0"/>
</radialGradient>
<!-- Orbital path lines -->
<radialGradient id="orbitGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#ffe9a1" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#f5dda8" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background: deep twilight night gradient -->
<rect width="300" height="300" fill="url(#nightGradient)">
<animate attributeName="fill" values="#0d1b2a; #172a45; #0d1b2a" dur="15s" repeatCount="indefinite" />
</rect>
<radialGradient id="nightGradient" cx="0.5" cy="0.7" r="1" fx="0.5" fy="0.7" gradientUnits="userSpaceOnUse">
<stop offset="5%" stop-color="#15162c"/>
<stop offset="95%" stop-color="#0c1a2a"/>
</radialGradient>
<rect width="300" height="300" fill="url(#nightGradient)"/>
<!-- Stars scattered -->
<g stroke="none" fill="white" opacity="0.8">
<circle cx="25" cy="45" r="1.4" />
<circle cx="80" cy="65" r="1" />
<circle cx="190" cy="25" r="1.2" />
<circle cx="280" cy="40" r="1" />
<circle cx="260" cy="90" r="1.3" />
<circle cx="140" cy="120" r="1" />
<circle cx="200" cy="80" r="0.9" />
<circle cx="50" cy="130" r="1.5" />
<circle cx="160" cy="150" r="1" />
<circle cx="80" cy="180" r="1.2" />
<circle cx="230" cy="210" r="1" />
<circle cx="100" cy="230" r="0.8" />
</g>
<!-- Glowing crescent moon -->
<g transform="translate(230,60)">
<circle r="40" fill="url(#moonGlow)" />
<circle r="38" fill="url(#moonGradient)" />
<circle r="32" fill="#15162c" transform="translate(10,0)" />
</g>
<!-- Orbital arcs for planets the fox juggles -->
<circle cx="150" cy="200" r="55" fill="none" stroke="url(#orbitGlow)" stroke-width="1" opacity="0.5" />
<circle cx="150" cy="200" r="43" fill="none" stroke="url(#orbitGlow)" stroke-width="1" opacity="0.4" />
<circle cx="150" cy="200" r="33" fill="none" stroke="url(#orbitGlow)" stroke-width="1" opacity="0.3" />
<!-- Planets with slight rotation animation -->
<g>
<!-- Largest red planet with rings at orbit r=55 -->
<g transform="translate(150,200)">
<circle cx="55" cy="0" r="12" fill="url(#planetRed)" filter="url(#planetShadow1)"/>
<ellipse cx="55" cy="0" rx="18" ry="6" fill="url(#ringsPattern)" opacity="0.7" />
</g>
<animateTransform href="#planetRed" attributeName="transform" type="rotate" from="0 150 200" to="360 150 200" dur="30s" repeatCount="indefinite"/>
</g>
<g>
<!-- Mid orbit blue planet -->
<circle cx="150" cy="200" r="10" fill="url(#planetBlue)" filter="url(#planetShadow2)"/>
<animateMotion dur="22s" repeatCount="indefinite" rotate="auto">
<mpath href="#orbitPath2"/>
</animateMotion>
</g>
<g>
<!-- Inner green planet -->
<circle cx="150" cy="200" r="8" fill="url(#planetGreen)" filter="url(#planetShadow3)"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 200" to="-360 150 200" dur="18s" repeatCount="indefinite"/>
</g>
<!-- Orbit paths definitions -->
<path id="orbitPath1" d="M205,200 A55,55 0 1 1 95,200 A55,55 0 1 1 205,200" fill="none" />
<path id="orbitPath2" d="M193,200 A43,43 0 1 1 107,200 A43,43 0 1 1 193,200" fill="none" />
<path id="orbitPath3" d="M183,200 A33,33 0 1 1 117,200 A33,33 0 1 1 183,200" fill="none" />
<!-- Fox body -->
<g transform="translate(150,215)">
<!-- shadow under fox for grounding -->
<ellipse cx="0" cy="25" rx="45" ry="15" fill="url(#shadow)" />
<!-- Legs -->
<g>
<ellipse cx="-20" cy="55" rx="9" ry="25" fill="url(#furOrange)" />
<ellipse cx="20" cy="55" rx="9" ry="25" fill="url(#furOrange)" />
<path d="M-30 70 Q-25 80 -15 70" fill="#6a2804" />
<path d="M10 70 Q15 80 25 70" fill="#6a2804" />
</g>
<!-- Body -->
<path d="M-55 15 Q-25 90 0 95 Q25 90 55 15 Q65 -25 0 -75 Q-65 -25 -55 15Z" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="1.5"/>
<path d="M-50 15 Q-20 70 0 75 Q20 70 50 15 Q52 0 0 -70 Q-52 0 -50 15Z" fill="url(#furWhite)" opacity="0.8"/>
<!-- Tail -->
<path d="
M55 15
Q90 35 75 85
Q60 70 55 95
Q105 50 40 0
Q50 5 55 15Z
" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="1.6" />
<path d="
M70 80
Q87 100 70 120
Q54 95 68 85
Z
" fill="white" opacity="0.9" />
<!-- Neck fur collar -->
<path d="M-35 10 Q-10 25 0 25 Q10 25 35 10 Q30 30 0 40 Q-30 30 -35 10Z" fill="url(#furWhite)"/>
<!-- Body markings -->
<path d="M-15 35 Q-5 60 10 60 Q20 60 25 35" stroke="#7f3a00" stroke-width="1" fill="none" opacity="0.25"/>
</g>
<!-- Fox head -->
<g transform="translate(150, 130)">
<!-- Main head shape -->
<path d="
M-45 30
Q-48 10 -40 0
Q-65 -10 -50 -45
Q-25 -33 -20 -70
Q10 -60 20 -70
Q35 -40 -15 20
Q-50 35 -45 30Z
" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="2" />
<!-- Inner face white patch -->
<path d="
M-40 15
Q-42 8 -35 0
Q-52 -10 -45 -40
Q-30 -30 -22 -65
Q7 -58 13 -65
Q29 -38 -10 15
Q-40 20 -40 15Z
" fill="url(#furWhite)" />
<!-- Ears -->
<path d="M-50 -45 L-65 -90 L-35 -70 Z" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="1.8" />
<path d="M-55 -73 L-50 -85 L-40 -75Z" fill="#fff8e0" />
<path d="M20 -70 L35 -90 L40 -70 Z" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="1.8" />
<path d="M35 -85 L32 -75 L40 -75Z" fill="#fff8e0" />
<!-- Eyes -->
<ellipse cx="-25" cy="-30" rx="9" ry="7" fill="#3c1a00" />
<ellipse cx="10" cy="-30" rx="7" ry="5" fill="#3c1a00"/>
<circle cx="-25" cy="-32" r="3" fill="#f7f3de" />
<circle cx="10" cy="-32" r="2.5" fill="#f7f3de" />
<!-- Eye lashes -->
<path d="M-29 -38 Q-25 -43 -22 -39" fill="none" stroke="#311500" stroke-width="1" stroke-linecap="round" />
<path d="M6 -37 Q10 -43 14 -39" fill="none" stroke="#311500" stroke-width="1" stroke-linecap="round" />
<!-- Nose -->
<ellipse cx="-9" cy="-12" rx="6" ry="4" fill="#2d1300" />
<circle cx="-8" cy="-13" r="2" fill="url(#noseShine)" />
<!-- Whisker style lines -->
<path d="M-20 -5 L-45 5" stroke="#4f2c0c" stroke-width="1.2" stroke-linecap="round"/>
<path d="M-18 -10 L-46 0" stroke="#4f2c0c" stroke-width="1.2" stroke-linecap="round"/>
<path d="M15 -3 L40 10" stroke="#4f2c0c" stroke-width="1.2" stroke-linecap="round"/>
<path d="M15 -8 L45 0" stroke="#4f2c0c" stroke-width="1.2" stroke-linecap="round"/>
<!-- Mouth -->
<path d="M-14 -5 Q-9 -3 -7 -5" stroke="#311500" stroke-width="1.5" fill="none" />
</g>
<!-- Fox's front paws tossing planets -->
<g transform="translate(150, 215)">
<!-- Left paw throwing the biggest planet -->
<circle cx="-32" cy="10" r="15" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="1" />
<circle cx="-32" cy="10" r="9" fill="url(#furWhite)" />
<ellipse cx="-35" cy="18" rx="5" ry="9" fill="#7f3a00" opacity="0.4" />
<path d="M-42 8 Q-30 -5 -20 18" stroke="#7f3a00" stroke-width="1" fill="none" opacity="0.3" />
<!-- Right paw tossing smallest planet -->
<circle cx="32" cy="15" r="14" fill="url(#furOrange)" stroke="#7f3a00" stroke-width="1" />
<circle cx="32" cy="15" r="9" fill="url(#furWhite)" />
<ellipse cx="33" cy="22" rx="6" ry="9" fill="#7f3a00" opacity="0.4" />
<path d="M42 14 Q35 6 24 25" stroke="#7f3a00" stroke-width="1" fill="none" opacity="0.3" />
</g>
<!-- Planet shadows for realism -->
<filter id="planetShadow1" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#660000" flood-opacity="0.6" />
</filter>
<filter id="planetShadow2" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="1.5" stdDeviation="1.5" flood-color="#123058" flood-opacity="0.5" />
</filter>
<filter id="planetShadow3" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="1.2" stdDeviation="1.2" flood-color="#194213" flood-opacity="0.5" />
</filter>
<!-- Subtle glowing effect on the juggling planets -->
<circle cx="205" cy="200" r="15" fill="url(#starGlow)" />
<circle cx="193" cy="200" r="12" fill="url(#starGlow)" />
<circle cx="183" cy="200" r="10" fill="url(#starGlow)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Gradients -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#13023b"/>
<stop offset="100%" stop-color="#000814"/>
</linearGradient>
<linearGradient id="foxGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff9f1c"/>
<stop offset="100%" stop-color="#ff4e00"/>
</linearGradient>
<linearGradient id="tailGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff4e00"/>
<stop offset="100%" stop-color="#d81159"/>
</linearGradient>
<radialGradient id="planetRed" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#ff6b6b"/>
<stop offset="100%" stop-color="#b5179e"/>
</radialGradient>
<radialGradient id="planetGreen" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#caffbf"/>
<stop offset="100%" stop-color="#2b9348"/>
</radialGradient>
<radialGradient id="planetBlue" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#a0f4ff"/>
<stop offset="100%" stop-color="#0077b6"/>
</radialGradient>
<!-- Glow filter -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Striped planet pattern -->
<pattern id="stripePlanet" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
<rect width="6" height="6" fill="#3b9cff"/>
<rect width="3" height="6" fill="#ffffff" opacity="0.3"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Stars -->
<g fill="#ffffff" opacity="0.8">
<circle cx="20" cy="30" r="1"/>
<circle cx="50" cy="43" r="1.2"/>
<circle cx="80" cy="75" r="0.8"/>
<circle cx="130" cy="40" r="1.1"/>
<circle cx="160" cy="20" r="0.9"/>
<circle cx="200" cy="60" r="1.3"/>
<circle cx="240" cy="30" r="0.7"/>
<circle cx="260" cy="90" r="1"/>
<circle cx="280" cy="50" r="0.8"/>
<circle cx="30" cy="120" r="1"/>
<circle cx="70" cy="180" r="0.9"/>
<circle cx="100" cy="200" r="0.7"/>
<circle cx="150" cy="150" r="1.2"/>
<circle cx="170" cy="230" r="1"/>
<circle cx="210" cy="190" r="0.8"/>
<circle cx="250" cy="160" r="1.1"/>
<circle cx="270" cy="210" r="0.7"/>
<circle cx="40" cy="250" r="1"/>
<circle cx="90" cy="270" r="0.8"/>
<circle cx="190" cy="270" r="1"/>
</g>
<!-- Crescent Moon -->
<g filter="url(#glow)">
<circle cx="230" cy="60" r="25" fill="#f1faee"/>
<circle cx="238" cy="55" r="25" fill="url(#skyGrad)"/>
</g>
<!-- Fox -->
<g id="fox" transform="translate(-5,-10)">
<!-- Tail -->
<path d="M150 210 Q200 180 190 235 Q175 275 130 240 Z" fill="url(#tailGrad)"/>
<path d="M170 235 Q173 228 180 233 Q178 240 172 244 Z" fill="#fff"/>
<!-- Body -->
<ellipse cx="125" cy="210" rx="25" ry="40" fill="url(#foxGrad)"/>
<ellipse cx="125" cy="222" rx="15" ry="20" fill="#ffffff" opacity="0.9"/>
<!-- Legs -->
<path d="M115 250 L115 275" stroke="#ff4e00" stroke-width="8" stroke-linecap="round"/>
<path d="M135 250 L135 275" stroke="#ff4e00" stroke-width="8" stroke-linecap="round"/>
<!-- Arms -->
<path d="M108 200 Q90 180 100 165" stroke="#ff4e00" stroke-width="6" stroke-linecap="round" fill="none"/>
<path d="M142 200 Q160 180 150 165" stroke="#ff4e00" stroke-width="6" stroke-linecap="round" fill="none"/>
<!-- Head -->
<circle cx="125" cy="155" r="20" fill="url(#foxGrad)"/>
<ellipse cx="125" cy="163" rx="10" ry="6" fill="#ffffff" opacity="0.9"/>
<!-- Eyes -->
<circle cx="118" cy="152" r="2" fill="#000"/>
<circle cx="132" cy="152" r="2" fill="#000"/>
<!-- Nose -->
<circle cx="125" cy="162" r="2" fill="#000"/>
<!-- Ears -->
<polygon points="110,140 116,115 130,140" fill="#ff9f1c"/>
<polygon points="140,140 134,115 121,140" fill="#ff9f1c"/>
<polygon points="114,133 116,120 124,133" fill="#fff" opacity="0.6"/>
<polygon points="136,133 134,120 126,133" fill="#fff" opacity="0.6"/>
</g>
<!-- Juggling Arc -->
<path d="M95 115 A35 35 0 0 1 155 115" fill="none" stroke="#ffffff55" stroke-width="1" stroke-dasharray="3 3"/>
<!-- Planets -->
<circle cx="100" cy="110" r="10" fill="url(#planetRed)"/>
<circle cx="125" cy="80" r="12" fill="url(#planetGreen)"/>
<g>
<circle cx="150" cy="110" r="9" fill="url(#planetBlue)"/>
<!-- Ring around blue planet -->
<ellipse cx="150" cy="110" rx="14" ry="4" fill="none" stroke="#a0f4ff" stroke-width="1" opacity="0.7"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
O3 high (2025-04-16)
Player 2
Judge's Analysis
Player 2's image more closely adheres to the prompt by clearly depicting a fox juggling planets under a glowing crescent moon.
The composition is vibrant and visually cohesive, showing creativity and technical execution.
Player 1's submission, while creative, does not fully address the 'juggling planets' theme, making it less aligned with the prompt.
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
70
Player 2
47
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
3
Circles
The number of circle elements (circle) in the SVG.
Player 1
33
Player 2
29
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
9
Player 2
4
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
4
Paths
The number of path elements (path) in the SVG.
Player 1
26
Player 2
7
Groups
The number of group elements (g) in the SVG.
Player 1
10
Player 2
4
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
12
Player 2
6
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
3
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
12
Player 2
7
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
23
Player 2
6
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
32
Player 2
16
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
4
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
6
Player 2
1
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
94
Player 2
18
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
12
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.
