Creative Challenge
"Flamingo playing a saxophone on a lily pad under a crescent moon"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background Gradient Sky -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0a043c"/>
<stop offset="100%" stop-color="#1a095c"/>
</linearGradient>
<radialGradient id="moonGradient" cx="80%" cy="20%" r="30%">
<stop offset="0%" stop-color="#fdfcfb"/>
<stop offset="100%" stop-color="#e2d1c3"/>
</radialGradient>
<linearGradient id="lilyPadGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2ecc71"/>
<stop offset="100%" stop-color="#27ae60"/>
</linearGradient>
<linearGradient id="flamingoGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff9a9e"/>
<stop offset="100%" stop-color="#fad0c4"/>
</linearGradient>
<linearGradient id="saxGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#bdc3c7"/>
<stop offset="100%" stop-color="#2c3e50"/>
</linearGradient>
<pattern id="waterPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="2" fill="#1abc9c" opacity="0.3"/>
</pattern>
</defs>
<!-- Sky -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Crescent Moon -->
<path d="M150,60
a30,30 0 1,0 40,0
a20,30 0 1,1 -40,0"
fill="url(#moonGradient)"/>
<!-- Water with Pattern -->
<ellipse cx="150" cy="250" rx="200" ry="50" fill="url(#waterPattern)"/>
<!-- Lily Pad -->
<ellipse cx="150" cy="250" rx="60" ry="20" fill="url(#lilyPadGradient)" transform="rotate(-10 150 250)"/>
<!-- Flamingo Body -->
<path d="M140,230
Q130,200 160,180
Q190,200 180,230
Q170,260 140,230"
fill="url(#flamingoGradient)" stroke="#e74c3c" stroke-width="2"/>
<!-- Flamingo Neck and Head -->
<path d="M160,180
Q170,160 190,150
Q195,145 200,150
Q205,155 200,160
Q195,165 190,160
Q180,170 160,180"
fill="url(#flamingoGradient)" stroke="#e74c3c" stroke-width="2"/>
<circle cx="200" cy="160" r="5" fill="#333"/>
<!-- Saxophone -->
<path d="M180,230
L170,225
L160,230
L165,235
L155,240
L160,245
L170,240
L165,235"
fill="url(#saxGradient)" stroke="#34495e" stroke-width="1"/>
<!-- Beak -->
<path d="M200,160
L210,158
L215,162
L210,166
Z"
fill="#f39c12" stroke="#e67e22" stroke-width="1"/>
<!-- Details on Lily Pad -->
<circle cx="140" cy="250" r="2" fill="#27ae60"/>
<circle cx="160" cy="255" r="1.5" fill="#229954"/>
<!-- Reflections on Water -->
<ellipse cx="150" cy="250" rx="60" ry="10" fill="rgba(255, 255, 255, 0.1)" transform="rotate(-10 150 250)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background with gradient night sky -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a3a" />
<stop offset="90%" stop-color="#1a1a5a" />
</linearGradient>
<linearGradient id="moonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffce8" />
<stop offset="100%" stop-color="#f5e097" />
</linearGradient>
<radialGradient id="spotlight" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="rgba(255, 255, 200, 0.3)" />
<stop offset="100%" stop-color="rgba(255, 255, 200, 0)" />
</radialGradient>
<linearGradient id="saxGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffd700" />
<stop offset="100%" stop-color="#b8860b" />
</linearGradient>
<linearGradient id="lilyPadGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#006400" />
<stop offset="100%" stop-color="#228B22" />
</linearGradient>
<filter id="waterRipple" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="3" xChannelSelector="R" yChannelSelector="G" />
</filter>
<filter id="moonGlowFilter">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.3" />
</filter>
</defs>
<!-- Night sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars">
<circle cx="40" cy="30" r="1" fill="white" />
<circle cx="80" cy="50" r="1.5" fill="white" />
<circle cx="120" cy="25" r="1" fill="white" />
<circle cx="160" cy="60" r="1.2" fill="white" />
<circle cx="200" cy="40" r="1" fill="white" />
<circle cx="250" cy="70" r="1.3" fill="white" />
<circle cx="270" cy="30" r="1" fill="white" />
<circle cx="50" cy="80" r="1.4" fill="white" />
<circle cx="100" cy="60" r="1" fill="white" />
<circle cx="220" cy="80" r="1.2" fill="white" />
<circle cx="180" cy="20" r="1" fill="white" />
<circle cx="130" cy="70" r="1.5" fill="white" />
</g>
<!-- Crescent moon -->
<g transform="translate(220, 50)">
<circle cx="0" cy="0" r="25" fill="url(#moonGlow)" filter="url(#moonGlowFilter)" />
<circle cx="10" cy="-5" r="23" fill="url(#skyGradient)" />
</g>
<!-- Spotlight from moon -->
<ellipse cx="150" cy="170" rx="100" ry="40" fill="url(#spotlight)" />
<!-- Water surface with ripple effect -->
<rect x="0" y="170" width="300" height="130" fill="#143b5a" filter="url(#waterRipple)" opacity="0.8" />
<!-- Lily pad -->
<ellipse cx="150" cy="180" rx="70" ry="30" fill="url(#lilyPadGradient)" filter="url(#shadow)" />
<path d="M150,180 L220,175 Q230,190 220,200 Z" fill="#1b5e20" />
<path d="M150,180 L90,170 Q70,180 85,195 Z" fill="#1b5e20" />
<ellipse cx="150" cy="180" rx="50" ry="20" fill="#1e8031" opacity="0.3" />
<!-- Flamingo body -->
<g transform="translate(140, 160) rotate(-10)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="25" ry="15" fill="#ff80ab" filter="url(#shadow)" />
<!-- Neck (curved S-shape) -->
<path d="M15,-5 C30,-20 10,-40 20,-55 C25,-65 15,-75 5,-75" stroke="#ff80ab" stroke-width="10" fill="none" />
<!-- Head -->
<ellipse cx="5" cy="-80" rx="8" ry="5" fill="#ff80ab" />
<!-- Beak -->
<path d="M13,-80 C25,-83 30,-80 28,-77 C26,-74 15,-77 13,-80 Z" fill="#ffb74d" />
<!-- Eye -->
<circle cx="7" cy="-82" r="1.5" fill="#000" />
<!-- Legs -->
<path d="M-10,10 L-30,40" stroke="#ff80ab" stroke-width="3" />
<path d="M5,10 L-15,40" stroke="#ff80ab" stroke-width="3" />
<!-- Feet -->
<path d="M-30,40 L-35,42 L-30,44 L-28,42 Z" fill="#ffb74d" />
<path d="M-15,40 L-20,42 L-15,44 L-13,42 Z" fill="#ffb74d" />
<!-- Wings (subtle) -->
<path d="M-15,-5 C-25,-15 -30,-5 -25,5" stroke="#ff80ab" stroke-width="4" fill="none" />
</g>
<!-- Saxophone -->
<g transform="translate(115, 115) rotate(30)">
<path d="M0,0 C-5,-5 -5,-15 0,-20 L30,-40 C35,-42 40,-40 40,-35 L30,-25" fill="url(#saxGradient)" filter="url(#shadow)" />
<path d="M30,-25 L20,-15 C15,-10 15,-5 20,0 L0,0" fill="url(#saxGradient)" />
<!-- Keys -->
<circle cx="10" cy="-10" r="2" fill="#f5f5f5" />
<circle cx="17" cy="-15" r="2" fill="#f5f5f5" />
<circle cx="24" cy="-20" r="2" fill="#f5f5f5" />
<circle cx="32" cy="-28" r="2" fill="#f5f5f5" />
<!-- Mouthpiece -->
<path d="M40,-35 L50,-42 L52,-40 L43,-33 Z" fill="#333" />
<!-- Bell -->
<path d="M0,0 L-5,10 C-10,15 -5,20 0,18 L10,10 Z" fill="url(#saxGradient)" />
</g>
<!-- Musical notes -->
<g transform="translate(85, 90)">
<g transform="rotate(-10)">
<path d="M0,0 C2,-5 5,-10 8,-8" stroke="#f5f5f5" stroke-width="1" fill="none" />
<ellipse cx="10" cy="-8" rx="3" ry="2" fill="#f5f5f5" />
</g>
<g transform="translate(10, -15) rotate(-5)">
<path d="M0,0 C2,-5 5,-10 8,-8" stroke="#f5f5f5" stroke-width="1" fill="none" />
<ellipse cx="10" cy="-8" rx="3" ry="2" fill="#f5f5f5" />
</g>
<g transform="translate(-5, -25) rotate(5)">
<path d="M0,0 C2,-5 5,-10 8,-8" stroke="#f5f5f5" stroke-width="1" fill="none" />
<ellipse cx="10" cy="-8" rx="3" ry="2" fill="#f5f5f5" />
</g>
</g>
<!-- Lily pad flower -->
<g transform="translate(180, 170)">
<circle cx="0" cy="0" r="8" fill="#ffb6c1" />
<circle cx="0" cy="0" r="4" fill="#ffea00" />
<!-- Petals -->
<path d="M0,0 Q5,-8 0,-12 Q-5,-8 0,0" fill="#ffb6c1" />
<path d="M0,0 Q8,-5 12,0 Q8,5 0,0" fill="#ffb6c1" />
<path d="M0,0 Q5,8 0,12 Q-5,8 0,0" fill="#ffb6c1" />
<path d="M0,0 Q-8,5 -12,0 Q-8,-5 0,0" fill="#ffb6c1" />
</g>
<!-- Small water ripples -->
<path d="M110,200 Q130,195 150,200 Q170,205 190,200" stroke="#8ab4f8" fill="none" stroke-width="1" opacity="0.5" />
<path d="M100,210 Q130,205 160,210 Q190,215 210,210" stroke="#8ab4f8" fill="none" stroke-width="1" opacity="0.5" />
<path d="M90,220 Q130,215 170,220 Q210,225 230,220" stroke="#8ab4f8" fill="none" stroke-width="1" opacity="0.5" />
</svg>Judge's Analysis
Player 2's image is more creative and visually appealing, with a clear depiction of the flamingo, saxophone, and lily pad under a crescent moon.
The inclusion of stars and water adds to the ambiance.
Player 1's image, while adhering to the prompt, lacks detail and visual depth compared to Player 2's more 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
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
The number of rectangle elements (rect) in the SVG.
The number of circle elements (circle) in the SVG.
The number of ellipse elements (ellipse) in the SVG.
The number of line elements (line) in the SVG.
The number of polygon elements (polygon) in the SVG.
The number of path elements (path) in the SVG.
The number of group elements (g) in the SVG.
Visual Effects Metrics
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
The number of pattern definitions (pattern) in the SVG.
The number of filter definitions (filter) in the SVG.
The number of mask definitions (mask) in the SVG.
The number of clipping path definitions (clipPath) in the SVG.
The number of elements with opacity attributes in the SVG.
The number of elements with stroke attributes in the SVG.
Colors Metrics
The number of unique colors used in the SVG.
Interactivity Metrics
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
The number of elements with transform attributes in the SVG.
Complexity Metrics
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
The maximum nesting level of group elements (g) in the SVG.
The number of elements defined within the defs element in the SVG.
The number of use elements (use) in the SVG.
Text Metrics
The number of text elements (text) in the SVG.
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.
Similar Challenges
"A bicycle with butterfly wings gliding over a cityscape"
"Jellyfish troupe performing ballet on a grassy hill"
"Sky-high penguin on a carousel horse"
"Penguin in a top hat juggling snowballs at sunrise"
"Floating island with a tree, roots trailing into space"
"A whale made of swirling, colorful origami paper"
