Creative Challenge
"Three-eyed cat juggling planets in a void"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Background gradient for the void -->
<radialGradient id="voidGradient" cx="50%" cy="50%" r="75%">
<stop offset="0%" stop-color="#0d0d1a"/>
<stop offset="100%" stop-color="#000"/>
</radialGradient>
<!-- Cat fur gradient -->
<linearGradient id="catFur" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffdd99"/>
<stop offset="100%" stop-color="#ffbb77"/>
</linearGradient>
<!-- Planet gradients -->
<radialGradient id="planet1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#1e90ff"/>
<stop offset="100%" stop-color="#001f3f"/>
</radialGradient>
<radialGradient id="planet2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff4136"/>
<stop offset="100%" stop-color="#85144b"/>
</radialGradient>
<radialGradient id="planet3" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#2ecc40"/>
<stop offset="100%" stop-color="#006400"/>
</radialGradient>
<!-- Cat eye glow -->
<radialGradient id="eyeGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffff80"/>
<stop offset="100%" stop-color="#ffcc00"/>
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#voidGradient)" />
<!-- Planets being juggled -->
<g id="planets">
<circle cx="90" cy="80" r="15" fill="url(#planet1)" stroke="#fff" stroke-width="1" />
<circle cx="160" cy="50" r="20" fill="url(#planet2)" stroke="#fff" stroke-width="1" />
<circle cx="220" cy="90" r="12" fill="url(#planet3)" stroke="#fff" stroke-width="1" />
</g>
<!-- Throwing arcs (juggling paths) -->
<path d="M90,80 C100,40 150,40 160,50" fill="none" stroke="#fff" stroke-width="1" stroke-dasharray="3,3"/>
<path d="M160,50 C175,20 210,20 220,90" fill="none" stroke="#fff" stroke-width="1" stroke-dasharray="3,3"/>
<path d="M220,90 C215,130 160,140 90,80" fill="none" stroke="#fff" stroke-width="1" stroke-dasharray="3,3"/>
<!-- The three-eyed cat -->
<g id="cat">
<!-- Cat body -->
<ellipse cx="150" cy="210" rx="50" ry="30" fill="url(#catFur)" stroke="#663300" stroke-width="2"/>
<!-- Cat head -->
<circle cx="150" cy="160" r="30" fill="url(#catFur)" stroke="#663300" stroke-width="2"/>
<!-- Ears -->
<polygon points="135,140 150,120 165,140" fill="url(#catFur)" stroke="#663300" stroke-width="2"/>
<polygon points="165,140 180,120 195,140" fill="url(#catFur)" stroke="#663300" stroke-width="2"/>
<!-- Eyes -->
<!-- Left eye -->
<circle cx="140" cy="155" r="4" fill="#fff" />
<circle cx="140" cy="155" r="2" fill="url(#eyeGlow)" />
<!-- Right eye -->
<circle cx="160" cy="155" r="4" fill="#fff" />
<circle cx="160" cy="155" r="2" fill="url(#eyeGlow)" />
<!-- Third (central) eye -->
<circle cx="150" cy="148" r="3" fill="#fff" />
<circle cx="150" cy="148" r="1.5" fill="url(#eyeGlow)" />
<!-- Nose -->
<polygon points="150,160 145,165 155,165" fill="#ff9999" />
<!-- Whiskers -->
<path d="M135,163 L110,160" stroke="#fff" stroke-width="1" />
<path d="M135,168 L110,170" stroke="#fff" stroke-width="1" />
<path d="M165,163 L190,160" stroke="#fff" stroke-width="1" />
<path d="M165,168 L190,170" stroke="#fff" stroke-width="1" />
<!-- Mouth -->
<path d="M145,172 Q150,175 155,172" stroke="#ff9999" stroke-width="1" fill="none" />
<!-- Extra cat flourish: Tail -->
<path d="M200,210 C220,190 240,220 220,230" stroke="url(#catFur)" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.7" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background Gradient -->
<defs>
<radialGradient id="voidGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(24,24,48);stop-opacity:1" />
</radialGradient>
<radialGradient id="planetGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,163,26);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,97,188);stop-opacity:1" />
</radialGradient>
<linearGradient id="catGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(163,216,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100,120,255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#voidGradient)" />
<!-- Cat Body -->
<ellipse cx="150" cy="200" rx="60" ry="40" fill="url(#catGradient)" />
<!-- Cat Head -->
<circle cx="150" cy="130" r="50" fill="url(#catGradient)" />
<!-- Cat Ears -->
<polygon points="120,100 140,60 160,100" fill="url(#catGradient)" />
<polygon points="180,100 160,60 140,100" fill="url(#catGradient)" />
<!-- Cat Eyes -->
<ellipse cx="130" cy="125" rx="10" ry="5" fill="white" />
<ellipse cx="150" cy="115" rx="10" ry="5" fill="white" />
<ellipse cx="170" cy="125" rx="10" ry="5" fill="white" />
<!-- Cat Pupils -->
<circle cx="130" cy="125" r="3" fill="black" />
<circle cx="150" cy="115" r="3" fill="black" />
<circle cx="170" cy="125" r="3" fill="black" />
<!-- Cat Mouth -->
<path d="M140,140 Q150,150 160,140" stroke="black" stroke-width="2" fill="none" />
<!-- Planets -->
<circle cx="80" cy="80" r="15" fill="url(#planetGradient)" />
<circle cx="225" cy="60" r="20" fill="url(#planetGradient)" />
<circle cx="200" cy="220" r="18" fill="url(#planetGradient)" />
<!-- Juggling Motion Lines -->
<path d="M80,80 Q140,40 225,60" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" fill="none" stroke-dasharray="5,5" />
<path d="M225,60 Q250,150 200,220" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" fill="none" stroke-dasharray="5,5" />
<path d="M200,220 Q120,200 80,80" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" fill="none" stroke-dasharray="5,5" />
</svg>Judge's Analysis
Player 2's submission is more visually appealing due to its cohesive color scheme and smoother gradients, which give the image a more polished look.
The three-eyed cat design is creative, and the juggling planets are well-integrated into the composition.
Additionally, the expression and posture of the cat add character, enhancing the overall creativity and adherence to the prompt.
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
"Giraffe in a UFO knitting a rainbow scarf"
"Sky-high jellyfish floating above a busy cityscape"
"A clock face made of melting candles"
"A giraffe with a fishbowl head, swimming in a jellybean sea"
"Giraffe on roller skates juggling flaming pizzas under a disco ball"
"Flying teapot pouring stars onto a sleeping city"
