Creative Challenge
"A flying fish leaping over a crescent moon in a starry sky."
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>
<defs>
<radialGradient id="skyGradient" cx="50%" cy="40%" r="70%" fx="50%" fy="30%">
<stop offset="0%" style="stop-color:#0D0D3B;stop-opacity:1" />
<stop offset="50%" style="stop-color:#1A1A4A;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00001A;stop-opacity:1" />
</radialGradient>
<linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FEFDE7;" />
<stop offset="100%" style="stop-color:#F0E68C;" />
</linearGradient>
<filter id="moonGlow">
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="fishBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#28C7FA;" /> <!-- Light Sky Blue / Cyan -->
<stop offset="45%" style="stop-color:#6A5ACD;" /> <!-- Slate Blue -->
<stop offset="80%" style="stop-color:#EE82EE;" /> <!-- Violet -->
<stop offset="100%" style="stop-color:#FFB6C1;" /> <!-- Light Pink accents -->
</linearGradient>
<linearGradient id="fishFinGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(137,207,240,0.7);" /> <!-- Light Sky Blue, semi-transparent -->
<stop offset="100%" style="stop-color:rgba(221,160,221,0.7);" /> <!-- Plum, semi-transparent -->
</linearGradient>
<pattern id="fishScales" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M0 4 Q2 0 4 4 T8 4" stroke="rgba(255,255,255,0.3)" stroke-width="0.7" fill="none"/>
</pattern>
<pattern id="starDust" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
<circle cx="8" cy="10" r="0.35" fill="white" opacity="0.6"/>
<circle cx="20" cy="45" r="0.25" fill="white" opacity="0.4"/>
<circle cx="35" cy="15" r="0.4" fill="white" opacity="0.7"/>
<circle cx="50" cy="50" r="0.3" fill="white" opacity="0.5"/>
<path d="M15 30 l0.5 0.5 l-0.5 0.5 l-0.5 -0.5 Z" fill="white" opacity="0.4"/>
</pattern>
<linearGradient id="waterDropletGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgba(200,230,255,0.8);" />
<stop offset="100%" style="stop-color:rgba(150,200,240,0.5);" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<rect width="300" height="300" fill="url(#starDust)" />
<circle cx="50" cy="40" r="1.5" fill="#FFFFF0" opacity="0.95"/>
<path d="M230 58 L232 60 L230 62 L228 60 Z" fill="#F0FFFF" opacity="1"/>
<circle cx="160" cy="25" r="1.2" fill="#FFFFE0" opacity="0.8"/>
<circle cx="80" cy="150" r="0.9" fill="#F5F5F5" opacity="0.85"/>
<path d="M260 178 L261.5 180 L260 182 L258.5 180 Z" fill="#FFFFF0" opacity="0.9"/>
<circle cx="30" cy="250" r="0.8" fill="#E6E6FA" opacity="0.75"/>
<circle cx="270" cy="100" r="1.1" fill="#F0F8FF" opacity="0.9"/>
<circle cx="120" cy="90" r="1.4" fill="#FAFAD2" opacity="1"/>
<circle cx="180" cy="270" r="1" fill="#FFFACD" opacity="0.8"/>
<circle cx="60" cy="210" r="1.2" fill="#F0FFF0" opacity="0.92"/>
<circle cx="200" cy="140" r="0.7" fill="#F5F5DC" opacity="0.7"/>
<g filter="url(#moonGlow)">
<path id="moonShape" d="M100,180 A70,70 0 0,1 100,260 A55,55 0 1,0 100,180 Z" fill="url(#moonGradient)"/>
<circle cx="95" cy="200" r="7" fill="#D4C87E" opacity="0.35" transform="rotate(-10 95 200)"/>
<circle cx="108" cy="230" r="4" fill="#D4C87E" opacity="0.25" transform="rotate(10 108 230)"/>
<circle cx="100" cy="245" r="3" fill="#D4C87E" opacity="0.3"/>
<circle cx="115" cy="205" r="5" fill="#D4C87E" opacity="0.20"/>
</g>
<g id="flyingFish" transform="translate(10, -25) rotate(-20 160 150)">
<g opacity="0.85">
<circle cx="90" cy="155" r="2.5" fill="url(#waterDropletGradient)" opacity="0.9"/>
<ellipse cx="80" cy="165" rx="2" ry="3.5" fill="url(#waterDropletGradient)" transform="rotate(-30 80 165)" opacity="0.8"/>
<circle cx="70" cy="175" r="1.8" fill="url(#waterDropletGradient)" opacity="0.7"/>
</g>
<path d="M100,150
C130,120 180,110 220,140
S235,185 200,180
C170,200 130,190 100,150 Z"
fill="url(#fishBodyGradient)" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/>
<path d="M100,150
C130,120 180,110 220,140
S235,185 200,180
C170,200 130,190 100,150 Z"
fill="url(#fishScales)"/>
<path d="M150,155
C120,125 90,130 110,80
S210,95 200,130
C190,145 150,155 150,155 Z"
fill="url(#fishFinGradient)" stroke="rgba(255,255,255,0.3)" stroke-width="0.4" opacity="0.9"/>
<path d="M160,162
C140,150 125,145 135,115
S195,125 205,148
C195,158 160,162 160,162 Z"
fill="url(#fishFinGradient)" stroke="rgba(255,255,255,0.2)" stroke-width="0.3" opacity="0.75" transform="translate(10,8) rotate(5 160 162)"/>
<path d="M95,150
C75,145 65,130 80,115
L100,150
L80,185 C65,170 75,155 95,150 Z"
fill="url(#fishFinGradient)" stroke="rgba(255,255,255,0.3)" stroke-width="0.4" opacity="0.95"/>
<path d="M170,138
C185,123 200,125 205,138
L195,145 Z" fill="rgba(123,104,238,0.65)" transform="rotate(-5 188 132)"/>
<circle cx="208" cy="148" r="5" fill="#0A0A0A"/>
<circle cx="210" cy="146.5" r="1.5" fill="#FFFFFF" opacity="0.9"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="50%" r="80%">
<stop offset="0%" style="stop-color:#0B0B3B"/>
<stop offset="100%" style="stop-color:#000033"/>
</radialGradient>
<linearGradient id="fishGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#7EB8E6"/>
<stop offset="100%" style="stop-color:#3B83BD"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
<!-- Stars -->
<g fill="#FFF" filter="url(#glow)">
<circle cx="50" cy="50" r="1"/>
<circle cx="80" cy="30" r="1.5"/>
<circle cx="150" cy="40" r="1"/>
<circle cx="200" cy="60" r="1.2"/>
<circle cx="250" cy="40" r="1"/>
<circle cx="40" cy="100" r="1.3"/>
<circle cx="220" cy="120" r="1"/>
<circle cx="180" cy="20" r="1.5"/>
<circle cx="100" cy="70" r="1"/>
</g>
<!-- Moon -->
<path d="M180 120 A 40 40 0 1 1 220 180 A 35 35 0 1 0 180 120"
fill="#FFF8DC"
filter="url(#glow)"/>
<!-- Flying Fish -->
<g transform="translate(100,150) rotate(-20)">
<!-- Fish Body -->
<path d="M0 0 C30 -10 60 -10 90 0 C60 10 30 10 0 0"
fill="url(#fishGradient)"
stroke="#2B5F8A"
stroke-width="1"/>
<!-- Fins -->
<path d="M30 0 C20 -20 40 -30 60 -25 C45 -15 35 -5 30 0"
fill="#7EB8E6"
stroke="#2B5F8A"
stroke-width="1"/>
<path d="M30 0 C20 20 40 30 60 25 C45 15 35 5 30 0"
fill="#7EB8E6"
stroke="#2B5F8A"
stroke-width="1"/>
<!-- Tail -->
<path d="M-10 0 C-5 -10 0 -15 5 -10 C0 0 5 10 -10 0"
fill="#7EB8E6"
stroke="#2B5F8A"
stroke-width="1"/>
<!-- Eye -->
<circle cx="75" cy="-2" r="3" fill="#000"/>
<circle cx="75" cy="-2" r="1" fill="#FFF"/>
</g>
<!-- Water Droplets -->
<g fill="#A7D8FF" filter="url(#glow)">
<circle cx="80" cy="180" r="2"/>
<circle cx="90" cy="170" r="1.5"/>
<circle cx="100" cy="185" r="1"/>
<circle cx="70" cy="175" r="1.5"/>
</g>
</svg>Judge's Analysis
Player 1's submission demonstrates a higher level of creativity and technical quality, with a beautifully blended gradient on the fish and a realistic depiction of the crescent moon.
The translucent fins and glowing stars add depth and visual appeal, adhering well to the prompt.
Player 2's image, while charming, has a simpler design and lacks the same level of detail and polish as Player 1's.
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
"An owl wearing a suit, sipping tea under a mushroom umbrella."
"A snail racing a cheetah on a surreal checkerboard desert."
"A cactus wearing a top hat and sunglasses in the middle of a rainy desert."
"An octopus juggling flaming bowling pins in outer space."
