GPT-4o
Challenge Creator
Creative Challenge
"A fox juggling glowing orbs under a crescent moon."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300">
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0b1d51"/>
<stop offset="100%" stop-color="#000"/>
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<radialGradient id="orbGradient1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff9c4" stop-opacity="1"/>
<stop offset="100%" stop-color="#ffb300" stop-opacity="0.7"/>
</radialGradient>
<radialGradient id="orbGradient2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#e0f7fa" stop-opacity="1"/>
<stop offset="100%" stop-color="#00acc1" stop-opacity="0.7"/>
</radialGradient>
<radialGradient id="orbGradient3" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fce4ec" stop-opacity="1"/>
<stop offset="100%" stop-color="#d81b60" stop-opacity="0.7"/>
</radialGradient>
<linearGradient id="bodyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff9400"/>
<stop offset="100%" stop-color="#d15300"/>
</linearGradient>
<radialGradient id="moonGradient" cx="30%" cy="30%" r="50%">
<stop offset="0%" stop-color="#fff9c4"/>
<stop offset="100%" stop-color="#ffe082" stop-opacity="0.8"/>
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Stars -->
<circle cx="50" cy="40" r="1.5" fill="#fff" opacity="0.8"/>
<circle cx="80" cy="30" r="1" fill="#fff" opacity="0.7"/>
<circle cx="120" cy="30" r="1.3" fill="#fff" opacity="0.7"/>
<circle cx="160" cy="50" r="1" fill="#fff" opacity="0.6"/>
<circle cx="200" cy="20" r="1.2" fill="#fff" opacity="0.8"/>
<!-- Crescent Moon -->
<circle cx="240" cy="60" r="30" fill="url(#moonGradient)"/>
<circle cx="250" cy="55" r="30" fill="#0b1d51"/>
<!-- Juggling Path -->
<path d="M110 100 Q150 20 190 100" fill="none" stroke="#fff" stroke-width="1" stroke-dasharray="3 3" stroke-opacity="0.4"/>
<!-- Glowing Orbs -->
<circle cx="110" cy="100" r="12" fill="url(#orbGradient1)" filter="url(#glow)"/>
<circle cx="150" cy="60" r="12" fill="url(#orbGradient2)" filter="url(#glow)"/>
<circle cx="190" cy="100" r="12" fill="url(#orbGradient3)" filter="url(#glow)"/>
<!-- Ground Shadow -->
<ellipse cx="150" cy="260" rx="50" ry="10" fill="black" fill-opacity="0.3"/>
<!-- Fox Tail -->
<path d="M110 200 C80 170 70 200 100 210 C80 200 90 230 110 220" fill="url(#bodyGradient)" stroke="#d15300" stroke-width="1"/>
<!-- Fox Body -->
<ellipse cx="150" cy="200" rx="40" ry="60" fill="url(#bodyGradient)" stroke="#d15300" stroke-width="1"/>
<!-- Fox Legs -->
<rect x="125" y="240" width="15" height="20" fill="#d15300"/>
<rect x="160" y="240" width="15" height="20" fill="#d15300"/>
<!-- Fox Head -->
<ellipse cx="150" cy="140" rx="30" ry="25" fill="url(#bodyGradient)" stroke="#d15300" stroke-width="1"/>
<!-- Fox Ears -->
<polygon points="130,120 150,90 170,120" fill="#ff9400" stroke="#d15300" stroke-width="1"/>
<polygon points="140,125 150,100 160,125" fill="#fff2e0" opacity="0.8"/>
<!-- Fox Face Markings -->
<path d="M140,145 Q150,135 160,145 Q150,155 140,145 Z" fill="#fff2e0"/>
<!-- Fox Eyes and Nose -->
<circle cx="142" cy="140" r="3" fill="#000"/>
<circle cx="158" cy="140" r="3" fill="#000"/>
<circle cx="150" cy="150" r="2" fill="#000"/>
<!-- Sparkles around Orbs -->
<path d="M111 83 l4 0 M113 81 l0 4" stroke="#fff" stroke-width="1" stroke-opacity="0.6"/>
<path d="M148 53 l4 0 M150 51 l0 4" stroke="#fff" stroke-width="1" stroke-opacity="0.6"/>
<path d="M189 95 l4 0 M191 93 l0 4" stroke="#fff" stroke-width="1" stroke-opacity="0.6"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" aria-label="A fox juggling glowing orbs under a crescent moon" role="img">
<defs>
<!-- Gradient for glowing orbs -->
<radialGradient id="orbGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffd94d" stop-opacity="1"/>
<stop offset="80%" stop-color="#ffb400" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#ff7a00" stop-opacity="0"/>
</radialGradient>
<!-- Gradient for crescent moon -->
<radialGradient id="moonGradient" cx="70%" cy="40%" r="60%" fx="60%" fy="35%">
<stop offset="20%" stop-color="#fff9cc"/>
<stop offset="100%" stop-color="#bfbf7f"/>
</radialGradient>
<!-- Pattern for fox fur texture -->
<pattern id="furPattern" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(20)">
<rect width="6" height="6" fill="#f05a24"/>
<path d="M1 6 L3 0 L5 6 Z" fill="#e14400" opacity="0.6"/>
<path d="M0 3 L6 3" stroke="#c23900" stroke-width="0.5"/>
</pattern>
<!-- Glossy gradient for fox's eyes -->
<radialGradient id="eyeGloss" cx="50%" cy="50%" r="60%">
<stop offset="30%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#000" stop-opacity="0.7"/>
</radialGradient>
<!-- Shadow filter -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="3" stdDeviation="2" flood-color="#000000" flood-opacity="0.6"/>
</filter>
<!-- Glow filter for orbs -->
<filter id="glow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#ffb400" flood-opacity="0.8"/>
<feDropShadow dx="0" dy="0" stdDeviation="12" flood-color="#ff7a00" flood-opacity="0.4"/>
</filter>
<!-- Soft inner highlight for moon -->
<radialGradient id="moonHighlight" cx="65%" cy="40%" r="40%">
<stop offset="40%" stop-color="#ffffed" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#bfbf7f" stop-opacity="0"/>
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#nightSky)" />
<linearGradient id="nightSky" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#0b0c2e"/>
<stop offset="80%" stop-color="#1a1b57"/>
<stop offset="100%" stop-color="#2c2e88"/>
</linearGradient>
<!-- Stars scattered around -->
<g stroke="#fff" stroke-width="0" fill="#fff" opacity="0.7">
<circle cx="20" cy="40" r="0.8"/>
<circle cx="60" cy="10" r="1.2"/>
<circle cx="90" cy="25" r="1"/>
<circle cx="140" cy="50" r="0.7"/>
<circle cx="180" cy="30" r="1.1"/>
<circle cx="210" cy="70" r="0.6"/>
<circle cx="260" cy="15" r="1.3"/>
<circle cx="280" cy="50" r="0.9"/>
<circle cx="50" cy="80" r="1"/>
</g>
<!-- Crescent Moon -->
<g filter="url(#shadow)">
<ellipse cx="240" cy="70" rx="35" ry="50" fill="url(#moonGradient)" />
<ellipse cx="260" cy="70" rx="30" ry="50" fill="#0b0c2e"/>
<ellipse cx="238" cy="73" rx="33" ry="48" fill="url(#moonHighlight)" opacity="0.35"/>
</g>
<!-- Juggling Orbs and Glow -->
<g filter="url(#glow)" fill="url(#orbGlow)" stroke="#ffee99" stroke-width="1.2">
<circle cx="165" cy="140" r="12" />
<circle cx="115" cy="100" r="10" />
<circle cx="190" cy="85" r="9" />
</g>
<g fill="#fff3b0" stroke="#ffb400" stroke-width="0.8">
<circle cx="165" cy="140" r="6" />
<circle cx="115" cy="100" r="5" />
<circle cx="190" cy="85" r="4.5" />
<circle cx="165" cy="140" r="2.5" fill="#fffccd" opacity="0.9"/>
<circle cx="115" cy="100" r="2" fill="#fffccd" opacity="0.9"/>
<circle cx="190" cy="85" r="1.8" fill="#fffccd" opacity="0.9"/>
</g>
<!-- Fox body -->
<g filter="url(#shadow)">
<ellipse cx="150" cy="190" rx="60" ry="40" fill="url(#furPattern)" stroke="#bf4310" stroke-width="2"/>
<!-- Tail -->
<path d="M96 210 q-20 30 10 45 q25 10 45 -10 q-10 -30 -30 -40 q-15 -10 -25 5Z" fill="url(#furPattern)" stroke="#bf4310" stroke-width="1.7"/>
<path d="M87 205 q-10 20 11 31 q18 10 38 -15 q-10 -30 -29 -35 q-20 -7 -20 19Z" fill="url(#furPattern)" opacity="0.7"/>
<!-- Chest white fur -->
<path d="M130 170 q30 45 13 80 q-40 -5 -44 -40 q-3 -40 25 -40Z" fill="url(#moonHighlight)" opacity="0.8" />
</g>
<!-- Fox head -->
<g filter="url(#shadow)" transform="translate(142 135)">
<ellipse cx="0" cy="0" rx="42" ry="38" fill="url(#furPattern)" stroke="#bf4310" stroke-width="2.4" />
<!-- Ears -->
<polygon points="-32,-20 -20,-60 0,-42" fill="#d45a1f" stroke="#8c2e00" stroke-width="1"/>
<polygon points="32,-20 20,-60 0,-42" fill="#d45a1f" stroke="#8c2e00" stroke-width="1"/>
<polygon points="-26,-25 -19,-47 -10,-33" fill="#fff3b0" opacity="0.8"/>
<polygon points="26,-25 19,-47 10,-33" fill="#fff3b0" opacity="0.8"/>
<!-- Eyes -->
<ellipse cx="-15" cy="-6" rx="7" ry="10" fill="url(#eyeGloss)" />
<ellipse cx="15" cy="-6" rx="7" ry="10" fill="url(#eyeGloss)" />
<circle cx="-15" cy="-4" r="3.2" fill="#310"/>
<circle cx="15" cy="-4" r="3.2" fill="#310"/>
<circle cx="-14" cy="-4" r="1.5" fill="#fff" opacity="0.85"/>
<circle cx="16" cy="-5" r="1.5" fill="#fff" opacity="0.85"/>
<!-- Snout and nose -->
<path d="M-10 10 q15 14 20 0 q5 14 -20 20" fill="#ffbf73" stroke="#bf5b21" stroke-width="1.1"/>
<ellipse cx="5" cy="18" rx="7" ry="4" fill="#8c2e00"/>
<circle cx="5" cy="18" r="2.8" fill="#000"/>
<!-- Mouth line -->
<path d="M12 15 q4 5 1 12" stroke="#8c2e00" stroke-width="1.3" fill="none" />
</g>
<!-- Fox front legs juggling -->
<g stroke="#bf4310" stroke-linecap="round" stroke-width="7" fill="none" filter="url(#shadow)">
<!-- Left front leg raising orb at 115,100 -->
<path d="M130 185 q-10 -30 10 -50" />
<!-- Right front leg reaching orb at 165,140 -->
<path d="M170 180 q15 -40 10 -70" />
</g>
<!-- Fingers and paws stylized -->
<g fill="#d9701f" stroke="#bf4310" stroke-width="1" filter="url(#shadow)">
<!-- Left paw near orb 115,100 -->
<circle cx="108" cy="98" r="6" />
<circle cx="115" cy="104" r="4" />
<!-- Right paw near orb 165,140 -->
<circle cx="172" cy="135" r="7" />
<circle cx="180" cy="145" r="4.5" />
</g>
<!-- Subtle grass foreground for depth -->
<g fill="none" stroke="#2d4d0e" stroke-width="1.5" opacity="0.3" filter="url(#shadow)">
<path d="M40 245 q5 -15 11 0" />
<path d="M70 250 q7 -20 15 0" />
<path d="M100 240 q4 -10 8 0" />
<path d="M130 252 q8 -18 13 0" />
<path d="M165 248 q6 -15 10 0" />
<path d="M195 255 q5 -20 12 0" />
<path d="M220 250 q7 -25 16 0" />
<path d="M255 243 q6 -18 14 0" />
</g>
<!-- Orb trails, slender arcs suggesting juggling motion -->
<path d="M115 100 q15 -25 40 -20" fill="none" stroke="#ffb400" stroke-width="1.8" stroke-linecap="round" opacity="0.7"/>
<path d="M165 140 q-15 -20 10 -45" fill="none" stroke="#ffb400" stroke-width="1.8" stroke-linecap="round" opacity="0.7"/>
<path d="M190 85 q-20 18 -60 55" fill="none" stroke="#ffb400" stroke-width="1.8" stroke-linecap="round" opacity="0.7"/>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 mini (2025-04-14)
Player 2
Judge's Analysis
Player 2's submission demonstrates a higher level of creativity and technical detail, with a dynamic pose for the fox and more intricate juggling effects.
The glowing orbs are well-incorporated and the crescent moon is more prominently featured.
Player 1's submission, while clean and simplistic, lacks the same level of depth and dynamism in the composition.
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
27
Player 2
61
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
3
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
13
Player 2
27
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
3
Player 2
8
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
2
Player 2
4
Paths
The number of path elements (path) in the SVG.
Player 1
6
Player 2
20
Groups
The number of group elements (g) in the SVG.
Player 1
—
Player 2
9
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
Player 2
5
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
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
6
Player 2
16
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
8
Player 2
17
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
14
Player 2
25
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
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
21
Player 2
54
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
7
Player 2
7
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.
