Creative Challenge
"A cat piloting a spaceship shaped like a giant fish"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="fishGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00BFFF; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF4500; stop-opacity:1" />
</linearGradient>
<radialGradient id="catGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFD700; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFA500; stop-opacity:1" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g>
<!-- Fish Spaceship -->
<path d="M150 150 Q100 100 50 150 Q100 200 150 150 Q200 100 250 150 Q200 200 150 150 Z" fill="url(#fishGradient)" filter="url(#glow)"/>
<ellipse cx="200" cy="150" rx="10" ry="5" fill="#FFFFFF" />
<ellipse cx="50" cy="150" rx="10" ry="5" fill="#FFFFFF" />
<!-- Cat Pilot -->
<circle cx="150" cy="120" r="20" fill="url(#catGradient)" />
<ellipse cx="155" cy="115" rx="5" ry="10" fill="#000000" />
<ellipse cx="145" cy="115" rx="5" ry="10" fill="#000000" />
<circle cx="150" cy="125" r="2" fill="#FFFFFF" />
<path d="M140 130 Q150 135 160 130" stroke="#000000" stroke-width="1" fill="none" />
<!-- Space Background -->
<rect width="300" height="300" fill="black" />
<circle cx="100" cy="50" r="5" fill="#FFD700" />
<circle cx="220" cy="80" r="3" fill="#FFD700" />
<circle cx="50" cy="250" r="4" fill="#FFD700" />
<circle cx="250" cy="200" r="6" fill="#FFD700" />
<circle cx="180" cy="150" r="2" fill="#FFFFFF" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="spaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0D1B2A" />
<stop offset="100%" stop-color="#1B263B" />
</linearGradient>
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="1" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
<linearGradient id="fishBodyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF9E00" />
<stop offset="50%" stop-color="#FF5C8D" />
<stop offset="100%" stop-color="#FF0080" />
</linearGradient>
<linearGradient id="glassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#87CEEB" stop-opacity="0.9" />
<stop offset="100%" stop-color="#4682B4" stop-opacity="0.7" />
</linearGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<pattern id="scales" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,10 A10,10 0 0,1 20,10 A10,10 0 0,1 0,10 Z" fill="#FF8DC0" stroke="#FF478C" stroke-width="1" />
</pattern>
</defs>
<!-- Space background -->
<rect width="300" height="300" fill="url(#spaceGradient)" />
<!-- Stars -->
<g>
<circle cx="30" cy="50" r="1" fill="white" />
<circle cx="60" cy="80" r="1.5" fill="white" />
<circle cx="100" cy="30" r="1" fill="white" />
<circle cx="150" cy="20" r="1.5" fill="white" />
<circle cx="200" cy="70" r="1" fill="white" />
<circle cx="250" cy="40" r="2" fill="white" />
<circle cx="280" cy="90" r="1.5" fill="white" />
<circle cx="20" cy="120" r="1" fill="white" />
<circle cx="70" cy="170" r="1.5" fill="white" />
<circle cx="280" cy="180" r="1" fill="white" />
<circle cx="240" cy="220" r="1.5" fill="white" />
<circle cx="190" cy="250" r="1" fill="white" />
<circle cx="120" cy="270" r="1" fill="white" />
<circle cx="50" cy="230" r="1.5" fill="white" />
</g>
<!-- Glowing stars -->
<circle cx="85" cy="65" r="3" fill="url(#starGlow)" filter="url(#glow)" />
<circle cx="220" cy="140" r="4" fill="url(#starGlow)" filter="url(#glow)" />
<circle cx="45" cy="200" r="3" fill="url(#starGlow)" filter="url(#glow)" />
<circle cx="260" cy="240" r="4" fill="url(#starGlow)" filter="url(#glow)" />
<!-- Engine exhaust glow -->
<path d="M40,150 Q10,150 20,180 Q30,150 40,150 Z" fill="#87CEEB" filter="url(#glow)" opacity="0.7">
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="1.5s" repeatCount="indefinite" />
<animate attributeName="d" values="M40,150 Q10,150 20,180 Q30,150 40,150 Z;M40,150 Q5,150 15,190 Q35,150 40,150 Z;M40,150 Q10,150 20,180 Q30,150 40,150 Z" dur="0.8s" repeatCount="indefinite" />
</path>
<!-- Fish-shaped spaceship body -->
<g transform="translate(150, 150) rotate(0)">
<!-- Main fish body -->
<path d="M40,-40 C100,-60 160,-30 190,0 C160,30 100,60 40,40 C0,30 -80,20 -120,0 C-80,-20 0,-30 40,-40 Z" fill="url(#fishBodyGradient)" />
<!-- Scales pattern overlay -->
<path d="M40,-40 C100,-60 160,-30 190,0 C160,30 100,60 40,40 C0,30 -80,20 -120,0 C-80,-20 0,-30 40,-40 Z" fill="url(#scales)" opacity="0.6" />
<!-- Cockpit glass dome -->
<ellipse cx="80" cy="0" rx="40" ry="30" fill="url(#glassGradient)" stroke="#4682B4" stroke-width="2" />
<!-- Fins -->
<path d="M20,-35 L20,-70 L60,-40 Z" fill="#FF478C" stroke="#FF0080" stroke-width="1" />
<path d="M20,35 L20,70 L60,40 Z" fill="#FF478C" stroke="#FF0080" stroke-width="1" />
<path d="M120,0 L150,40 L160,30 L140,0 L160,-30 L150,-40 Z" fill="#FF478C" stroke="#FF0080" stroke-width="1" />
<!-- Fish tail -->
<path d="M-120,0 L-160,-30 L-160,30 Z" fill="#FF478C" stroke="#FF0080" stroke-width="1" />
<!-- Details on ship body -->
<circle cx="40" cy="-20" r="8" fill="#FFD700" stroke="#FFA500" stroke-width="1" />
<circle cx="40" cy="20" r="8" fill="#FFD700" stroke="#FFA500" stroke-width="1" />
<rect x="-40" y="-5" width="20" height="10" rx="3" fill="#87CEEB" stroke="#4682B4" />
<rect x="-70" y="-10" width="15" height="20" rx="3" fill="#B0E0E6" stroke="#4682B4" />
<!-- Portholes -->
<circle cx="0" cy="-20" r="5" fill="#87CEEB" stroke="#4682B4" stroke-width="1" />
<circle cx="0" cy="20" r="5" fill="#87CEEB" stroke="#4682B4" stroke-width="1" />
<circle cx="-50" cy="-15" r="3" fill="#87CEEB" stroke="#4682B4" stroke-width="1" />
<circle cx="-50" cy="15" r="3" fill="#87CEEB" stroke="#4682B4" stroke-width="1" />
<!-- Cat pilot inside cockpit -->
<g transform="translate(80, 0) scale(0.7)">
<!-- Cat head -->
<circle cx="0" cy="0" r="20" fill="#F8C471" />
<!-- Cat ears -->
<path d="M-15,-15 L-25,-35 L-5,-20 Z" fill="#F8C471" stroke="#E67E22" stroke-width="1" />
<path d="M15,-15 L25,-35 L5,-20 Z" fill="#F8C471" stroke="#E67E22" stroke-width="1" />
<path d="M-20,-30 L-15,-20 L-10,-30 Z" fill="#FFC3A0" />
<path d="M20,-30 L15,-20 L10,-30 Z" fill="#FFC3A0" />
<!-- Cat face -->
<ellipse cx="-8" cy="-5" rx="4" ry="6" fill="#2C3E50" />
<ellipse cx="8" cy="-5" rx="4" ry="6" fill="#2C3E50" />
<ellipse cx="-8" cy="-7" rx="1" ry="2" fill="white" />
<ellipse cx="8" cy="-7" rx="1" ry="2" fill="white" />
<path d="M0,0 L0,5 L-7,10 Q0,12 7,10 Z" fill="#E67E22" />
<line x1="-10" y1="0" x2="-15" y2="-2" stroke="#2C3E50" stroke-width="1.5" />
<line x1="-10" y1="2" x2="-15" y2="2" stroke="#2C3E50" stroke-width="1.5" />
<line x1="-10" y1="4" x2="-15" y2="6" stroke="#2C3E50" stroke-width="1.5" />
<line x1="10" y1="0" x2="15" y2="-2" stroke="#2C3E50" stroke-width="1.5" />
<line x1="10" y1="2" x2="15" y2="2" stroke="#2C3E50" stroke-width="1.5" />
<line x1="10" y1="4" x2="15" y2="6" stroke="#2C3E50" stroke-width="1.5" />
<!-- Pilot helmet visor (raised) -->
<path d="M-25,-10 A30,30 0 0,1 25,-10" fill="none" stroke="#87CEEB" stroke-width="3" />
<!-- Pilot paws on controls -->
<circle cx="-15" cy="18" r="6" fill="#F8C471" stroke="#E67E22" stroke-width="1" />
<circle cx="15" cy="18" r="6" fill="#F8C471" stroke="#E67E22" stroke-width="1" />
</g>
</g>
<!-- Control panel lights -->
<circle cx="95" cy="160" r="2" fill="#FF0000">
<animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite" />
</circle>
<circle cx="105" cy="160" r="2" fill="#00FF00">
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite" />
</circle>
<circle cx="115" cy="160" r="2" fill="#0000FF">
<animate attributeName="opacity" values="0.7;1;0.7" dur="0.8s" repeatCount="indefinite" />
</circle>
<!-- Space dust particles -->
<g opacity="0.7">
<circle cx="50" cy="100" r="1" fill="white">
<animate attributeName="cx" values="50;30" dur="3s" repeatCount="indefinite" />
<animate attributeName="cy" values="100;120" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="70" cy="130" r="1" fill="white">
<animate attributeName="cx" values="70;50" dur="5s" repeatCount="indefinite" />
<animate attributeName="cy" values="130;140" dur="5s" repeatCount="indefinite" />
</circle>
<circle cx="90" cy="110" r="1" fill="white">
<animate attributeName="cx" values="90;70" dur="4s" repeatCount="indefinite" />
<animate attributeName="cy" values="110;130" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="60" cy="120" r="1" fill="white">
<animate attributeName="cx" values="60;40" dur="6s" repeatCount="indefinite" />
<animate attributeName="cy" values="120;110" dur="6s" repeatCount="indefinite" />
</circle>
</g>
<!-- Entire spaceship subtle animation -->
<animateTransform
xlink:href="#spaceship"
attributeName="transform"
type="translate"
from="0 0"
to="5 3"
dur="3s"
repeatCount="indefinite"
additive="sum"
values="0 0; 5 3; 0 0; -5 -3; 0 0"
keyTimes="0; 0.25; 0.5; 0.75; 1" />
</svg>Judge's Analysis
Player 1's submission effectively captures the concept with a clear depiction of a cat piloting a spaceship shaped like a giant fish.
The composition is imaginative, adhering closely to the prompt, with visually appealing details such as the fish shape and the cat's presence.
Player 2's submission could not be evaluated due to an error loading the SVG.
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"
