Creative Challenge
"A flying fish leaping over a crescent moon at dusk."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Dusk sky gradient -->
<radialGradient id="skyGradient" cx="50%" cy="85%" r="120%">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="20%" stop-color="#FF8C69"/>
<stop offset="50%" stop-color="#FF6347"/>
<stop offset="75%" stop-color="#4B0082"/>
<stop offset="100%" stop-color="#191970"/>
</radialGradient>
<!-- Moon gradient -->
<radialGradient id="moonGradient" cx="35%" cy="25%" r="80%">
<stop offset="0%" stop-color="#FFFACD"/>
<stop offset="60%" stop-color="#F0E68C"/>
<stop offset="100%" stop-color="#DAA520"/>
</radialGradient>
<!-- Fish body gradient -->
<linearGradient id="fishBodyGradient" x1="0%" y1="30%" x2="100%" y2="70%">
<stop offset="0%" stop-color="#00FFFF"/>
<stop offset="40%" stop-color="#1E90FF"/>
<stop offset="80%" stop-color="#4169E1"/>
<stop offset="100%" stop-color="#2F4F4F"/>
</linearGradient>
<!-- Fish fin gradient -->
<linearGradient id="finGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="50%" stop-color="#4682B4"/>
<stop offset="100%" stop-color="#2F4F4F"/>
</linearGradient>
<!-- Water droplet gradient -->
<radialGradient id="dropletGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#E0FFFF"/>
<stop offset="70%" stop-color="#87CEEB"/>
<stop offset="100%" stop-color="#4682B4"/>
</radialGradient>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Distant stars -->
<circle cx="45" cy="30" r="1.2" fill="#FFF" opacity="0.9">
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="260" cy="45" r="0.8" fill="#FFF" opacity="0.7"/>
<circle cx="220" cy="25" r="1" fill="#FFF" opacity="0.8"/>
<circle cx="80" cy="50" r="0.6" fill="#FFF" opacity="0.6"/>
<circle cx="25" cy="70" r="1.1" fill="#FFF" opacity="0.75"/>
<!-- Crescent moon with atmospheric glow -->
<g transform="translate(120, 220)">
<!-- Moon glow -->
<ellipse cx="0" cy="0" rx="45" ry="42" fill="#FFD700" opacity="0.15"/>
<ellipse cx="0" cy="0" rx="35" ry="32" fill="#FFA500" opacity="0.2"/>
<!-- Moon body -->
<path d="M -25 -35 Q 15 -42 28 0 Q 15 42 -25 35 Q -8 18 -8 0 Q -8 -18 -25 -35 Z"
fill="url(#moonGradient)" stroke="#DAA520" stroke-width="0.5"/>
<!-- Moon surface details -->
<circle cx="-12" cy="-12" r="2.5" fill="#DAA520" opacity="0.4"/>
<circle cx="-18" cy="8" r="1.8" fill="#DAA520" opacity="0.3"/>
<circle cx="-5" cy="15" r="1.2" fill="#DAA520" opacity="0.35"/>
<ellipse cx="-15" cy="-25" rx="3" ry="1.5" fill="#DAA520" opacity="0.25"/>
</g>
<!-- Flying fish in dynamic leap -->
<g transform="translate(180, 110) rotate(-20)">
<!-- Fish body shadow/depth -->
<ellipse cx="2" cy="2" rx="28" ry="9" fill="#000" opacity="0.1"/>
<!-- Main fish body -->
<ellipse cx="0" cy="0" rx="28" ry="9" fill="url(#fishBodyGradient)" stroke="#1E90FF" stroke-width="0.8"/>
<!-- Fish head -->
<ellipse cx="-22" cy="0" rx="10" ry="7" fill="url(#fishBodyGradient)"/>
<!-- Fish snout -->
<ellipse cx="-30" cy="0" rx="4" ry="3" fill="#4682B4"/>
<!-- Fish eye -->
<circle cx="-28" cy="-2" r="3" fill="#FFF"/>
<circle cx="-27" cy="-2" r="2" fill="#000"/>
<circle cx="-26.5" cy="-2.8" r="0.8" fill="#FFF"/>
<!-- Large wing-like pectoral fins -->
<path d="M -15 -9 Q -45 -30 -60 -18 Q -50 -8 -35 -10 Q -25 -9 -15 -9 Z"
fill="url(#finGradient)" stroke="#4682B4" stroke-width="0.6" opacity="0.85"/>
<path d="M -15 9 Q -45 30 -60 18 Q -50 8 -35 10 Q -25 9 -15 9 Z"
fill="url(#finGradient)" stroke="#4682B4" stroke-width="0.6" opacity="0.85"/>
<!-- Dorsal fin -->
<path d="M -8 -9 Q -2 -22 12 -18 Q 18 -10 12 -9 Z"
fill="url(#finGradient)" stroke="#4682B4" stroke-width="0.5"/>
<!-- Anal fin -->
<path d="M 5 9 Q 10 18 20 15 Q 15 9 5 9 Z"
fill="url(#finGradient)" stroke="#4682B4" stroke-width="0.5"/>
<!-- Tail fin -->
<path d="M 28 -6 Q 45 -12 52 0 Q 45 12 28 6 Q 32 3 32 0 Q 32 -3 28 -6 Z"
fill="url(#finGradient)" stroke="#4682B4" stroke-width="0.6"/>
<!-- Fish scale pattern -->
<g opacity="0.4" stroke="#FFF" stroke-width="0.4" fill="none">
<circle cx="-18" cy="-4" r="1.8"/>
<circle cx="-12" cy="-2" r="1.8"/>
<circle cx="-6" cy="-4" r="1.8"/>
<circle cx="0" cy="-2" r="1.8"/>
<circle cx="6" cy="-4" r="1.8"/>
<circle cx="12" cy="-2" r="1.8"/>
<circle cx="18" cy="-4" r="1.8"/>
<circle cx="-18" cy="4" r="1.8"/>
<circle cx="-12" cy="2" r="1.8"/>
<circle cx="-6" cy="4" r="1.8"/>
<circle cx="0" cy="2" r="1.8"/>
<circle cx="6" cy="4" r="1.8"/>
<circle cx="12" cy="2" r="1.8"/>
<circle cx="18" cy="4" r="1.8"/>
</g>
<!-- Fish fin details -->
<g opacity="0.5" stroke="#87CEEB" stroke-width="0.3" fill="none">
<path d="M -35 -15 Q -45 -20 -50 -15"/>
<path d="M -40 -12 Q -48 -15 -52 -12"/>
<path d="M -35 15 Q -45 20 -50 15"/>
<path d="M -40 12 Q -48 15 -52 12"/>
</g>
</g>
<!-- Water droplets and splash effects -->
<circle cx="140" cy="90" r="2" fill="url(#dropletGradient)" opacity="0.7"/>
<circle cx="210" cy="105" r="1.5" fill="url(#dropletGradient)" opacity="0.6"/>
<circle cx="195" cy="85" r="1" fill="url(#dropletGradient)" opacity="0.5"/>
<circle cx="165" cy="75" r="1.8" fill="url(#dropletGradient)" opacity="0.65"/>
<circle cx="230" cy="120" r="1.2" fill="url(#dropletGradient)" opacity="0.55"/>
<circle cx="155" cy="65" r="0.8" fill="url(#dropletGradient)" opacity="0.4"/>
<!-- Motion trails -->
<g opacity="0.3" stroke="#87CEEB" stroke-width="1.5" fill="none">
<path d="M 110 125 Q 140 118 170 125">
<animate attributeName="opacity" values="0;0.5;0" dur="2s" repeatCount="indefinite"/>
</path>
<path d="M 115 135 Q 145 128 175 135">
<animate attributeName="opacity" values="0;0.3;0" dur="2.5s" repeatCount="indefinite"/>
</path>
<path d="M 105 115 Q 135 108 165 115">
<animate attributeName="opacity" values="0;0.4;0" dur="1.8s" repeatCount="indefinite"/>
</path>
</g>
<!-- Atmospheric particles -->
<g opacity="0.6">
<circle cx="90" cy="160" r="0.5" fill="#FFB347"/>
<circle cx="240" cy="180" r="0.8" fill="#FF8C69"/>
<circle cx="60" cy="190" r="0.6" fill="#FFD700"/>
<circle cx="270" cy="210" r="0.4" fill="#FFA500"/>
</g>
<!-- Subtle reflection on water surface -->
<ellipse cx="120" cy="280" rx="80" ry="15" fill="#4682B4" opacity="0.2"/>
<ellipse cx="120" cy="280" rx="60" ry="8" fill="#87CEEB" opacity="0.15"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Dusk background with gradient -->
<defs>
<linearGradient id="dusk" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#4ecdc4;stop-opacity:0.5" />
</linearGradient>
<linearGradient id="moon" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff;stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#fff;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="fish" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4ecdc4;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#45b7d1;stop-opacity:0.8" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#dusk)"/>
<!-- Crescent moon -->
<clipPath id="crescent">
<path d="M150 200 L100 250 A50 50 0 0 1 200 250 L150 200 Z"/>
</clipPath>
<circle cx="150" cy="150" r="100" fill="url(#moon)"/>
<!-- Flying fish -->
<path d="M140 170 C150 160 160 155 170 150 C170 145 165 140 160 135 L160 135 L185 135 C190 135 195 140 200 145 C205 150 200 155 195 160 L185 160 L160 160 C160 165 150 170 140 170"
fill="none" stroke="url(#fish)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Fish tail -->
<path d="M160 135 C155 130 150 125 145 125 L145 125 L140 135 Z" fill="url(#fish)"/>
<!-- Flying trail -->
<path d="M140 170 Q180 140 220 170" fill="none" stroke="#45b7d1" stroke-width="2" stroke-opacity="0.5" stroke-linecap="round"/>
<!-- Stars -->
<circle cx="50" cy="50" r="1" fill="white" opacity="0.8"/>
<circle cx="80" cy="70" r="1.5" fill="white" opacity="0.6"/>
<circle cx="220" cy="80" r="1" fill="white" opacity="0.8"/>
<circle cx="250" cy="60" r="1.2" fill="white" opacity="0.6"/>
<circle cx="280" cy="90" r="1" fill="white" opacity="0.8"/>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt, depicting a detailed flying fish leaping over a crescent moon with a vibrant dusk background, enhancing its creativity and visual appeal.
Player 2's submission, while minimalistic, lacks clarity in representing the flying fish and crescent moon, making it less effective in conveying the idea and less visually engaging overall.
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.