Creative Challenge
"Cat balancing on a unicycle while juggling fish."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Define gradients for vibrant colors -->
<defs>
<linearGradient id="catGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fbb03b"/>
<stop offset="100%" stop-color="#f88379"/>
</linearGradient>
<linearGradient id="fishGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#4cc9f0"/>
<stop offset="100%" stop-color="#4361ee"/>
</linearGradient>
<radialGradient id="unicycleGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffd700"/>
<stop offset="100%" stop-color="#b88700"/>
</radialGradient>
<linearGradient id="backgroundGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffe6e6"/>
<stop offset="100%" stop-color="#ffe0b2"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#backgroundGradient)" />
<!-- Ground -->
<ellipse cx="150" cy="280" rx="140" ry="10" fill="#8bc34a" opacity="0.4"/>
<!-- Unicycle -->
<g id="unicycle" transform="translate(150,250)">
<!-- Wheel -->
<circle cx="0" cy="0" r="50" fill="none" stroke="black" stroke-width="4"/>
<!-- Spokes -->
<line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-width="2"/>
<line x1="0" y1="0" x2="-50" y2="0" stroke="black" stroke-width="2"/>
<line x1="0" y1="0" x2="0" y2="50" stroke="black" stroke-width="2"/>
<line x1="0" y1="0" x2="0" y2="-50" stroke="black" stroke-width="2"/>
<!-- Unicycle body -->
<rect x="-5" y="-10" width="10" height="100" fill="url(#unicycleGradient)" rx="2" ry="2"/>
</g>
<!-- Cat body -->
<g id="cat" transform="translate(150,170)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="30" ry="20" fill="url(#catGradient)" stroke="#333" stroke-width="1"/>
<!-- Head -->
<circle cx="0" cy="-25" r="12" fill="url(#catGradient)" stroke="#333" stroke-width="1"/>
<!-- Ears -->
<polygon points="-8,-33 0,-42 8,-33" fill="#333"/>
<!-- Eyes -->
<circle cx="-4" cy="-27" r="2" fill="#fff"/>
<circle cx="4" cy="-27" r="2" fill="#fff"/>
<!-- Pupils -->
<circle cx="-4" cy="-27" r="1" fill="#000"/>
<circle cx="4" cy="-27" r="1" fill="#000"/>
<!-- Nose -->
<polygon points="0,-23 2,-21 -2,-21" fill="#e75480"/>
<!-- Whiskers -->
<line x1="-10" y1="-21" x2="-4" y2="-19" stroke="#555" stroke-width="0.5"/>
<line x1="-10" y1="-20" x2="-4" y2="-20" stroke="#555" stroke-width="0.5"/>
<line x1="-10" y1="-19" x2="-4" y2="-21" stroke="#555" stroke-width="0.5"/>
<line x1="10" y1="-21" x2="4" y2="-19" stroke="#555" stroke-width="0.5"/>
<line x1="10" y1="-20" x2="4" y2="-20" stroke="#555" stroke-width="0.5"/>
<line x1="10" y1="-19" x2="4" y2="-21" stroke="#555" stroke-width="0.5"/>
</g>
<!-- Cat's tail -->
<path d="M180,170 Q200,200 170,220" stroke="#333" stroke-width="4" fill="none" opacity="0.8"/>
<!-- Juggling fish -->
<!-- First fish -->
<g id="fish1" transform="translate(125,120)">
<ellipse cx="0" cy="0" rx="8" ry="4" fill="url(#fishGradient)" stroke="#555" stroke-width="0.5"/>
<!-- Tail fins -->
<polygon points="8,0 12,2 8,4" fill="#a2d2ff"/>
<polygon points="-8,0 -12,2 -8,4" fill="#a2d2ff"/>
<!-- Eye -->
<circle cx="-2" cy="-1" r="0.5" fill="#333"/>
</g>
<!-- Second fish -->
<g id="fish2" transform="translate(165,80)">
<ellipse cx="0" cy="0" rx="8" ry="4" fill="url(#fishGradient)" stroke="#555" stroke-width="0.5"/>
<!-- Tail fins -->
<polygon points="8,0 12,2 8,4" fill="#a2d2ff"/>
<polygon points="-8,0 -12,2 -8,4" fill="#a2d2ff"/>
<!-- Eye -->
<circle cx="-2" cy="-1" r="0.5" fill="#333"/>
</g>
<!-- Third fish -->
<g id="fish3" transform="translate(135,140)">
<ellipse cx="0" cy="0" rx="8" ry="4" fill="url(#fishGradient)" stroke="#555" stroke-width="0.5"/>
<!-- Tail fins -->
<polygon points="8,0 12,2 8,4" fill="#a2d2ff"/>
<polygon points="-8,0 -12,2 -8,4" fill="#a2d2ff"/>
<!-- Eye -->
<circle cx="-2" cy="-1" r="0.5" fill="#333"/>
</g>
<!-- Additional artistic elements -->
<!-- Light rays or floating effect (optional for dynamic feel) -->
<g opacity="0.2" stroke="#fff" stroke-width="1.5" stroke-dasharray="2,2">
<line x1="50" y1="50" x2="250" y2="50"/>
<line x1="50" y1="80" x2="250" y2="80"/>
<line x1="50" y1="110" x2="250" y2="110"/>
<line x1="50" y1="140" x2="250" y2="140"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background Radial Gradient -->
<defs>
<radialGradient id="bgGradient" cx="50%" cy="60%" r="80%">
<stop offset="0%" stop-color="#dceaff"/>
<stop offset="100%" stop-color="#77b6ea"/>
</radialGradient>
<radialGradient id="catFur" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#ffecb3"/>
<stop offset="100%" stop-color="#af7539"/>
</radialGradient>
<linearGradient id="unicycleWheel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8f8f8f"/>
<stop offset="100%" stop-color="#1f2328"/>
</linearGradient>
<linearGradient id="seatGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6c3483"/>
<stop offset="100%" stop-color="#d2b4de"/>
</linearGradient>
<linearGradient id="fishBody0" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#34ace0"/>
<stop offset="100%" stop-color="#227093"/>
</linearGradient>
<linearGradient id="fishBody1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f7b731"/>
<stop offset="100%" stop-color="#e17055"/>
</linearGradient>
<linearGradient id="fishBody2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a4b0be"/>
<stop offset="100%" stop-color="#ced6e0"/>
</linearGradient>
<radialGradient id="eyeGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#7f8c8d"/>
</radialGradient>
<radialGradient id="catPawGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#fdebd0"/>
<stop offset="100%" stop-color="#e59866"/>
</radialGradient>
<radialGradient id="shadowGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#ccc" stop-opacity=".35"/>
<stop offset="100%" stop-color="#444" stop-opacity="0"/>
</radialGradient>
<linearGradient id="tailGrad" x1="0%" y1="0%" x2="100%" y2="60%">
<stop offset="0%" stop-color="#efd19f"/>
<stop offset="100%" stop-color="#a77b3b"/>
</linearGradient>
<!-- Fish patterns -->
<pattern id="fishScale1" width="7" height="7" patternUnits="userSpaceOnUse">
<circle cx="3.5" cy="3.5" r="2" fill="#fff" opacity="0.2"/>
</pattern>
<pattern id="fishScale2" width="6" height="6" patternUnits="userSpaceOnUse">
<ellipse cx="3" cy="3" rx="2" ry="2" fill="#fff" opacity="0.13"/>
</pattern>
<pattern id="fishScale3" width="8" height="7" patternUnits="userSpaceOnUse">
<ellipse cx="4" cy="3.5" rx="3" ry="2" fill="#fff" opacity="0.1"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#bgGradient)"/>
<!-- Unicycle Shadow -->
<ellipse cx="150" cy="265" rx="47" ry="12" fill="url(#shadowGrad)"/>
<!-- Unicycle Wheel -->
<g>
<circle cx="150" cy="240" r="30" fill="url(#unicycleWheel)" stroke="#434343" stroke-width="5"/>
<!-- Spokes -->
<g stroke="#cecece" stroke-width="2" stroke-linecap="round">
<line x1="150" y1="240" x2="180" y2="240"/>
<line x1="150" y1="240" x2="120" y2="240"/>
<line x1="150" y1="240" x2="150" y2="210"/>
<line x1="150" y1="240" x2="150" y2="270"/>
<line x1="150" y1="240" x2="129" y2="221"/>
<line x1="150" y1="240" x2="171" y2="221"/>
<line x1="150" y1="240" x2="129" y2="259"/>
<line x1="150" y1="240" x2="171" y2="259"/>
</g>
<!-- Wheel hub -->
<circle cx="150" cy="240" r="7" fill="#7f8c8d" stroke="#b2babb" stroke-width="3"/>
</g>
<!-- Unicycle fork -->
<rect x="144" y="180" width="12" height="52" rx="5" fill="#bfc9ca" stroke="#909497" stroke-width="2"/>
<rect x="147" y="180" width="6" height="45" rx="2" fill="#626567"/>
<!-- Pedals -->
<g>
<rect x="136" y="262" width="12" height="5" rx="2.5" fill="#626567" stroke="#464646" stroke-width="1.2"/>
<rect x="152" y="262" width="12" height="5" rx="2.5" fill="#626567" stroke="#464646" stroke-width="1.2"/>
</g>
<!-- Seat Post & Seat -->
<rect x="147" y="153" width="6" height="27" rx="2.5" fill="#626567"/>
<ellipse cx="150" cy="155" rx="21" ry="9" fill="url(#seatGrad)" stroke="#6c3483" stroke-width="2"/>
<!-- Cat Tail -->
<path d="M 168 198 Q 230 190 175 245 Q 230 240 195 220 Q 210 215 188 206"
fill="none" stroke="url(#tailGrad)" stroke-width="8" stroke-linecap="round"/>
<!-- Cat Body -->
<ellipse cx="150" cy="190" rx="37" ry="48" fill="url(#catFur)" stroke="#8d6e41" stroke-width="3"/>
<!-- Cat Chest -->
<ellipse cx="150" cy="218" rx="17" ry="19" fill="#fdebd0" opacity=".87"/>
<!-- Cat Head -->
<ellipse cx="150" cy="133" rx="30" ry="29" fill="url(#catFur)" stroke="#8d6e41" stroke-width="3"/>
<!-- Cat Cheeks -->
<ellipse cx="139" cy="145" rx="7" ry="8" fill="#fdebd0"/>
<ellipse cx="161" cy="145" rx="7" ry="8" fill="#fdebd0"/>
<!-- Cat Ears -->
<g>
<polygon points="169,121 192,108 180,135" fill="url(#catFur)" stroke="#8d6e41" stroke-width="3"/>
<polygon points="131,121 108,108 120,135" fill="url(#catFur)" stroke="#8d6e41" stroke-width="3"/>
<polygon points="129,118 112,110 121,129" fill="#ffd9b3" opacity="0.66"/>
<polygon points="171,118 188,110 179,129" fill="#ffd9b3" opacity="0.66"/>
</g>
<!-- Cat Eyes -->
<ellipse cx="140" cy="133" rx="5.2" ry="7.8" fill="url(#eyeGrad)"/>
<ellipse cx="160" cy="133" rx="5.2" ry="7.8" fill="url(#eyeGrad)"/>
<ellipse cx="140" cy="137" rx="2.4" ry="4.2" fill="#222"/>
<ellipse cx="160" cy="137" rx="2.4" ry="4.2" fill="#222"/>
<ellipse cx="141.7" cy="132" rx="1.1" ry="1.5" fill="#fff" opacity="0.85"/>
<ellipse cx="161.7" cy="132" rx="1.11" ry="1.3" fill="#fff" opacity="0.7"/>
<!-- Cat Nose -->
<ellipse cx="150" cy="146" rx="2.2" ry="1.2" fill="#c0392b"/>
<!-- Cat Smile -->
<path d="M144 150 Q150 156 156 150" stroke="#935116" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<!-- Cat Whiskers -->
<g stroke="#8d6e41" stroke-width="1.1" stroke-linecap="round">
<line x1="127" y1="148" x2="140" y2="148"/>
<line x1="127" y1="152" x2="140" y2="149"/>
<line x1="127" y1="143" x2="140" y2="147"/>
<line x1="173" y1="148" x2="159" y2="148"/>
<line x1="173" y1="152" x2="159" y2="149"/>
<line x1="173" y1="143" x2="159" y2="147"/>
</g>
<!-- Cat Arms/Paws -->
<g>
<!-- Left Arm -->
<path d="M124 163 Q110 172 130 196" fill="none" stroke="url(#catPawGrad)" stroke-width="15" stroke-linecap="round"/>
<!-- Left Paw -->
<ellipse cx="133" cy="199" rx="11" ry="8" fill="url(#catPawGrad)" stroke="#e59866" stroke-width="1.5"/>
<!-- Paw Toes -->
<ellipse cx="130" cy="205" rx="2" ry="1.3" fill="#d7b490"/>
<ellipse cx="134" cy="206" rx="2" ry="1.2" fill="#d7b490"/>
<ellipse cx="138" cy="204" rx="1.7" ry="1.1" fill="#d7b490"/>
<!-- Right Arm -->
<path d="M176 163 Q190 172 170 202" fill="none" stroke="url(#catPawGrad)" stroke-width="15" stroke-linecap="round"/>
<!-- Right Paw -->
<ellipse cx="167" cy="203" rx="11" ry="8" fill="url(#catPawGrad)" stroke="#e59866" stroke-width="1.5"/>
<!-- Paw Toes -->
<ellipse cx="164" cy="208" rx="2" ry="1.3" fill="#d7b490"/>
<ellipse cx="168" cy="210" rx="2" ry="1.2" fill="#d7b490"/>
<ellipse cx="172" cy="208" rx="1.7" ry="1.1" fill="#d7b490"/>
</g>
<!-- Cat Legs (down to pedals) -->
<g>
<path d="M137 234 Q134 260 146 260" fill="none" stroke="url(#catPawGrad)" stroke-width="15" stroke-linecap="round"/>
<ellipse cx="146" cy="262" rx="7" ry="4" fill="url(#catPawGrad)" stroke="#e59866" stroke-width="1"/>
<ellipse cx="143" cy="263" rx="1.6" ry="1.2" fill="#d7b490"/>
<ellipse cx="146" cy="266" rx="1.3" ry="1" fill="#d7b490"/>
<path d="M163 234 Q166 260 154 260" fill="none" stroke="url(#catPawGrad)" stroke-width="15" stroke-linecap="round"/>
<ellipse cx="154" cy="262" rx="7" ry="4" fill="url(#catPawGrad)" stroke="#e59866" stroke-width="1"/>
<ellipse cx="151" cy="263" rx="1.6" ry="1.2" fill="#d7b490"/>
<ellipse cx="154" cy="266" rx="1.3" ry="1" fill="#d7b490"/>
</g>
<!-- Juggling Fish (animated poses) -->
<g>
<!-- Orbit paths (transparent, for visual motion metaphor) -->
<ellipse cx="150" cy="128" rx="46" ry="18" fill="none" stroke="#2d6da8" stroke-width="2" opacity="0.16"/>
<ellipse cx="150" cy="120" rx="57" ry="24" fill="none" stroke="#254466" stroke-width="2" opacity="0.07"/>
<!-- FISH 1 - top left (blue) -->
<g>
<ellipse cx="104" cy="116" rx="18" ry="8" fill="url(#fishBody0)"/>
<ellipse cx="104" cy="116" rx="18" ry="8" fill="url(#fishScale1)"/>
<polygon points="85,116 96,110 96,122" fill="#227093"/>
<ellipse cx="120" cy="117" rx="2.5" ry="1.3" fill="#5988b1"/>
<circle cx="117.8" cy="113.5" r="1.5" fill="#fff"/>
<ellipse cx="115" cy="116" rx="1.8" ry="2.1" fill="#3a4254"/>
<ellipse cx="115.7" cy="115.3" rx="0.8" ry="1.1" fill="#fff" opacity="0.8"/>
<ellipse cx="93" cy="114" rx="2" ry="4.2" fill="#227093" opacity="0.6"/>
<!-- Fish mouth -->
<path d="M86.7 116 Q84.7 118 87.4 117.3" stroke="#111" stroke-width="0.9" fill="none"/>
</g>
<!-- FISH 2 - top right (yellow-orange) -->
<g>
<ellipse cx="196" cy="116" rx="18" ry="8" fill="url(#fishBody1)"/>
<ellipse cx="196" cy="116" rx="18" ry="8" fill="url(#fishScale2)"/>
<polygon points="215,116 204,110 204,122" fill="#e17055"/>
<ellipse cx="180" cy="117" rx="2.5" ry="1.3" fill="#f7b731"/>
<circle cx="183.2" cy="113.6" r="1.5" fill="#fff"/>
<ellipse cx="186" cy="116" rx="1.8" ry="2.1" fill="#3a4254"/>
<ellipse cx="186.6" cy="115.2" rx="0.8" ry="1.1" fill="#fff" opacity="0.8"/>
<ellipse cx="207" cy="114" rx="2" ry="4.2" fill="#e17055" opacity="0.6"/>
<!-- Fish mouth -->
<path d="M214 116 Q216 118 213.3 117.3" stroke="#a05d2d" stroke-width="0.9" fill="none"/>
</g>
<!-- FISH 3 - bottom (silver) -->
<g>
<ellipse cx="150" cy="155" rx="18" ry="8" fill="url(#fishBody2)"/>
<ellipse cx="150" cy="155" rx="18" ry="8" fill="url(#fishScale3)"/>
<polygon points="132,155 143,149 143,161" fill="#a4b0be"/>
<ellipse cx="166" cy="156" rx="2.5" ry="1.3" fill="#ced6e0"/>
<circle cx="162.8" cy="151.6" r="1.5" fill="#fff"/>
<ellipse cx="160" cy="155" rx="1.8" ry="2.1" fill="#2d3436"/>
<ellipse cx="160.8" cy="153.1" rx="0.8" ry="1.1" fill="#fff" opacity="0.8"/>
<ellipse cx="140" cy="153" rx="2" ry="4.2" fill="#a4b0be" opacity="0.6"/>
<!-- Fish mouth -->
<path d="M132 155 Q130.5 157 133.2 156" stroke="#7f8c8d" stroke-width="0.9" fill="none"/>
</g>
</g>
<!-- Juggling motion lines -->
<g>
<path d="M110 109 Q123 96 145 105" stroke="#195076" stroke-width="2.5" fill="none" opacity="0.36" stroke-dasharray="6 4"/>
<path d="M190 109 Q177 96 155 105" stroke="#d67702" stroke-width="2.5" fill="none" opacity="0.36" stroke-dasharray="6 4"/>
<path d="M140 164 Q130 177 133 199" stroke="#7a8591" stroke-width="2.5" fill="none" opacity="0.36" stroke-dasharray="6 4"/>
<path d="M160 164 Q170 177 167 202" stroke="#7a8591" stroke-width="2.5" fill="none" opacity="0.36" stroke-dasharray="6 4"/>
</g>
<!-- Surprise sparkles around the topmost fish -->
<g>
<polygon points="95,103 96,109 98,103 99,109 101,103 100,110 105,108 100,111 107,111 101,114 109,113 104,115 110,118 104,117 107,122 101,119 103,125 98,119 98,124 94,115" fill="#ffe66d" opacity="0.65"/>
<polygon points="194,103 196,107 198,103 199,108 201,103 200,109 205,108 200,111 207,111 201,114 209,113 204,115 210,117 204,117 207,122 201,119 203,125 198,119 198,124 194,115" fill="#fddb80" opacity="0.49"/>
</g>
</svg>
Judge's Analysis
Player 2's submission demonstrates superior creativity, technical execution, and adherence to the prompt.
The cat is clearly identifiable, and the juggling fish are detailed and dynamic.
In contrast, Player 1's submission is simpler and less refined, with a less recognizable depiction of the cat and weaker visual appeal 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
"An octopus juggling flaming swords under the moonlight."
"An astronaut planting a flag on a slice of floating watermelon in space."