GPT-4o
Challenge Creator
Creative Challenge
"An umbrella growing from a tree, raining colors onto the ground below."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGrad" cx="50%" cy="30%" r="80%">
<stop offset="0%" stop-color="#e8faff"/>
<stop offset="100%" stop-color="#7ab0ff"/>
</radialGradient>
<linearGradient id="barkGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8e5a2e"/>
<stop offset="50%" stop-color="#c08a4c"/>
<stop offset="100%" stop-color="#5a3b1f"/>
</linearGradient>
<linearGradient id="rainbowGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff4f4f"/>
<stop offset="14%" stop-color="#ff814f"/>
<stop offset="28%" stop-color="#ffb32f"/>
<stop offset="42%" stop-color="#fff84f"/>
<stop offset="57%" stop-color="#3fea6d"/>
<stop offset="71%" stop-color="#34d2f4"/>
<stop offset="85%" stop-color="#625cff"/>
<stop offset="100%" stop-color="#c54fff"/>
</linearGradient>
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<path d="M0 240 Q75 225 150 240 T300 240 L300 300 L0 300 Z" fill="#3e9b3e"/>
<g opacity="0.75">
<ellipse cx="45" cy="255" rx="25" ry="7" fill="#ff4f4f"/>
<ellipse cx="85" cy="252" rx="28" ry="8" fill="#ff814f"/>
<ellipse cx="125" cy="258" rx="24" ry="7" fill="#ffb32f"/>
<ellipse cx="165" cy="253" rx="27" ry="8" fill="#fff84f"/>
<ellipse cx="205" cy="257" rx="25" ry="7" fill="#3fea6d"/>
<ellipse cx="245" cy="252" rx="27" ry="8" fill="#34d2f4"/>
<ellipse cx="285" cy="255" rx="24" ry="7" fill="#625cff"/>
</g>
<g id="tree">
<path d="M145 270 C147 220 148 180 150 150 C152 180 153 220 155 270 Z" fill="url(#barkGrad)"/>
<path d="M150 150 Q148 120 150 105" stroke="url(#barkGrad)" stroke-width="5" stroke-linecap="round" fill="none"/>
<path d="M90 100 A60 60 0 0 1 210 100
Q195 125 180 100
Q165 125 150 100
Q135 125 120 100
Q105 125 90 100 Z"
fill="url(#rainbowGrad)" stroke="#552200" stroke-width="1"/>
</g>
<g id="rain" filter="url(#softGlow)">
<line x1="95" y1="100" x2="95" y2="135" stroke="#ff4f4f" stroke-width="2" stroke-linecap="round"/>
<line x1="112" y1="100" x2="112" y2="140" stroke="#ff814f" stroke-width="2" stroke-linecap="round"/>
<line x1="129" y1="100" x2="129" y2="133" stroke="#ffb32f" stroke-width="2" stroke-linecap="round"/>
<line x1="146" y1="100" x2="146" y2="138" stroke="#fff84f" stroke-width="2" stroke-linecap="round"/>
<line x1="163" y1="100" x2="163" y2="130" stroke="#3fea6d" stroke-width="2" stroke-linecap="round"/>
<line x1="180" y1="100" x2="180" y2="137" stroke="#34d2f4" stroke-width="2" stroke-linecap="round"/>
<line x1="197" y1="100" x2="197" y2="132" stroke="#625cff" stroke-width="2" stroke-linecap="round"/>
<path d="M90 135 Q95 145 90 155 Q85 145 90 135 Z" fill="#ff4f4f"/>
<path d="M107 140 Q112 150 107 160 Q102 150 107 140 Z" fill="#ff814f"/>
<path d="M124 133 Q129 143 124 153 Q119 143 124 133 Z" fill="#ffb32f"/>
<path d="M141 138 Q146 148 141 158 Q136 148 141 138 Z" fill="#fff84f"/>
<path d="M158 130 Q163 140 158 150 Q153 140 158 130 Z" fill="#3fea6d"/>
<path d="M175 137 Q180 147 175 157 Q170 147 175 137 Z" fill="#34d2f4"/>
<path d="M192 132 Q197 142 192 152 Q187 142 192 132 Z" fill="#625cff"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bgGradient" cx="0.5" cy="0.5" r="0.7">
<stop offset="0%" stop-color="#E0F2F7" />
<stop offset="100%" stop-color="#B3E0F2" />
</radialGradient>
<linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#7A5230" />
<stop offset="50%" stop-color="#8B5A2B" />
<stop offset="100%" stop-color="#7A5230" />
</linearGradient>
<pattern id="barkPattern" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(15)">
<path d="M0 4 Q2 2 4 4 T8 4" stroke="#604020" stroke-width="0.5" fill="none" />
<path d="M0 0 Q2 2 4 0 T8 0" stroke="#604020" stroke-width="0.5" fill="none" opacity="0.7"/>
</pattern>
<linearGradient id="segRed" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FF5252"/><stop offset="100%" stop-color="#E53935"/></linearGradient>
<linearGradient id="segOrange" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFAB40"/><stop offset="100%" stop-color="#FF8F00"/></linearGradient>
<linearGradient id="segYellow" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFFF8D"/><stop offset="100%" stop-color="#FDD835"/></linearGradient>
<linearGradient id="segGreen" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#69F0AE"/><stop offset="100%" stop-color="#43A047"/></linearGradient>
<linearGradient id="segBlue" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#40C4FF"/><stop offset="100%" stop-color="#1E88E5"/></linearGradient>
<linearGradient id="segIndigo" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#7C4DFF"/><stop offset="100%" stop-color="#5E35B1"/></linearGradient>
<linearGradient id="segViolet" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#E040FB"/><stop offset="100%" stop-color="#C2185B"/></linearGradient>
<linearGradient id="segPink" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FF80AB"/><stop offset="100%" stop-color="#F06292"/></linearGradient>
<linearGradient id="rainRedGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FF5252" stop-opacity="0.9"/><stop offset="100%" stop-color="#E53935" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainOrangeGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFAB40" stop-opacity="0.9"/><stop offset="100%" stop-color="#FF8F00" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainYellowGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFFF8D" stop-opacity="0.9"/><stop offset="100%" stop-color="#FDD835" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainGreenGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#69F0AE" stop-opacity="0.9"/><stop offset="100%" stop-color="#43A047" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainBlueGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#40C4FF" stop-opacity="0.9"/><stop offset="100%" stop-color="#1E88E5" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainIndigoGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#7C4DFF" stop-opacity="0.9"/><stop offset="100%" stop-color="#5E35B1" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainVioletGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#E040FB" stop-opacity="0.9"/><stop offset="100%" stop-color="#C2185B" stop-opacity="0.4"/></linearGradient>
<linearGradient id="rainPinkGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FF80AB" stop-opacity="0.9"/><stop offset="100%" stop-color="#F06292" stop-opacity="0.4"/></linearGradient>
<radialGradient id="puddleRedGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#FF5252"/><stop offset="100%" stop-color="#FF5252" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddleOrangeGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#FFAB40"/><stop offset="100%" stop-color="#FFAB40" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddleYellowGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#FFFF8D"/><stop offset="100%" stop-color="#FFFF8D" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddleGreenGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#69F0AE"/><stop offset="100%" stop-color="#69F0AE" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddleBlueGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#40C4FF"/><stop offset="100%" stop-color="#40C4FF" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddleIndigoGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#7C4DFF"/><stop offset="100%" stop-color="#7C4DFF" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddleVioletGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#E040FB"/><stop offset="100%" stop-color="#E040FB" stop-opacity="0.1"/></radialGradient>
<radialGradient id="puddlePinkGrad" cx="50%" cy="50%" r="50%"><stop offset="20%" stop-color="#FF80AB"/><stop offset="100%" stop-color="#FF80AB" stop-opacity="0.1"/></radialGradient>
</defs>
<rect width="300" height="300" fill="url(#bgGradient)" />
<path id="ground" d="M0 240 Q80 220, 150 230 T300 240 L300 300 L0 300 Z" fill="#B08D57"/>
<path d="M0 240 Q80 220, 150 230 T300 240" fill="none" stroke="#8A6C4A" stroke-width="2"/>
<ellipse cx="150" cy="245" rx="100" ry="15" fill="black" opacity="0.08"/>
<g id="puddles" opacity="0.8">
<ellipse cx="150" cy="242" rx="15" ry="5" fill="url(#puddleRedGrad)" />
<ellipse cx="155" cy="245" rx="12" ry="4" fill="url(#puddleRedGrad)" transform="rotate(10 155 245)"/>
<ellipse cx="185" cy="235" rx="16" ry="5" fill="url(#puddleOrangeGrad)" />
<ellipse cx="190" cy="232" rx="13" ry="4" fill="url(#puddleOrangeGrad)" transform="rotate(-10 190 232)"/>
<ellipse cx="210" cy="244" rx="18" ry="6" fill="url(#puddleYellowGrad)" />
<ellipse cx="220" cy="240" rx="15" ry="5" fill="url(#puddleYellowGrad)" transform="rotate(-10 220 240)"/>
<ellipse cx="110" cy="246" rx="16" ry="5" fill="url(#puddleGreenGrad)" />
<ellipse cx="125" cy="249" rx="13" ry="4" fill="url(#puddleGreenGrad)" transform="rotate(15 125 249)"/>
<ellipse cx="145" cy="250" rx="20" ry="7" fill="url(#puddleBlueGrad)" />
<ellipse cx="135" cy="247" rx="17" ry="5" fill="url(#puddleBlueGrad)" transform="rotate(5 135 247)"/>
<ellipse cx="100" cy="241" rx="17" ry="6" fill="url(#puddleIndigoGrad)" />
<ellipse cx="115" cy="244" rx="14" ry="4" fill="url(#puddleIndigoGrad)" transform="rotate(-15 115 244)"/>
<ellipse cx="80" cy="243" rx="15" ry="5" fill="url(#puddleVioletGrad)" /> <!-- Adjusted X for Violet puddle -->
<ellipse cx="90" cy="239" rx="12" ry="4" fill="url(#puddleVioletGrad)" transform="rotate(5 90 239)"/>
<ellipse cx="75" cy="236" rx="18" ry="6" fill="url(#puddlePinkGrad)" />
<ellipse cx="85" cy="233" rx="15" ry="5" fill="url(#puddlePinkGrad)" transform="rotate(-5 85 233)"/>
</g>
<g id="tree">
<path id="trunk"
d="M130 280 C120 230, 125 180, 140 130 L145 100"
fill="url(#trunkGradient)" stroke="#5C3D21" stroke-width="20" stroke-linecap="round"/>
<path id="trunkTextureOverlay"
d="M130 280 C120 230, 125 180, 140 130 L145 100"
fill="url(#barkPattern)" stroke="none" opacity="0.3"/>
<path d="M130 280 Q110 285 90 290" stroke="#7A5230" stroke-width="10" fill="none" stroke-linecap="round"/>
<path d="M130 280 Q145 288 160 295" stroke="#7A5230" stroke-width="8" fill="none" stroke-linecap="round"/>
<g id="treeDetails">
<path d="M135 200 Q120 190 115 170" stroke="#6B4F2E" stroke-width="4" fill="none" stroke-linecap="round"/>
<ellipse cx="114" cy="168" rx="5" ry="3" fill="#558B2F" transform="rotate(-30 114 168)"/>
<path d="M148 220 Q160 215 165 190" stroke="#6B4F2E" stroke-width="3" fill="none" stroke-linecap="round"/>
<ellipse cx="166" cy="188" rx="4" ry="2.5" fill="#689F38" transform="rotate(40 166 188)"/>
</g>
</g>
<g id="umbrella">
<path id="umbrellaStem"
d="M145 100 Q150 90 150 80"
stroke="#6B4F2E" stroke-width="12" fill="none" stroke-linecap="round"/>
<g id="canopy" transform="translate(150, 80)">
<g id="canopySegments" stroke="#444" stroke-width="0.5">
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(0)" fill="url(#segRed)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(45)" fill="url(#segOrange)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(90)" fill="url(#segYellow)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(135)" fill="url(#segGreen)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(180)" fill="url(#segBlue)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(225)" fill="url(#segIndigo)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(270)" fill="url(#segViolet)"/>
<path d="M0 0 L-30 85 Q0 100 30 85 Z" transform="rotate(315)" fill="url(#segPink)"/>
</g>
</g>
</g>
<g id="umbrellaTopDetail" transform="translate(150, 80)">
<circle cx="0" cy="0" r="7" fill="#6B4F2E"/>
<path d="M0 0 L-2 -10 L0 -7 L2 -10 Z" fill="#66BB6A" stroke="#4CAF50" stroke-width="0.5" transform="translate(0, -5) scale(0.8)"/>
<path d="M0 0 L-2 -10 L0 -7 L2 -10 Z" fill="#66BB6A" stroke="#4CAF50" stroke-width="0.5" transform="translate(0, -5) scale(0.8) rotate(120)"/>
<path d="M0 0 L-2 -10 L0 -7 L2 -10 Z" fill="#66BB6A" stroke="#4CAF50" stroke-width="0.5" transform="translate(0, -5) scale(0.8) rotate(240)"/>
</g>
<g id="rain">
<path d="M150 170 Q148 195 150 235 L152 235 Q154 195 150 170 Z" fill="url(#rainRedGrad)"/>
<path d="M155 172 Q153 200 155 240 L157 240 Q159 200 155 172 Z" fill="url(#rainRedGrad)" opacity="0.8"/>
<path d="M185 155 Q183 185 185 230 L187 230 Q189 185 185 155 Z" fill="url(#rainOrangeGrad)"/>
<path d="M190 152 Q188 180 190 225 L192 225 Q194 180 190 152 Z" fill="url(#rainOrangeGrad)" opacity="0.8"/>
<path d="M210 175 Q208 205 210 240 L212 240 Q214 205 210 175 Z" fill="url(#rainYellowGrad)"/>
<path d="M220 170 Q218 200 220 235 L222 235 Q224 200 220 170 Z" fill="url(#rainYellowGrad)" opacity="0.8"/>
<path d="M110 160 Q108 195 110 238 L112 238 Q114 195 110 160 Z" fill="url(#rainGreenGrad)"/>
<path d="M125 165 Q123 200 125 242 L127 242 Q129 200 125 165 Z" fill="url(#rainGreenGrad)" opacity="0.8"/>
<path d="M150 178 Q148 210 150 245 L152 245 Q154 210 150 178 Z" fill="url(#rainBlueGrad)"/>
<path d="M140 175 Q138 205 140 238 L142 238 Q144 205 140 175 Z" fill="url(#rainBlueGrad)" opacity="0.8"/>
<path d="M100 160 Q98 195 100 233 L102 233 Q104 195 100 160 Z" fill="url(#rainIndigoGrad)"/>
<path d="M115 165 Q113 200 115 240 L117 240 Q119 200 115 165 Z" fill="url(#rainIndigoGrad)" opacity="0.8"/>
<path d="M80 175 Q78 205 80 242 L82 242 Q84 205 80 175 Z" fill="url(#rainVioletGrad)"/> <!-- Adjusted X for Violet rain -->
<path d="M90 170 Q88 200 90 235 L92 235 Q94 200 90 170 Z" fill="url(#rainVioletGrad)" opacity="0.8"/>
<path d="M75 155 Q73 185 75 230 L77 230 Q79 185 75 155 Z" fill="url(#rainPinkGrad)"/>
<path d="M85 150 Q83 180 85 225 L87 225 Q89 180 85 150 Z" fill="url(#rainPinkGrad)" opacity="0.8"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Gemini 2.5 Pro Preview 05-06
Player 2
Judge's Analysis
Player 2's submission demonstrates greater creativity and adherence to the prompt by integrating the umbrella more dynamically with the tree's structure, making it appear as if the umbrella has truly grown from it.
The composition is vibrant, with angular segments of the umbrella and colorful rain that enhances visual appeal.
Player 1's submission, while clear and neat, lacks the same level of integration and dynamic 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
26
Player 2
59
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
1
Player 2
1
Circles
The number of circle elements (circle) in the SVG.
Player 1
—
Player 2
1
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
7
Player 2
19
Lines
The number of line elements (line) in the SVG.
Player 1
7
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
11
Player 2
38
Groups
The number of group elements (g) in the SVG.
Player 1
3
Player 2
8
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
3
Player 2
26
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
—
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
12
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
9
Player 2
14
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
15
Player 2
32
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
23
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
47
Player 2
158
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
4
Player 2
27
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.
