Creative Challenge
"A cat-shaped cloud raining fish over a cityscape"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background cityscape -->
<rect x="0" y="150" width="300" height="150" fill="#82ccdd"/>
<rect x="50" y="120" width="30" height="30" fill="#b7b7a4"/>
<rect x="100" y="140" width="60" height="60" fill="#b7b7a4"/>
<rect x="200" y="110" width="80" height="80" fill="#b7b7a4"/>
<!-- Cloud -->
<circle cx="100" cy="80" r="50" fill="white"/>
<!-- Ears -->
<path d="M70,60 L90,40 L110,60 Z" fill="white"/>
<path d="M140,60 L160,40 L180,60 Z" fill="white"/>
<!-- Raindrops -->
<circle cx="80" cy="100" r="3" fill="#f9a03f"/>
<circle cx="120" cy="90" r="3" fill="#f9a03f"/>
<circle cx="140" cy="120" r="3" fill="#f9a03f"/>
<!-- Cat head features -->
<!-- Eyes -->
<circle cx="85" cy="75" r="5" fill="#3b3e6c"/>
<circle cx="115" cy="75" r="5" fill="#3b3e6c"/>
<!-- Nose -->
<circle cx="100" cy="85" r="3" fill="#f9a03f"/>
<!-- Mouth -->
<path d="M90,100 Q100,110 110,100" fill="none" stroke="#3b3e6c" stroke-width="2"/>
<!-- Falling Fish -->
<!-- Fish 1 -->
<path transform="translate(50,120) scale(0.5)" fill="#fa6e6e" d="M18,15 Q18,0 25,5 Q30,0 35,5 Q40,0 45,5 Q50,0 55,5 Q60,0 65,5 Q70,0 75,5 Q70,15 65,20 Q60,25 55,30 Q50,25 45,30 Q40,25 35,30 Q30,25 25,30 Q18,20 18,15 Z"/>
<!-- Fish 2 -->
<path transform="translate(130,80) scale(0.7)" fill="#fa6e6e" d="M18,15 Q18,0 25,5 Q30,0 35,5 Q40,0 45,5 Q50,0 55,5 Q60,0 65,5 Q70,0 75,5 Q70,15 65,20 Q60,25 55,30 Q50,25 45,30 Q40,25 35,30 Q30,25 25,30 Q18,20 18,15 Z"/>
<!-- Fish 3 -->
<path transform="translate(200,110) scale(0.6)" fill="#fa6e6e" d="M18,15 Q18,0 25,5 Q30,0 35,5 Q40,0 45,5 Q50,0 55,5 Q60,0 65,5 Q70,0 75,5 Q70,15 65,20 Q60,25 55,30 Q50,25 45,30 Q40,25 35,30 Q30,25 25,30 Q18,20 18,15 Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="300">
<stop offset="0%" stop-color="#70a8f0"/>
<stop offset="100%" stop-color="#1e3c72"/>
</linearGradient>
<radialGradient id="cloudGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#d8d8d8" stop-opacity="0.6"/>
</radialGradient>
<linearGradient id="fishGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff7e5f"/>
<stop offset="100%" stop-color="#feb47b"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
<!-- Sky Background -->
<rect width="300" height="300" fill="url(#skyGrad)" />
<!-- Cityscape -->
<g id="cityscape" fill="#2c3e50" filter="url(#shadow)">
<rect x="20" y="180" width="40" height="120" />
<rect x="80" y="160" width="30" height="140" />
<rect x="130" y="170" width="50" height="130" />
<rect x="200" y="150" width="35" height="150" />
<rect x="245" y="190" width="25" height="110" />
<!-- Windows -->
<g fill="#ecf0f1" font-size="4">
<!-- Building 1 -->
<text x="30" y="200">▢▢▢▢▢</text>
<text x="30" y="210">▢▢▢▢▢</text>
<!-- Building 2 -->
<text x="85" y="180">▢▢▢</text>
<text x="85" y="190">▢▢▢</text>
<text x="85" y="200">▢▢▢</text>
<!-- Building 3 -->
<text x="135" y="200">▢▢▢▢▢▢▢</text>
<text x="135" y="210">▢▢▢▢▢▢▢</text>
<!-- Building 4 -->
<text x="205" y="170">▢▢▢▢▢</text>
<text x="205" y="180">▢▢▢▢▢</text>
<text x="205" y="190">▢▢▢▢▢</text>
<!-- Building 5 -->
<text x="250" y="210">▢▢▢▢▢</text>
<text x="250" y="220">▢▢▢▢▢</text>
</g>
</g>
<!-- Cat-shaped Cloud -->
<g id="cloud">
<path d="M120,80
Q110,60 130,60
Q150,60 140,80
Q160,90 150,110
Q170,130 140,150
Q160,170 130,170
Q140,190 120,180
Q100,190 90,170
Q60,170 80,150
Q50,130 70,110
Q60,90 80,80
Q100,70 120,80 Z" fill="url(#cloudGrad)" filter="url(#shadow)" />
<!-- Ears -->
<path d="M95,75
L90,65
L100,70
Z" fill="url(#cloudGrad)" />
<path d="M145,75
L150,65
L140,70
Z" fill="url(#cloudGrad)" />
<!-- Eyes -->
<circle cx="110" cy="110" r="3" fill="#555"/>
<circle cx="130" cy="110" r="3" fill="#555"/>
<!-- Whiskers -->
<path d="M115,120 H105" stroke="#555" stroke-width="1"/>
<path d="M115,125 H105" stroke="#555" stroke-width="1"/>
<path d="M115,130 H105" stroke="#555" stroke-width="1"/>
<path d="M135,120 H145" stroke="#555" stroke-width="1"/>
<path d="M135,125 H145" stroke="#555" stroke-width="1"/>
<path d="M135,130 H145" stroke="#555" stroke-width="1"/>
</g>
<!-- Raining Fish -->
<g id="rainingFish">
<g fill="url(#fishGrad)" opacity="0.8">
<!-- Fish 1 -->
<path d="M115,170
C116,171 117,172 118,173
C119,172 120,171 121,170
C120,169 119,168 118,167
C117,168 116,169 115,170 Z
M118,167 L122,169 L118,171 Z" />
<!-- Fish 2 -->
<path d="M125,175
C126,176 127,177 128,178
C129,177 130,176 131,175
C130,174 129,173 128,172
C127,173 126,174 125,175 Z
M128,172 L132,174 L128,176 Z" />
<!-- Fish 3 -->
<path d="M135,165
C136,166 137,167 138,168
C139,167 140,166 141,165
C140,164 139,163 138,162
C137,163 136,164 135,165 Z
M138,162 L142,164 L138,166 Z" />
<!-- Fish 4 -->
<path d="M145,180
C146,181 147,182 148,183
C149,182 150,181 151,180
C150,179 149,178 148,177
C147,178 146,179 145,180 Z
M148,177 L152,179 L148,181 Z" />
<!-- Fish 5 -->
<path d="M155,170
C156,171 157,172 158,173
C159,172 160,171 161,170
C160,169 159,168 158,167
C157,168 156,169 155,170 Z
M158,167 L162,169 L158,171 Z" />
</g>
</g>
</svg>Judge's Analysis
Player 2's image more effectively captures the prompt with a clear cat-shaped cloud and visible fish raining over a recognizable cityscape.
The technical execution is stronger, with better-defined shapes and a cohesive color palette, enhancing the visual appeal and adherence to the theme.
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
"An octopus juggling colorful, oversized dice under a disco ball"
"Dancing octopus wearing a top hat and monocle under a disco ball"
"Mystical mime juggling glowing, translucent jellyfish in neon moonlight"
"Clocktower sprouting giant sunflowers, clock hands as petals"
"A cloud wearing sunglasses and a fedora sipping lemonade"
"A giraffe wearing 3D glasses watching a movie on a spaceship"
