GPT-4o
Challenge Creator
Creative Challenge
"A dragonfly wearing a crown landing on a lily pad."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background -->
<defs>
<radialGradient id="water" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#58b9e6" />
<stop offset="70%" stop-color="#2a6b8a" />
<stop offset="100%" stop-color="#194a61" />
</radialGradient>
<filter id="ripple" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G" />
</filter>
<linearGradient id="lilypad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2e8b57" />
<stop offset="50%" stop-color="#3cb371" />
<stop offset="100%" stop-color="#2e8b57" />
</linearGradient>
<linearGradient id="crown" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffd700" />
<stop offset="50%" stop-color="#ffcc00" />
<stop offset="100%" stop-color="#ffd700" />
</linearGradient>
<radialGradient id="jewel1" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ff5555" stop-opacity="1" />
<stop offset="100%" stop-color="#aa0000" stop-opacity="1" />
</radialGradient>
<radialGradient id="jewel2" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#5555ff" stop-opacity="1" />
<stop offset="100%" stop-color="#0000aa" stop-opacity="1" />
</radialGradient>
<radialGradient id="jewel3" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#55ff55" stop-opacity="1" />
<stop offset="100%" stop-color="#00aa00" stop-opacity="1" />
</radialGradient>
<linearGradient id="dragonfly-body" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4a6b8a" />
<stop offset="50%" stop-color="#7a9bba" />
<stop offset="100%" stop-color="#4a6b8a" />
</linearGradient>
<linearGradient id="wing" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0.9)" />
<stop offset="50%" stop-color="rgba(200,220,255,0.7)" />
<stop offset="100%" stop-color="rgba(180,200,255,0.8)" />
</linearGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Water background -->
<rect x="0" y="0" width="300" height="300" fill="url(#water)" filter="url(#ripple)" />
<!-- Lily pad -->
<path d="M60,200 C60,140 110,110 150,110 C190,110 240,140 240,200 C240,230 190,250 150,250 C110,250 60,230 60,200 Z" fill="url(#lilypad)" stroke="#1c6840" stroke-width="2" />
<path d="M60,200 C90,190 120,185 150,185 C180,185 210,190 240,200" fill="none" stroke="#1c6840" stroke-width="1.5" />
<path d="M70,190 C100,180 130,175 150,175 C170,175 200,180 230,190" fill="none" stroke="#1c6840" stroke-width="1" />
<path d="M80,180 C110,170 130,165 150,165 C170,165 190,170 220,180" fill="none" stroke="#1c6840" stroke-width="0.5" />
<!-- Lily flower -->
<circle cx="90" cy="140" r="15" fill="#ffccff" stroke="#ff99cc" stroke-width="1" />
<circle cx="90" cy="140" r="10" fill="#ffee99" stroke="#ffdd66" stroke-width="1" />
<!-- Dragonfly body -->
<path d="M130,160 C140,155 150,150 160,150 C170,150 180,155 190,160 C180,165 170,170 160,170 C150,170 140,165 130,160 Z" fill="url(#dragonfly-body)" stroke="#2a4b6a" stroke-width="1.5" />
<path d="M160,150 L160,130 L160,150 L160,170 L160,190" fill="none" stroke="#2a4b6a" stroke-width="2" />
<ellipse cx="160" cy="130" rx="5" ry="7" fill="#2a4b6a" stroke="#1a3b5a" stroke-width="1" />
<!-- Dragonfly eyes -->
<circle cx="157" cy="127" r="2" fill="#ff5555" />
<circle cx="163" cy="127" r="2" fill="#ff5555" />
<!-- Dragonfly legs -->
<path d="M155,155 C150,160 145,165 140,170" fill="none" stroke="#2a4b6a" stroke-width="1" />
<path d="M165,155 C170,160 175,165 180,170" fill="none" stroke="#2a4b6a" stroke-width="1" />
<path d="M155,165 C150,170 145,175 140,180" fill="none" stroke="#2a4b6a" stroke-width="1" />
<path d="M165,165 C170,170 175,175 180,180" fill="none" stroke="#2a4b6a" stroke-width="1" />
<path d="M155,160 C150,165 145,170 140,175" fill="none" stroke="#2a4b6a" stroke-width="1" />
<path d="M165,160 C170,165 175,170 180,175" fill="none" stroke="#2a4b6a" stroke-width="1" />
<!-- Dragonfly wings -->
<path d="M160,155 C140,135 130,125 110,125 C90,125 80,145 90,155 C100,165 120,165 140,155 Z" fill="url(#wing)" stroke="#aaccff" stroke-width="1" opacity="0.7" />
<path d="M160,155 C180,135 190,125 210,125 C230,125 240,145 230,155 C220,165 200,165 180,155 Z" fill="url(#wing)" stroke="#aaccff" stroke-width="1" opacity="0.7" />
<path d="M160,165 C140,185 130,195 110,195 C90,195 80,175 90,165 C100,155 120,155 140,165 Z" fill="url(#wing)" stroke="#aaccff" stroke-width="1" opacity="0.7" />
<path d="M160,165 C180,185 190,195 210,195 C230,195 240,175 230,165 C220,155 200,155 180,165 Z" fill="url(#wing)" stroke="#aaccff" stroke-width="1" opacity="0.7" />
<!-- Wing details -->
<path d="M110,125 C120,135 130,145 140,155" fill="none" stroke="#aaccff" stroke-width="0.5" />
<path d="M210,125 C200,135 190,145 180,155" fill="none" stroke="#aaccff" stroke-width="0.5" />
<path d="M110,195 C120,185 130,175 140,165" fill="none" stroke="#aaccff" stroke-width="0.5" />
<path d="M210,195 C200,185 190,175 180,165" fill="none" stroke="#aaccff" stroke-width="0.5" />
<!-- Crown -->
<path d="M155,120 L150,110 L155,115 L160,105 L165,115 L170,110 L165,120 Z" fill="url(#crown)" stroke="#cc9900" stroke-width="1" filter="url(#glow)" />
<circle cx="150" cy="113" r="2" fill="url(#jewel1)" stroke="#990000" stroke-width="0.5" />
<circle cx="160" cy="108" r="2" fill="url(#jewel2)" stroke="#000099" stroke-width="0.5" />
<circle cx="170" cy="113" r="2" fill="url(#jewel3)" stroke="#009900" stroke-width="0.5" />
<!-- Water ripples -->
<circle cx="180" cy="220" r="5" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
<circle cx="180" cy="220" r="10" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.3" />
<circle cx="180" cy="220" r="15" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.2" />
<circle cx="120" cy="230" r="3" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
<circle cx="120" cy="230" r="6" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.3" />
<circle cx="120" cy="230" r="9" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.2" />
<!-- Light reflections -->
<circle cx="200" cy="180" r="2" fill="#ffffff" opacity="0.6" />
<circle cx="210" cy="200" r="1" fill="#ffffff" opacity="0.7" />
<circle cx="100" cy="190" r="1.5" fill="#ffffff" opacity="0.5" />
<circle cx="150" cy="230" r="1" fill="#ffffff" opacity="0.6" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" aria-label="Dragonfly with crown landing on lily pad" role="img">
<defs>
<!-- Gradient for the lily pad -->
<radialGradient id="padGradient" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#3a7d44" />
<stop offset="100%" stop-color="#1e3f22" />
</radialGradient>
<!-- Highlight on lily pad -->
<radialGradient id="padHighlight" cx="40%" cy="40%" r="30%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#b7ff9f" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#3a7d44" stop-opacity="0"/>
</radialGradient>
<!-- Shadow for lily pad -->
<radialGradient id="padShadow" cx="50%" cy="70%" r="50%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#14220d" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#1e3f22" stop-opacity="0"/>
</radialGradient>
<!-- Dragonfly body gradient -->
<linearGradient id="dragonflyBodyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4b6cb7" />
<stop offset="100%" stop-color="#35478c" />
</linearGradient>
<!-- Dragonfly wing gradient -->
<linearGradient id="wingGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#b0e7ff" stop-opacity="0.6" />
<stop offset="100%" stop-color="#81c4f7" stop-opacity="0.1" />
</linearGradient>
<!-- Dragonfly eye gradient -->
<radialGradient id="eyeGlow" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#ffd800"/>
<stop offset="100%" stop-color="#b28800" stop-opacity="0"/>
</radialGradient>
<!-- Crown gold gradient -->
<linearGradient id="goldGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffe066" />
<stop offset="100%" stop-color="#cc9a00" />
</linearGradient>
<!-- Crown gem gradient -->
<radialGradient id="gemGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#e6007e" />
<stop offset="100%" stop-color="#80003e" />
</radialGradient>
<!-- Decorative pattern for wing veins -->
<pattern id="wingVeins" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(30)">
<path d="M0 0 L6 6 M6 0 L0 6" stroke="#9ecbff" stroke-width="0.3" />
</pattern>
<!-- Water reflection gradient -->
<linearGradient id="waterReflection" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#a0d7f8" stop-opacity="0.15"/>
<stop offset="1" stop-color="#5b91c9" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#waterReflection)" />
<rect y="120" width="300" height="180" fill="#5b91c9" />
<!-- Lily Pad base shape -->
<g filter="url(#padShadowFilter)">
<ellipse cx="150" cy="195" rx="95" ry="55" fill="url(#padGradient)" />
<ellipse cx="150" cy="195" rx="95" ry="55" fill="url(#padHighlight)" />
</g>
<!-- Lily pad shadow detail -->
<ellipse cx="150" cy="230" rx="80" ry="25" fill="url(#padShadow)" />
<!-- Lily pad texture veins -->
<path fill="none" stroke="#4a6b3a" stroke-width="1.2" opacity="0.55"
d="
M150 140
C 110 140 80 170 110 210
M150 140
C 190 140 210 170 185 210
M150 140
C 140 165 130 190 110 210
M150 140
C 160 165 170 190 185 210
M60 200
C 85 185 115 185 150 170
M240 200
C215 185 180 185 150 170
"
/>
<!-- Water ripple behind lily pad -->
<ellipse cx="150" cy="240" rx="50" ry="12" fill="url(#waterReflection)" />
<!-- Dragonfly group -->
<g transform="translate(160 140) scale(1.15)">
<!-- Wings: 4 wings, delicate and semi-transparent with vein pattern -->
<g id="wings" stroke="#3268a8" stroke-width="0.8" >
<path fill="url(#wingGradient)" filter="url(#wingGlowFilter)" d="M 0 0
C 50 -30 70 -80 90 -90
C 105 -85 115 -55 110 -22
Q 95 5 60 18 Z"
vector-effect="non-scaling-stroke"/>
<path fill="url(#wingGradient)" filter="url(#wingGlowFilter)" d="M 0 0
C 45 30 70 90 85 95
C 105 90 105 55 92 38
Q 65 20 25 15 Z"
vector-effect="non-scaling-stroke"/>
<path fill="url(#wingGradient)" filter="url(#wingGlowFilter)" d="M 0 0
C -55 -26 -70 -70 -90 -75
C -105 -70 -108 -40 -85 -16
Q -65 5 -40 15 Z"
vector-effect="non-scaling-stroke"/>
<path fill="url(#wingGradient)" filter="url(#wingGlowFilter)" d="M 0 0
C -45 32 -70 87 -85 88
C -100 85 -102 55 -80 36
Q -65 20 -30 12 Z"
vector-effect="non-scaling-stroke"/>
</g>
<!-- Wings veins pattern overlay with subtle lines -->
<g stroke="#7ea7dc" stroke-width="0.3" fill="none" opacity="0.5">
<!-- Top Right Wing veins -->
<path d="M5 -10 L 85 -78"/>
<path d="M20 -15 L 80 -50"/>
<path d="M35 -22 L 90 -22"/>
<path d="M40 -10 L 100 -30"/>
<!-- Bottom Right Wing veins -->
<path d="M4 10 L 80 90"/>
<path d="M15 20 L 70 60"/>
<path d="M30 28 L 85 48"/>
<!-- Top Left Wing veins -->
<path d="M-5 -10 L -85 -75"/>
<path d="M-20 -16 L -70 -50"/>
<path d="M-35 -22 L -90 -25"/>
<path d="M-40 -10 L -100 -30"/>
<!-- Bottom Left Wing veins -->
<path d="M-4 10 L -80 85"/>
<path d="M-15 20 L -70 60"/>
<path d="M-30 25 L -85 48"/>
</g>
<!-- Dragonfly body -->
<g stroke="#11305b" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<!-- Head -->
<circle cx="0" cy="0" r="9" fill="url(#dragonflyBodyGradient)" filter="url(#headShadow)" />
<circle cx="0" cy="0" r="7.5" fill="#2a497a"/>
<!-- Eyes with glow -->
<ellipse cx="4" cy="-2.5" rx="3.5" ry="5" fill="#1956ab" />
<ellipse cx="-4" cy="-2.5" rx="3.5" ry="5" fill="#2da5f9" />
<circle cx="4" cy="-2.5" r="3" fill="url(#eyeGlow)" />
<circle cx="-4" cy="-2.5" r="3" fill="url(#eyeGlow)" />
<!-- Antennae -->
<path d="M-4 1 Q-10 -6 -9 -12" stroke="#2a497a" stroke-width="1" />
<path d="M4 1 Q10 -6 9 -12" stroke="#2a497a" stroke-width="1" />
<!-- Thorax -->
<ellipse cx="0" cy="12" rx="6" ry="10" fill="url(#dragonflyBodyGradient)" />
<ellipse cx="0" cy="12" rx="5.5" ry="8" fill="#3d5a99" />
<path d="M-6 5 L6 5 L3 20 L-3 20 Z" fill="#2a497a" opacity="0.15" />
<!-- Abdomen segments -->
<g fill="url(#dragonflyBodyGradient)">
<ellipse cx="0" cy="30" rx="5" ry="9" />
<ellipse cx="0" cy="44" rx="4.5" ry="8" />
<ellipse cx="0" cy="57" rx="4" ry="7" />
<ellipse cx="0" cy="68" rx="3.5" ry="6" />
</g>
<g fill="none" stroke="#11305b" stroke-width="1" opacity="0.6">
<line x1="0" y1="22" x2="0" y2="36"/>
<line x1="0" y1="36" x2="0" y2="50"/>
<line x1="0" y1="50" x2="0" y2="62"/>
<line x1="0" y1="62" x2="0" y2="74"/>
</g>
<!-- Legs folded under body -->
<g stroke="#1a2e51" stroke-width="1">
<path d="M3 10 L10 25" />
<path d="M-3 10 L-10 25" />
<path d="M4 18 L14 28" />
<path d="M-4 18 L-14 28" />
<path d="M5 26 L15 36" />
<path d="M-5 26 L-15 36" />
</g>
</g>
<!-- Crown on dragonfly's head -->
<g transform="translate(0 -7)">
<!-- Crown base -->
<path d="M-12 1 L12 1 L10 8 L6 5 L2 12 L-2 5 L-6 8 L-10 5 Z" fill="url(#goldGradient)" stroke="#a37700" stroke-width="1" />
<!-- Gems on peaks -->
<circle cx="10" cy="8" r="2.8" fill="url(#gemGradient)" stroke="#7b004a" stroke-width="0.6"/>
<circle cx="2" cy="12" r="3.4" fill="url(#gemGradient)" stroke="#7b004a" stroke-width="0.6"/>
<circle cx="-6" cy="8" r="2.5" fill="url(#gemGradient)" stroke="#7b004a" stroke-width="0.6"/>
<!-- Crown shine highlights -->
<path d="M-11 2 L-8 3 L-7 1 L-10 0 Z" fill="rgba(255,255,255,0.45)" />
<path d="M10 2 L8 5 L6 4 L7 1 Z" fill="rgba(255,255,255,0.45)" />
</g>
</g>
<!-- Small water splashes around the lily pad to show gentle ripple after landing -->
<g fill="none" stroke="#a3d1ff" stroke-width="1" opacity="0.4">
<circle cx="95" cy="240" r="6" />
<circle cx="200" cy="230" r="5" />
<circle cx="130" cy="250" r="4" />
<circle cx="180" cy="260" r="7" />
<ellipse cx="170" cy="225" rx="3" ry="1.3" />
<ellipse cx="115" cy="235" rx="4" ry="1.6" />
</g>
<!-- Filters for glowing, subtle shadows -->
<filter id="wingGlowFilter" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB" >
<feDropShadow dx="0" dy="0" stdDeviation="1.3" flood-color="#a0cfff" flood-opacity="0.6" />
</filter>
<filter id="headShadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="0" dy="3" stdDeviation="1" flood-color="#001a3d" flood-opacity="0.6" />
</filter>
<filter id="padShadowFilter" x="-5%" y="-5%" width="110%" height="110%">
<feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#12280c" flood-opacity="0.65" />
</filter>
</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 more realistic and detailed representation of a dragonfly landing on a lily pad, with better integration of elements such as the water and the dragonfly's anatomy.
The use of shading and translucency in the wings adds to the visual appeal, making it more engaging.
While Player 1's entry is creative, it lacks the same level of technical refinement and depth.
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
40
Player 2
63
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
1
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
17
Player 2
11
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
1
Player 2
14
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
4
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
21
Player 2
32
Groups
The number of group elements (g) in the SVG.
Player 1
—
Player 2
10
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
8
Player 2
9
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
2
Player 2
3
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
14
Player 2
5
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
33
Player 2
14
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
31
Player 2
30
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
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
74
Player 2
104
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
10
Player 2
10
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.
