Creative Challenge
"A cat wearing a suit, playing chess with a floating, ethereal jellyfish"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="jellyglow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#ff88ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#aa44ff" stop-opacity="0.2"/>
</radialGradient>
<linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#334455"/>
<stop offset="100%" stop-color="#112233"/>
</linearGradient>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#1a1a2e"/>
<!-- Chess table -->
<path d="M50 180 L250 180 L270 260 L30 260 Z" fill="#754321"/>
<rect x="70" y="190" width="160" height="60" fill="#f0d9b5"/>
<g transform="translate(80,195)">
<rect width="20" height="20" fill="#b58863"/>
<rect x="40" width="20" height="20" fill="#b58863"/>
<rect x="80" width="20" height="20" fill="#b58863"/>
<rect x="120" width="20" height="20" fill="#b58863"/>
<rect x="20" y="20" width="20" height="20" fill="#b58863"/>
<rect x="60" y="20" width="20" height="20" fill="#b58863"/>
<rect x="100" y="20" width="20" height="20" fill="#b58863"/>
</g>
<!-- Cat -->
<path d="M120 140 Q140 120 160 140 Q180 160 160 180 Q140 200 120 180 Q100 160 120 140" fill="#gray"/>
<path d="M130 150 L140 140 L150 150" fill="none" stroke="black" stroke-width="2"/>
<circle cx="135" cy="155" r="2" fill="black"/>
<circle cx="145" cy="155" r="2" fill="black"/>
<path d="M120 140 L110 120 L130 130 M160 140 L170 120 L150 130" fill="none" stroke="gray" stroke-width="2"/>
<!-- Cat's suit -->
<path d="M120 180 Q140 190 160 180 L170 230 L110 230 Z" fill="url(#suit)"/>
<rect x="135" y="165" width="10" height="20" fill="white"/>
<circle cx="140" cy="170" r="2" fill="black"/>
<!-- Jellyfish -->
<g transform="translate(150,100)">
<path d="M0 0 Q30 20 0 40 Q-30 20 0 0" fill="url(#jellyglow)">
<animate attributeName="d"
dur="3s"
repeatCount="indefinite"
values="M0 0 Q30 20 0 40 Q-30 20 0 0;
M0 0 Q40 20 0 45 Q-40 20 0 0;
M0 0 Q30 20 0 40 Q-30 20 0 0"/>
</path>
<g>
<path d="M-5 35 Q0 55 5 35" fill="none" stroke="#ff88ff" stroke-width="1">
<animate attributeName="d"
dur="2s"
repeatCount="indefinite"
values="M-5 35 Q0 55 5 35;
M-5 35 Q0 45 5 35;
M-5 35 Q0 55 5 35"/>
</path>
<path d="M-15 35 Q-10 60 -5 35" fill="none" stroke="#ff88ff" stroke-width="1">
<animate attributeName="d"
dur="2.5s"
repeatCount="indefinite"
values="M-15 35 Q-10 60 -5 35;
M-15 35 Q-10 50 -5 35;
M-15 35 Q-10 60 -5 35"/>
</path>
<path d="M5 35 Q10 60 15 35" fill="none" stroke="#ff88ff" stroke-width="1">
<animate attributeName="d"
dur="1.8s"
repeatCount="indefinite"
values="M5 35 Q10 60 15 35;
M5 35 Q10 50 15 35;
M5 35 Q10 60 15 35"/>
</path>
</g>
</g>
<!-- Chess pieces -->
<circle cx="100" cy="205" r="8" fill="#000"/>
<path d="M160 195 L165 215 L155 215 Z" fill="#fff"/>
<!-- Ambient glow -->
<circle cx="150" cy="100" r="40" fill="url(#jellyglow)" opacity="0.3">
<animate attributeName="opacity"
dur="4s"
repeatCount="indefinite"
values="0.3;0.5;0.3"/>
</circle>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="bgGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#1a0033" />
<stop offset="80%" stop-color="#000011" />
</radialGradient>
<linearGradient id="tableGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#5e3a1c" />
<stop offset="100%" stop-color="#3a2410" />
</linearGradient>
<pattern id="chessBoardPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" fill="#e9d8b6" />
<rect x="10" y="0" width="10" height="10" fill="#7a542e" />
<rect x="0" y="10" width="10" height="10" fill="#7a542e" />
<rect x="10" y="10" width="10" height="10" fill="#e9d8b6" />
</pattern>
<filter id="glowEffect" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="normal" />
</filter>
<linearGradient id="jellyfishGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#9966ff" stop-opacity="0.8" />
<stop offset="50%" stop-color="#cc99ff" stop-opacity="0.6" />
<stop offset="100%" stop-color="#eeddff" stop-opacity="0.4" />
</linearGradient>
<linearGradient id="suitGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#333333" />
<stop offset="100%" stop-color="#111111" />
</linearGradient>
<filter id="fuzzyShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGradient)" />
<!-- Small distant stars -->
<g id="stars">
<circle cx="30" cy="40" r="0.8" fill="white" />
<circle cx="60" cy="20" r="0.6" fill="white" />
<circle cx="80" cy="50" r="0.7" fill="white" />
<circle cx="120" cy="30" r="0.5" fill="white" />
<circle cx="150" cy="15" r="0.9" fill="white" />
<circle cx="200" cy="25" r="0.7" fill="white" />
<circle cx="250" cy="40" r="0.8" fill="white" />
<circle cx="270" cy="60" r="0.6" fill="white" />
<circle cx="220" cy="70" r="0.5" fill="white" />
<circle cx="40" cy="70" r="0.7" fill="white" />
<circle cx="280" cy="30" r="0.8" fill="white" />
</g>
<!-- Table -->
<rect x="40" y="170" width="220" height="20" fill="url(#tableGradient)" rx="2" filter="url(#fuzzyShadow)" />
<rect x="50" y="190" width="15" height="80" fill="url(#tableGradient)" />
<rect x="235" y="190" width="15" height="80" fill="url(#tableGradient)" />
<!-- Chessboard -->
<rect x="90" y="130" width="120" height="120" fill="url(#chessBoardPattern)" filter="url(#fuzzyShadow)" />
<!-- Chess pieces (simplified) -->
<g id="chessPieces">
<circle cx="110" cy="150" r="5" fill="black" />
<polygon points="130,145 125,155 135,155" fill="white" />
<rect x="145" y="145" width="10" height="10" fill="black" />
<path d="M175,155 L170,145 L180,145 Z" fill="white" />
<circle cx="110" cy="170" r="5" fill="white" />
<path d="M130,165 C130,162 125,168 135,168 Z" fill="black" />
</g>
<!-- Cat in Suit -->
<g id="catInSuit" transform="translate(50, 180)">
<!-- Cat head -->
<ellipse cx="30" cy="0" rx="25" ry="22" fill="#f0c090" filter="url(#fuzzyShadow)" />
<path d="M10,-15 L2,-35 L8,-20 Z" fill="#f0c090" />
<path d="M50,-15 L58,-35 L52,-20 Z" fill="#f0c090" />
<!-- Cat face -->
<ellipse cx="20" cy="-5" rx="5" ry="7" fill="white" />
<ellipse cx="40" cy="-5" rx="5" ry="7" fill="white" />
<ellipse cx="20" cy="-5" rx="2" ry="4" fill="black" />
<ellipse cx="40" cy="-5" rx="2" ry="4" fill="black" />
<ellipse cx="30" cy="5" rx="4" ry="2" fill="#ffcccc" />
<path d="M20,10 Q30,15 40,10" fill="none" stroke="black" stroke-width="1" />
<!-- Whiskers -->
<line x1="15" y1="5" x2="0" y2="0" stroke="black" stroke-width="0.5" />
<line x1="15" y1="8" x2="0" y2="10" stroke="black" stroke-width="0.5" />
<line x1="45" y1="5" x2="60" y2="0" stroke="black" stroke-width="0.5" />
<line x1="45" y1="8" x2="60" y2="10" stroke="black" stroke-width="0.5" />
<!-- Suit body -->
<path d="M5,15 L55,15 L60,80 L0,80 Z" fill="url(#suitGradient)" />
<rect x="20" y="15" width="20" height="40" fill="white" />
<circle cx="30" cy="30" r="3" fill="black" />
<circle cx="30" cy="40" r="3" fill="black" />
<path d="M30,15 L30,55 M20,25 L40,25" stroke="#333" stroke-width="1" />
<!-- Bowtie -->
<path d="M25,12 L35,12 L30,15 Z" fill="red" />
<path d="M25,18 L35,18 L30,15 Z" fill="red" />
<!-- Paws -->
<ellipse cx="12" cy="80" rx="8" ry="3" fill="#f0c090" />
<ellipse cx="48" cy="80" rx="8" ry="3" fill="#f0c090" />
</g>
<!-- Ethereal Jellyfish -->
<g id="jellyfish" transform="translate(200, 70)" filter="url(#glowEffect)">
<ellipse cx="0" cy="0" rx="25" ry="20" fill="url(#jellyfishGradient)" opacity="0.8" />
<!-- Jellyfish tentacles -->
<path d="M-20,15 Q-25,30 -30,50" fill="none" stroke="#ccaaff" stroke-width="2" opacity="0.7" />
<path d="M-10,15 Q-15,35 -10,60" fill="none" stroke="#ccaaff" stroke-width="2" opacity="0.7" />
<path d="M0,20 Q0,40 5,55" fill="none" stroke="#ccaaff" stroke-width="2" opacity="0.7" />
<path d="M10,15 Q15,35 20,65" fill="none" stroke="#ccaaff" stroke-width="2" opacity="0.7" />
<path d="M20,15 Q25,30 15,50" fill="none" stroke="#ccaaff" stroke-width="2" opacity="0.7" />
<!-- Inner glow parts -->
<ellipse cx="0" cy="-5" rx="15" ry="10" fill="#ffffff" opacity="0.3" />
<ellipse cx="0" cy="0" rx="5" ry="7" fill="#ffffff" opacity="0.5" />
<!-- Decorative patterns -->
<path d="M-15,-5 Q-5,5 5,-5 Q15,5 20,-5" fill="none" stroke="#eeddff" stroke-width="1" opacity="0.5" />
<path d="M-15,5 Q-5,15 5,5 Q15,15 20,5" fill="none" stroke="#eeddff" stroke-width="1" opacity="0.5" />
</g>
<!-- Floating chess piece between them -->
<path d="M165,110 C170,105 175,100 175,95 C175,90 170,85 165,85 C160,85 155,90 155,95 C155,98 157,100 160,102 L160,110 L155,115 L175,115 L170,110 Z" fill="white" filter="url(#glowEffect)" opacity="0.9" />
<!-- Thought bubbles connecting cat and jellyfish -->
<circle cx="90" cy="110" r="3" fill="white" opacity="0.7" />
<circle cx="100" cy="100" r="5" fill="white" opacity="0.7" />
<circle cx="112" cy="90" r="7" fill="white" opacity="0.7" />
<circle cx="210" cy="110" r="3" fill="white" opacity="0.7" />
<circle cx="200" cy="100" r="5" fill="white" opacity="0.7" />
<circle cx="188" cy="90" r="7" fill="white" opacity="0.7" />
</svg>Judge's Analysis
Player 2's submission more clearly represents the prompt with a cat in a suit and a visibly ethereal jellyfish playing chess.
The composition is more detailed and visually appealing, with a clear distinction between the cat and the jellyfish.
Player 1's image lacks clarity and detail, making it less effective in illustrating the concept.
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
"Penguin wearing scuba gear under a full moon"
"Battling chess pieces on a melting ice chessboard"
"A neon jellyfish floating in a futuristic cityscape at night"
"Floating jellyfish over a desert, geometric style"
"Surreal clock with melting numbers in a candy forest"
"Moonlit octopus ballroom waltz, undersea elegance, in Art Deco style"
