Creative Challenge
"Flying whale carrying a glowing lantern through a starry night sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGlow" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#1a0b2e"/>
<stop offset="100%" stop-color="#090418"/>
</radialGradient>
<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(#skyGlow)"/>
<!-- Stars -->
<g fill="white">
<circle cx="50" cy="50" r="1"/>
<circle cx="80" cy="30" r="1.5"/>
<circle cx="200" cy="40" r="1"/>
<circle cx="250" cy="70" r="1.2"/>
<circle cx="150" cy="20" r="1.3"/>
<circle cx="280" cy="120" r="1"/>
<circle cx="30" cy="180" r="1.4"/>
<circle cx="220" cy="200" r="1"/>
<circle cx="180" cy="250" r="1.2"/>
</g>
<!-- Whale -->
<g transform="translate(150,150) rotate(-15)">
<path d="M-60,0 C-40,-20 40,-20 60,0 C40,20 -40,20 -60,0 Z" fill="#4a6fa5"/>
<path d="M50,-2 C60,-2 70,0 75,5 L85,0 L75,-5 C70,-7 60,-5 50,-2 Z" fill="#4a6fa5"/>
<ellipse cx="-30" cy="-5" rx="5" ry="8" fill="#000"/>
<path d="M-20,15 Q0,25 20,15" fill="none" stroke="#345785" stroke-width="2"/>
</g>
<!-- Lantern -->
<g transform="translate(120,160)">
<path d="M-10,-20 L10,-20 L15,10 L-15,10 Z" fill="#ffd700" filter="url(#glow)"/>
<rect x="-2" y="-25" width="4" height="5" fill="#b8860b"/>
<circle cx="0" cy="-5" r="8" fill="#fff5" filter="url(#glow)"/>
</g>
<!-- Light rays -->
<g transform="translate(120,160)" opacity="0.3">
<path d="M-20,-5 L20,-5 L30,30 L-30,30 Z" fill="#ffd700" filter="url(#glow)"/>
</g>
<!-- Clouds -->
<g fill="#ffffff20">
<path d="M50,100 Q70,80 90,100 Q110,80 130,100 Q110,120 90,100 Q70,120 50,100"/>
<path d="M200,220 Q220,200 240,220 Q260,200 280,220 Q260,240 240,220 Q220,240 200,220"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradient for whale body -->
<linearGradient id="whaleBodyGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#0f184e"/>
<stop offset="50%" stop-color="#223c89"/>
<stop offset="100%" stop-color="#5a80d6"/>
</linearGradient>
<!-- Gradient for whale belly -->
<linearGradient id="whaleBellyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#9dbde8"/>
<stop offset="100%" stop-color="#c4d5f9"/>
</linearGradient>
<!-- Lantern glow radial gradient -->
<radialGradient id="lanternGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffdd70" stop-opacity="1"/>
<stop offset="80%" stop-color="#ffb700" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#ff9e00" stop-opacity="0"/>
</radialGradient>
<!-- Lantern glass gradient -->
<linearGradient id="lanternGlass" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fff8d0" stop-opacity="0.9" />
<stop offset="100%" stop-color="#f7b824" stop-opacity="0.8" />
</linearGradient>
<!-- Star glow radial gradient -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#fefefe" stop-opacity="1"/>
<stop offset="100%" stop-color="#a6c8ff" stop-opacity="0"/>
</radialGradient>
<!-- Pattern for whale skin subtle dots -->
<pattern id="whaleSkinDots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="3" cy="3" r="0.7" fill="rgba(255,255,255,0.08)" />
<circle cx="7" cy="7" r="0.7" fill="rgba(255,255,255,0.08)" />
</pattern>
<!-- Star shape -->
<symbol id="star" viewBox="0 0 24 24">
<polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="white"/>
</symbol>
<!-- Tail fin pattern -->
<linearGradient id="tailGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#4a69ad" />
<stop offset="100%" stop-color="#244975" />
</linearGradient>
</defs>
<!-- Background sky: deep navy to black tinted gradient -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0b0a2b"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Star field clusters -->
<g>
<!-- large subtle glow stars -->
<circle cx="50" cy="40" r="3" fill="url(#starGlow)"/>
<circle cx="85" cy="70" r="2.5" fill="url(#starGlow)"/>
<circle cx="240" cy="60" r="3.5" fill="url(#starGlow)"/>
<circle cx="190" cy="110" r="2.7" fill="url(#starGlow)"/>
<circle cx="270" cy="30" r="3.3" fill="url(#starGlow)"/>
<circle cx="130" cy="80" r="3" fill="url(#starGlow)"/>
</g>
<g fill="white" filter="url(#starBlur)">
<!-- small sharp stars -->
<use href="#star" x="20" y="25" width="6" height="6" fill="white" opacity="0.8"/>
<use href="#star" x="70" y="50" width="4" height="4" fill="white" opacity="0.7" />
<use href="#star" x="110" y="110" width="5" height="5" fill="white" opacity="0.9" />
<use href="#star" x="150" y="40" width="3" height="3" fill="white" opacity="0.6"/>
<use href="#star" x="190" y="75" width="5" height="5" fill="white" opacity="0.9" />
<use href="#star" x="220" y="100" width="4" height="4" fill="white" opacity="0.7" />
<use href="#star" x="260" y="80" width="3" height="3" fill="white" opacity="0.6"/>
<use href="#star" x="280" y="120" width="6" height="6" fill="white" opacity="0.8"/>
<use href="#star" x="50" y="150" width="3" height="3" fill="white" opacity="0.7" />
</g>
<!-- Whale group -->
<g transform="translate(80 160) scale(1.4 1.4)">
<!-- Whale Body -->
<ellipse cx="70" cy="50" rx="75" ry="35" fill="url(#whaleBodyGradient)" filter="url(#whaleShadow)"/>
<!-- Whale belly -->
<ellipse cx="70" cy="60" rx="65" ry="23" fill="url(#whaleBellyGradient)"/>
<!-- Texture dots on whale -->
<ellipse cx="70" cy="50" rx="75" ry="35" fill="url(#whaleSkinDots)" />
<!-- Whale eye -->
<circle cx="20" cy="43" r="6" fill="#fff" />
<circle cx="17" cy="43" r="3" fill="#0a1c3a" />
<circle cx="15" cy="40" r="1.5" fill="#c9eaf9" />
<!-- Whale blowhole steam swirling -->
<g stroke="url(#steamGradient)" stroke-width="1.8" fill="none" stroke-linecap="round">
<path d="M 35 15 q 8 -12 12 -5 q 6 -10 12 0" />
<path d="M 45 16 q 8 -10 10 -2" />
</g>
<defs>
<linearGradient id="steamGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dbeaff" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#b3d0f5" stop-opacity="0" />
</linearGradient>
</defs>
<!-- Whale fins -->
<path d="M130 50 q 20 -10 25 15 q -35 0 -25 -15" fill="url(#tailGradient)" filter="url(#finShadow)" />
<path d="M20 70 q -20 30 -10 45 q 40 -20 10 -45" fill="url(#tailGradient)" opacity="0.85"/>
<!-- Whale tail fin -->
<path d="M140 55 q 25 20 5 45 q -15 -5 -15 -40 q 5 25 5 -5" fill="url(#tailGradient)" />
<path d="M138 57 q 25 10 17 34 q -10 -18 -12 -36" fill="#2c4368" opacity="0.3"/>
</g>
<!-- Lantern group -->
<g transform="translate(130 215) rotate(-20)">
<!-- Lantern glow -->
<circle cx="0" cy="0" r="23" fill="url(#lanternGlow)" />
<!-- Lantern body -->
<ellipse cx="0" cy="0" rx="14" ry="20" fill="url(#lanternGlass)" stroke="#ddb232" stroke-width="1.8" />
<!-- Lantern frame vertical bars -->
<line x1="-10" y1="-18" x2="-10" y2="18" stroke="#a87c11" stroke-width="1.6" />
<line x1="-4" y1="-20" x2="-4" y2="20" stroke="#a87c11" stroke-width="1.2" />
<line x1="4" y1="-20" x2="4" y2="20" stroke="#a87c11" stroke-width="1.2" />
<line x1="10" y1="-18" x2="10" y2="18" stroke="#a87c11" stroke-width="1.6" />
<!-- Lantern frame horizontal rings -->
<ellipse cx="0" cy="-14" rx="14" ry="3" fill="#b2931a" />
<ellipse cx="0" cy="14" rx="14" ry="3" fill="#b2931a" />
<!-- Lantern handle -->
<path d="M-6,-19 q0,-11 12,-11 q10 0 10 12" fill="none" stroke="#a87c11" stroke-width="2" />
<!-- Light inside lantern -->
<circle cx="0" cy="0" r="9" fill="url(#lanternGlow)" filter="url(#innerLight)"/>
<!-- Inside lantern flicker -->
<circle cx="3" cy="-2" r="3" fill="#ffaa33" opacity="0.9">
<animate attributeName="cx" values="3;0;3" dur="3s" repeatCount="indefinite" />
<animate attributeName="cy" values="-2;2;-2" dur="2.8s" repeatCount="indefinite" />
<animate attributeName="r" values="3;4;3" dur="2s" repeatCount="indefinite" />
</circle>
</g>
<filter id="innerLight" x="-40%" y="-40%" width="180%" height="180%" >
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#ffb931"/>
</filter>
<!-- Rope connecting whale to lantern -->
<path d="M195 165 q12 20 30 45" stroke="#d4af37" stroke-width="1.2" fill="none" stroke-linecap="round" />
<path d="M195 165 q8 15 28 40" stroke="#e0be6d" stroke-width="0.8" fill="none" stroke-linecap="round" />
<path d="M195 165 q10 18 29 43" stroke="#c19b00" stroke-width="0.5" fill="none" stroke-linecap="round" />
<circle cx="195" cy="165" r="2.5" fill="#b08920" />
<!-- Whale fins minor details -->
<path d="M42 83 q -25 30 -10 45 q 15 -15 10 -45" fill="url(#tailGradient)" opacity="0.4" />
<!-- Water droplets/sparkles trailing behind whale/lantern -->
<g stroke="none" fill="url(#lanternGlow)" opacity="0.65">
<circle cx="190" cy="145" r="1.7">
<animate attributeName="cy" values="145;175;145" dur="4.5s" repeatCount="indefinite"/>
<animate attributeName="cx" values="190;200;190" dur="4.5s" repeatCount="indefinite"/>
</circle>
<circle cx="180" cy="150" r="1.3" >
<animate attributeName="cy" values="150;170;150" dur="3.8s" repeatCount="indefinite"/>
<animate attributeName="cx" values="180;165;180" dur="3.8s" repeatCount="indefinite"/>
</circle>
<circle cx="200" cy="160" r="1.1" >
<animate attributeName="cy" values="160;180;160" dur="4.1s" repeatCount="indefinite"/>
<animate attributeName="cx" values="200;190;200" dur="4.1s" repeatCount="indefinite"/>
</circle>
</g>
</svg>Judge's Analysis
Player 2's image demonstrates greater creativity and technical quality, with a more detailed depiction of the whale and a glowing lantern that is visually engaging.
The composition feels lively and dynamic, adhering well to the prompt.
Player 1's submission, while simpler and adhering to the idea, lacks the same level of detail and visual appeal.
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.
