Creative Challenge
"A cat in a tuxedo riding a giant snail over a rainbow"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: red;stop-opacity:1" />
<stop offset="14.28%" style="stop-color: orange;stop-opacity:1" />
<stop offset="28.57%" style="stop-color: yellow;stop-opacity:1" />
<stop offset="42.86%" style="stop-color: green;stop-opacity:1" />
<stop offset="57.14%" style="stop-color: blue;stop-opacity:1" />
<stop offset="71.43%" style="stop-color: indigo;stop-opacity:1" />
<stop offset="85.71%" style="stop-color: violet;stop-opacity:1" />
<stop offset="100%" style="stop-color: purple;stop-opacity:1" />
</linearGradient>
<linearGradient id="tuxGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000000;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M100 200 Q150 250 200 200 T300 100" stroke="url(#rainbow)" stroke-width="10" fill="none"/>
<g transform="translate(150, 175)">
<ellipse cx="0" cy="0" rx="30" ry="15" fill="#8B4513"/>
<ellipse cx="20" cy="10" rx="20" ry="5" fill="#8B4513"/>
<ellipse cx="20" cy="-10" rx="20" ry="5" fill="#8B4513"/>
<path d="M20 0 Q30 20 40 0" fill="#8B4513"/>
<circle cx="0" cy="0" r="10" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="5" fill="#000000"/>
</g>
<g transform="translate(150, 180)">
<rect x="-20" y="0" width="40" height="10" fill="url(#tuxGradient)"/>
<rect x="-10" y="10" width="20" height="15" fill="#FFFFFF"/>
<rect x="-20" y="25" width="40" height="10" fill="#000000"/>
</g>
<g transform="translate(150, 220)">
<path d="M-20 0 Q0 20 20 0" stroke="#000000" stroke-width="2" fill="#FFFFFF"/>
<path d="M-20 0 Q-10 10 0 0" stroke="#000000" stroke-width="2" fill="none"/>
<path d="M20 0 Q10 10 0 0" stroke="#000000" stroke-width="2" fill="none"/>
</g>
<g transform="translate(150, 200)">
<circle cx="0" cy="0" r="5" fill="#000000"/>
<circle cx="15" cy="0" r="5" fill="#000000"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Gradient Definitions -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#87CEEB" />
<stop offset="100%" stop-color="#E0F7FF" />
</linearGradient>
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="16.7%" stop-color="#FF7F00" />
<stop offset="33.3%" stop-color="#FFFF00" />
<stop offset="50%" stop-color="#00FF00" />
<stop offset="66.7%" stop-color="#0000FF" />
<stop offset="83.3%" stop-color="#4B0082" />
<stop offset="100%" stop-color="#8B00FF" />
</linearGradient>
<linearGradient id="snailBodyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#D2B48C" />
<stop offset="100%" stop-color="#8B4513" />
</linearGradient>
<linearGradient id="shellGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#A0522D" />
<stop offset="50%" stop-color="#CD853F" />
<stop offset="100%" stop-color="#8B4513" />
</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="shellPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,10 Q5,0 10,10 Q15,20 20,10" fill="none" stroke="#8B4513" stroke-width="1" />
<path d="M0,0 Q5,10 10,0 Q15,-10 20,0" fill="none" stroke="#A0522D" stroke-width="1" />
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<circle cx="50" cy="50" r="15" fill="#FFFF99" filter="url(#glow)" />
<!-- Clouds -->
<g fill="white" opacity="0.8">
<ellipse cx="70" cy="40" rx="25" ry="15" />
<ellipse cx="50" cy="40" rx="20" ry="10" />
<ellipse cx="85" cy="45" rx="15" ry="10" />
<ellipse cx="230" cy="30" rx="25" ry="15" />
<ellipse cx="210" cy="35" rx="20" ry="10" />
<ellipse cx="245" cy="25" rx="18" ry="12" />
</g>
<!-- Rainbow -->
<path d="M-50,280 Q150,120 350,280" stroke="url(#rainbowGradient)" stroke-width="15" fill="none" stroke-linecap="round" />
<path d="M-50,290 Q150,130 350,290" stroke="url(#rainbowGradient)" stroke-width="15" fill="none" stroke-linecap="round" opacity="0.6" />
<!-- Snail Body -->
<path d="M80,200 Q90,190 110,195 Q150,205 170,190" fill="url(#snailBodyGradient)" stroke="#5D4037" stroke-width="1" />
<path d="M170,190 Q180,185 190,190 Q210,200 215,190" fill="#D2B48C" stroke="#5D4037" stroke-width="1" />
<!-- Snail Eyes -->
<line x1="215" y1="190" x2="225" y2="170" stroke="#5D4037" stroke-width="2" />
<line x1="210" y1="188" x2="215" y2="165" stroke="#5D4037" stroke-width="2" />
<circle cx="225" cy="170" r="4" fill="black" />
<circle cx="215" cy="165" r="4" fill="black" />
<circle cx="226" cy="169" r="1" fill="white" />
<circle cx="216" cy="164" r="1" fill="white" />
<!-- Snail Shell -->
<path d="M80,200 Q65,175 75,150 Q95,115 130,110 Q170,110 180,150 Q175,185 135,195 Q110,200 80,200 Z" fill="url(#shellGradient)" stroke="#5D4037" stroke-width="2" />
<path d="M130,110 Q150,120 155,145 Q155,170 130,175 Q105,170 105,145 Q110,120 130,110 Z" fill="url(#shellPattern)" stroke="#8B4513" stroke-width="1" />
<path d="M130,125 Q140,130 142,145 Q140,160 130,160 Q120,155 120,145 Q122,130 130,125 Z" fill="#8B4513" stroke="#5D4037" stroke-width="1" />
<!-- Cat in Tuxedo -->
<!-- Cat Body -->
<ellipse cx="140" cy="145" rx="25" ry="20" fill="black" />
<!-- Tuxedo/White Chest -->
<path d="M130,135 Q140,160 150,135 L145,160 L135,160 Z" fill="white" />
<ellipse cx="140" cy="135" rx="3" ry="2" fill="white" />
<!-- Cat Head -->
<circle cx="140" cy="125" r="15" fill="black" />
<!-- Cat Ears -->
<polygon points="130,115 125,105 135,110" fill="black" stroke="#333" stroke-width="0.5" />
<polygon points="150,115 155,105 145,110" fill="black" stroke="#333" stroke-width="0.5" />
<!-- Cat Face -->
<ellipse cx="133" cy="122" rx="2" ry="3" fill="#FFD700" />
<ellipse cx="147" cy="122" rx="2" ry="3" fill="#FFD700" />
<circle cx="133" cy="122" r="1" fill="black" />
<circle cx="147" cy="122" r="1" fill="black" />
<path d="M137,126 Q140,129 143,126" stroke="white" stroke-width="1" fill="none" />
<path d="M137,130 L142,130" stroke="pink" stroke-width="1" fill="none" />
<!-- Cat Whiskers -->
<line x1="138" y1="127" x2="128" y2="125" stroke="white" stroke-width="0.7" />
<line x1="138" y1="128" x2="128" y2="128" stroke="white" stroke-width="0.7" />
<line x1="138" y1="129" x2="128" y2="131" stroke="white" stroke-width="0.7" />
<line x1="142" y1="127" x2="152" y2="125" stroke="white" stroke-width="0.7" />
<line x1="142" y1="128" x2="152" y2="128" stroke="white" stroke-width="0.7" />
<line x1="142" y1="129" x2="152" y2="131" stroke="white" stroke-width="0.7" />
<!-- Bow Tie -->
<path d="M140,135 L135,132 L135,138 Z" fill="red" />
<path d="M140,135 L145,132 L145,138 Z" fill="red" />
<circle cx="140" cy="135" r="2" fill="white" />
<!-- Cat Paws (holding reins) -->
<path d="M120,150 Q115,145 118,142" stroke="#333" stroke-width="1.5" fill="none" />
<circle cx="118" cy="142" r="3" fill="white" stroke="#333" stroke-width="0.5" />
<path d="M160,150 Q165,145 162,142" stroke="#333" stroke-width="1.5" fill="none" />
<circle cx="162" cy="142" r="3" fill="white" stroke="#333" stroke-width="0.5" />
<!-- Reins -->
<path d="M118,142 Q130,130 175,175" stroke="#8B4513" stroke-width="1" fill="none" />
<path d="M162,142 Q155,130 210,170" stroke="#8B4513" stroke-width="1" fill="none" />
<!-- Cat Tail -->
<path d="M115,155 Q100,140 110,125" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" />
<!-- Sparkles around the rainbow -->
<g fill="white" filter="url(#glow)">
<circle cx="80" cy="230" r="2" />
<circle cx="120" cy="220" r="1.5" />
<circle cx="160" cy="230" r="2" />
<circle cx="200" cy="220" r="1.5" />
<circle cx="240" cy="230" r="2" />
</g>
</svg>Judge's Analysis
Player 2's submission fully embraces the concept with a clear depiction of a cat in a tuxedo riding a giant snail over a rainbow.
The illustration is vibrant, detailed, and visually appealing, capturing the whimsy of the prompt.
Player 1's submission, while creative, lacks detail and clarity, making it hard to discern the elements specified in 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
"Penguin in a bathtub wearing a monocle and top hat"
"Sailing cow on a lake made of lavender lemonade"
"Levitating teacup pouring stars into an open book"
"A cat playing a violin on a floating lily pad"
"A clock tower made of melting candy under a starry night sky"
"Rainbow octopus knitting a cosmic scarf"
