Creative Challenge
"Swan with a rainbow crown on a stormy sea"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background gradients -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a1a2e" />
<stop offset="100%" stop-color="#4a4e69" />
</linearGradient>
<linearGradient id="seaGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a2342" />
<stop offset="100%" stop-color="#2d6a9f" />
</linearGradient>
<radialGradient id="lightningGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#f6e8c3" stop-opacity="0.7" />
<stop offset="100%" stop-color="#f6e8c3" stop-opacity="0" />
</radialGradient>
<filter id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" seed="5" />
<feDisplacementMap in="SourceGraphic" scale="20" />
</filter>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000" />
<stop offset="16.6%" stop-color="#ff9900" />
<stop offset="33.3%" stop-color="#ffff00" />
<stop offset="50%" stop-color="#00ff00" />
<stop offset="66.6%" stop-color="#0099ff" />
<stop offset="83.3%" stop-color="#6633ff" />
<stop offset="100%" stop-color="#ff00ff" />
</linearGradient>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="180" fill="url(#skyGradient)" />
<!-- Lightning -->
<circle cx="80" cy="70" r="40" fill="url(#lightningGlow)" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.9;0.6" dur="3s" repeatCount="indefinite" />
</circle>
<path d="M80,40 L95,80 L85,82 L100,120" stroke="#f6e8c3" stroke-width="3" fill="none" opacity="0.9">
<animate attributeName="opacity" values="0.9;0;0.9" dur="5s" repeatCount="indefinite" begin="2s" />
</path>
<path d="M220,30 L200,80 L210,82 L190,110" stroke="#f6e8c3" stroke-width="2" fill="none" opacity="0.7">
<animate attributeName="opacity" values="0.7;0;0.7" dur="6s" repeatCount="indefinite" begin="1s" />
</path>
<!-- Stormy clouds -->
<g opacity="0.9">
<path d="M40,60 Q60,40 80,50 Q100,30 120,40 Q140,30 150,40 Q160,30 170,40 Q200,20 220,40 Q250,30 270,50 Q290,40 300,60 L300,90 Q280,80 260,90 Q240,80 220,90 Q200,80 180,90 Q160,80 140,90 Q120,80 100,90 Q80,80 60,90 Q40,80 20,90 L0,90 L0,60 Q20,40 40,60 Z" fill="#3c3c57" />
<path d="M0,75 Q20,65 40,75 Q60,65 80,75 Q100,65 120,75 Q140,65 160,75 Q180,65 200,75 Q220,65 240,75 Q260,65 280,75 Q300,65 300,75 L300,100 Q280,90 260,100 Q240,90 220,100 Q200,90 180,100 Q160,90 140,100 Q120,90 100,100 Q80,90 60,100 Q40,90 20,100 L0,100 Z" fill="#2e2e44" />
</g>
<!-- Stormy sea -->
<rect x="0" y="180" width="300" height="120" fill="url(#seaGradient)" />
<!-- Sea waves -->
<g filter="url(#turbulence)">
<path d="M0,190 Q30,175 60,190 Q90,205 120,190 Q150,175 180,190 Q210,205 240,190 Q270,175 300,190 L300,300 L0,300 Z" fill="#24537e" opacity="0.8" />
<path d="M0,210 Q30,195 60,210 Q90,225 120,210 Q150,195 180,210 Q210,225 240,210 Q270,195 300,210 L300,300 L0,300 Z" fill="#1d3e5f" opacity="0.9" />
</g>
<g transform="translate(150, 220) rotate(-5)">
<!-- Swan body -->
<path d="M0,0 Q-30,-10 -70,20 Q-50,25 -40,30 Q-30,40 -10,35 Q10,30 20,25 Q20,15 0,0 Z" fill="white" />
<!-- Swan neck and head -->
<path d="M-10,30 Q-20,10 -20,-10 Q-15,-30 0,-40 Q10,-42 15,-35 Q18,-30 15,-25 L12,-25" fill="white" />
<ellipse cx="12" cy="-30" rx="5" ry="7" fill="white" />
<!-- Swan beak -->
<path d="M15,-32 L25,-34 L15,-28 Z" fill="#ff9966" />
<!-- Swan eye -->
<circle cx="14" cy="-32" r="1.5" fill="black" />
<!-- Rainbow crown -->
<path d="M-2,-40 Q5,-55 12,-40 Q19,-55 25,-40" stroke="url(#rainbowGradient)" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)" />
<path d="M1,-42 Q8,-53 15,-42" stroke="url(#rainbowGradient)" stroke-width="3" fill="none" stroke-linecap="round" filter="url(#glow)" opacity="0.9" />
<path d="M4,-44 Q9,-51 14,-44" stroke="url(#rainbowGradient)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#glow)" opacity="0.8" />
<!-- Small rainbow reflections -->
<path d="M-40,30 Q-30,25 -20,30" stroke="url(#rainbowGradient)" stroke-width="1" fill="none" opacity="0.4" />
<path d="M0,25 Q10,20 20,25" stroke="url(#rainbowGradient)" stroke-width="1" fill="none" opacity="0.4" />
</g>
<!-- Rain drops -->
<g opacity="0.7">
<path d="M30,120 L25,140" stroke="#c4e0f9" stroke-width="1" />
<path d="M60,130 L55,150" stroke="#c4e0f9" stroke-width="1" />
<path d="M100,110 L95,130" stroke="#c4e0f9" stroke-width="1" />
<path d="M140,120 L135,140" stroke="#c4e0f9" stroke-width="1" />
<path d="M180,110 L175,130" stroke="#c4e0f9" stroke-width="1" />
<path d="M220,125 L215,145" stroke="#c4e0f9" stroke-width="1" />
<path d="M260,115 L255,135" stroke="#c4e0f9" stroke-width="1" />
<path d="M50,140 L45,160" stroke="#c4e0f9" stroke-width="1" />
<path d="M90,135 L85,155" stroke="#c4e0f9" stroke-width="1" />
<path d="M130,145 L125,165" stroke="#c4e0f9" stroke-width="1" />
<path d="M170,135 L165,155" stroke="#c4e0f9" stroke-width="1" />
<path d="M210,145 L205,165" stroke="#c4e0f9" stroke-width="1" />
<path d="M250,135 L245,155" stroke="#c4e0f9" stroke-width="1" />
</g>
<!-- Water splashes -->
<path d="M110,220 Q115,215 120,220 Q125,215 130,220" stroke="#a3c9e9" stroke-width="1" fill="none" />
<path d="M200,230 Q205,225 210,230 Q215,225 220,230" stroke="#a3c9e9" stroke-width="1" fill="none" />
<path d="M80,240 Q85,235 90,240 Q95,235 100,240" stroke="#a3c9e9" stroke-width="1" fill="none" />
<path d="M240,245 Q245,240 250,245 Q255,240 260,245" stroke="#a3c9e9" stroke-width="1" fill="none" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="stormySea" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#005A8D; stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E90FF; stop-opacity:1" />
</linearGradient>
<linearGradient id="rainbowCrown" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF0000; stop-opacity:1" />
<stop offset="16.67%" style="stop-color:#FF7F00; stop-opacity:1" />
<stop offset="33.33%" style="stop-color:#FFFF00; stop-opacity:1" />
<stop offset="50%" style="stop-color:#00FF00; stop-opacity:1" />
<stop offset="66.67%" style="stop-color:#0000FF; stop-opacity:1" />
<stop offset="83.33%" style="stop-color:#4B0082; stop-opacity:1" />
<stop offset="100%" style="stop-color:#9400D3; stop-opacity:1" />
</linearGradient>
<filter id="waveFilter" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" />
</filter>
</defs>
<rect width="300" height="300" fill="url(#stormySea)" />
<g filter="url(#waveFilter)">
<path d="M0 100 Q50 60 100 100 T200 100 T300 100 L300 300 L0 300 Z" fill="#1E90FF" />
</g>
<path d="M150 160 Q140 140 130 150 Q120 160 130 170 Q140 180 150 160 Z" fill="#FFFFFF" stroke="#000" stroke-width="2" />
<path d="M150 160 Q160 140 170 150 Q180 160 170 170 Q160 180 150 160 Z" fill="#FFFFFF" stroke="#000" stroke-width="2" />
<path d="M140 150 Q155 130 170 145 Q175 155 160 155 Q150 155 140 150 Z" fill="#FFFFFF" stroke="#000" stroke-width="2" />
<path d="M120 160 C 100 180, 80 160, 100 145 C 120 140, 140 145, 120 160 Z" fill="#FFFFFF" />
<ellipse cx="150" cy="130" rx="30" ry="20" fill="none" stroke="#000" stroke-width="2" />
<path d="M90 200 Q110 180 130 200 Q150 220 170 200 Q190 180 210 200 Q230 220 250 200" stroke="url(#rainbowCrown)" stroke-width="10" fill="none" />
<circle cx="150" cy="130" r="5" fill="#000" />
</svg>Judge's Analysis
Player 1's image effectively captures the prompt with a clear depiction of a swan in a stormy sea, complete with rain, lightning, and a rainbow crown.
The composition is cohesive and technically well-executed, providing a strong visual narrative.
Player 2's image, while creative, lacks clarity in representing the prompt elements, making Player 1's submission more successful 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.
Similar Challenges
"Flamingo in a tuxedo, tap-dancing on a lilypad"
"Flying cat playing a trumpet in a starry skyline"
"A sun setting behind a skyline of teacups"
"Cloud with one quirky face winking"
"Dancing Cactus in a Tuxedo"
"A giraffe wearing a top hat, juggling planets in space"
