Creative Challenge
"Cat balancing on a unicycle across a tightrope over a canyon at sunset."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF9A9E"/>
<stop offset="50%" stop-color="#FAD0C4"/>
<stop offset="100%" stop-color="#FDCB80"/>
</linearGradient>
<radialGradient id="sunGrad" cx="0.5" cy="0.7" r="0.2">
<stop offset="0%" stop-color="#FFD54F"/>
<stop offset="100%" stop-color="#FF8A65" stop-opacity="0"/>
</radialGradient>
<linearGradient id="canyonGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8D4F2A"/>
<stop offset="100%" stop-color="#42210B"/>
</linearGradient>
<pattern id="rockPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0,5 L5,10 M5,0 L10,5" stroke="#6B3F1A" stroke-width="1"/>
</pattern>
</defs>
<!-- Sky and Sun -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<circle cx="200" cy="220" r="60" fill="url(#sunGrad)"/>
<!-- Canyon -->
<path d="M0,200 Q80,180 150,220 T300,200 L300,300 L0,300 Z" fill="url(#canyonGrad)" opacity="0.9"/>
<path d="M0,210 Q80,190 150,230 T300,210 L300,300 L0,300 Z" fill="url(#rockPattern)" opacity="0.4"/>
<!-- Tightrope -->
<line x1="10" y1="140" x2="290" y2="140" stroke="#333" stroke-width="2"/>
<!-- Unicycle -->
<g id="unicycle" transform="translate(150,140) scale(0.8)">
<!-- Wheel -->
<circle cx="0" cy="0" r="20" fill="#222" stroke="#555" stroke-width="3"/>
<circle cx="0" cy="0" r="5" fill="#999"/>
<!-- Frame -->
<path d="M0,-20 L0,-40 L5,-45 M0,-40 L-5,-45" stroke="#555" stroke-width="2" fill="none"/>
<!-- Pedals -->
<line x1="0" y1="20" x2="7" y2="30" stroke="#444" stroke-width="3"/>
<line x1="0" y1="20" x2="-7" y2="30" stroke="#444" stroke-width="3"/>
</g>
<!-- Cat -->
<g id="cat" transform="translate(150,100) scale(0.6)">
<!-- Body -->
<ellipse cx="0" cy="-10" rx="15" ry="8" fill="#333"/>
<!-- Head -->
<circle cx="0" cy="-25" r="8" fill="#333"/>
<!-- Ears -->
<polygon points="-6,-32 -2,-42 2,-32" fill="#333"/>
<polygon points="6,-32 2,-42 -2,-32" fill="#333"/>
<!-- Tail -->
<path d="M-15,-5 C-30,0 -30,20 -10,25" stroke="#333" stroke-width="4" fill="none"/>
<!-- Legs -->
<path d="M-5,-2 L-8,10" stroke="#333" stroke-width="4" stroke-linecap="round"/>
<path d="M5,-2 L8,10" stroke="#333" stroke-width="4" stroke-linecap="round"/>
<!-- Arms balancing -->
<line x1="-10" y1="-18" x2="-20,-28" stroke="#333" stroke-width="4" stroke-linecap="round"/>
<line x1="10" y1="-18" x2="20,-28" stroke="#333" stroke-width="4" stroke-linecap="round"/>
<!-- Eyes -->
<circle cx="-3" cy="-27" r="1.5" fill="#FFF"/>
<circle cx="3" cy="-27" r="1.5" fill="#FFF"/>
</g>
<!-- Shadow under unicycle -->
<ellipse cx="150" cy="158" rx="20" ry="4" fill="rgba(0,0,0,0.3)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for gradients and patterns -->
<defs>
<!-- Sunset gradient -->
<linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a2a3a" /> <!-- Deeper blue at top -->
<stop offset="20%" stop-color="#2c3e50" /> <!-- Dark blue -->
<stop offset="40%" stop-color="#4a54b1" /> <!-- Blue purple -->
<stop offset="60%" stop-color="#e74c3c" /> <!-- Red -->
<stop offset="80%" stop-color="#f39c12" /> <!-- Orange -->
<stop offset="100%" stop-color="#f1c40f" /> <!-- Yellow at horizon -->
</linearGradient>
<!-- Sun gradient -->
<radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="20%" stop-color="#ffdd00" />
<stop offset="100%" stop-color="#ff8800" />
</radialGradient>
<!-- Sun glow -->
<radialGradient id="sunGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ff8800" stop-opacity="0.5" />
<stop offset="100%" stop-color="#ff8800" stop-opacity="0" />
</radialGradient>
<!-- Canyon left side gradient -->
<linearGradient id="canyonLeftGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#4e342e" />
<stop offset="60%" stop-color="#6d4c41" />
<stop offset="100%" stop-color="#8d6e63" />
</linearGradient>
<!-- Canyon right side gradient -->
<linearGradient id="canyonRightGradient" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#3e2723" />
<stop offset="60%" stop-color="#5d4037" />
<stop offset="100%" stop-color="#795548" />
</linearGradient>
<!-- Cat gradient -->
<linearGradient id="catGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#424242" />
<stop offset="100%" stop-color="#212121" />
</linearGradient>
<!-- Canyon rock texture pattern -->
<pattern id="rockPattern" patternUnits="userSpaceOnUse" width="20" height="20">
<path d="M0,10 Q5,7 10,10 T20,10" fill="none" stroke="#5d4037" stroke-width="0.5" />
<path d="M0,5 Q5,2 10,5 T20,5" fill="none" stroke="#5d4037" stroke-width="0.5" />
<path d="M0,15 Q5,12 10,15 T20,15" fill="none" stroke="#5d4037" stroke-width="0.5" />
<path d="M5,0 Q8,5 5,10 T5,20" fill="none" stroke="#5d4037" stroke-width="0.5" />
<path d="M15,0 Q18,5 15,10 T15,20" fill="none" stroke="#5d4037" stroke-width="0.5" />
</pattern>
<!-- Distant mountains pattern -->
<pattern id="mountainPattern" patternUnits="userSpaceOnUse" width="30" height="10">
<path d="M0,10 L10,0 L15,5 L20,0 L30,10" fill="#3e2723" opacity="0.3" />
</pattern>
<!-- Cloud filter -->
<filter id="cloudFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" />
</filter>
<!-- Rope texture -->
<pattern id="ropePattern" patternUnits="userSpaceOnUse" width="4" height="2">
<line x1="0" y1="1" x2="4" y2="1" stroke="#b7950b" stroke-width="0.5" />
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#sunsetGradient)" />
<!-- Stars in the darkening sky -->
<g opacity="0.7">
<circle cx="30" cy="30" r="0.8" fill="white" />
<circle cx="70" cy="20" r="0.6" fill="white" />
<circle cx="120" cy="15" r="0.7" fill="white" />
<circle cx="180" cy="25" r="0.5" fill="white" />
<circle cx="220" cy="40" r="0.7" fill="white" />
<circle cx="270" cy="15" r="0.8" fill="white" />
<circle cx="290" cy="35" r="0.6" fill="white" />
<circle cx="50" cy="45" r="0.5" fill="white" />
<circle cx="150" cy="40" r="0.6" fill="white" />
<circle cx="200" cy="10" r="0.7" fill="white" />
</g>
<!-- Distant mountains -->
<path d="M0,180 L40,160 L60,170 L100,150 L130,165 L170,145 L200,160 L230,140 L260,155 L300,130 L300,180 Z" fill="#3e2723" opacity="0.6" />
<path d="M0,180 L40,160 L60,170 L100,150 L130,165 L170,145 L200,160 L230,140 L260,155 L300,130 L300,180 Z" fill="url(#mountainPattern)" />
<!-- Sun and glow -->
<circle cx="230" cy="80" r="40" fill="url(#sunGlow)" />
<circle cx="230" cy="80" r="30" fill="url(#sunGradient)" />
<!-- Clouds -->
<g opacity="0.8">
<circle cx="50" cy="60" r="20" fill="white" filter="url(#cloudFilter)" />
<circle cx="70" cy="55" r="15" fill="white" filter="url(#cloudFilter)" />
<circle cx="90" cy="65" r="18" fill="white" filter="url(#cloudFilter)" />
</g>
<g opacity="0.6">
<circle cx="260" cy="40" r="15" fill="white" filter="url(#cloudFilter)" />
<circle cx="280" cy="45" r="12" fill="white" filter="url(#cloudFilter)" />
</g>
<g opacity="0.7">
<circle cx="150" cy="50" r="10" fill="white" filter="url(#cloudFilter)" />
<circle cx="165" cy="45" r="8" fill="white" filter="url(#cloudFilter)" />
<circle cx="140" cy="48" r="7" fill="white" filter="url(#cloudFilter)" />
</g>
<!-- Birds in distance -->
<path d="M40,100 Q45,95 50,100 Q55,95 60,100" fill="none" stroke="black" stroke-width="1" opacity="0.7" />
<path d="M180,70 Q185,65 190,70 Q195,65 200,70" fill="none" stroke="black" stroke-width="1" opacity="0.7" />
<path d="M120,90 Q125,85 130,90 Q135,85 140,90" fill="none" stroke="black" stroke-width="1" opacity="0.7" />
<path d="M70,110 Q75,105 80,110 Q85,105 90,110" fill="none" stroke="black" stroke-width="1" opacity="0.7" />
<!-- Canyon - Left side -->
<path d="M0,140 Q40,130 50,170 Q60,200 80,180 Q100,160 120,190 L120,300 L0,300 Z" fill="url(#canyonLeftGradient)" />
<path d="M0,140 Q40,130 50,170 Q60,200 80,180 Q100,160 120,190 L120,300 L0,300 Z" fill="url(#rockPattern)" fill-opacity="0.3" />
<!-- Left canyon details -->
<path d="M30,180 L40,178 L50,182 L60,180" fill="none" stroke="#5d4037" stroke-width="0.7" opacity="0.8" />
<path d="M70,190 L80,188 L90,191" fill="none" stroke="#5d4037" stroke-width="0.7" opacity="0.8" />
<path d="M20,220 L30,218 L40,222 L50,219" fill="none" stroke="#5d4037" stroke-width="0.7" opacity="0.8" />
<ellipse cx="60" cy="230" rx="10" ry="4" fill="#3e2723" opacity="0.4" />
<!-- Some vegetation on left cliff -->
<g transform="translate(85,170) scale(0.8)">
<path d="M0,0 Q5,-10 10,0 T20,0" fill="#2e7d32" opacity="0.7" />
<path d="M3,0 Q8,-7 13,0" fill="#1b5e20" opacity="0.7" />
</g>
<g transform="translate(40,200) scale(0.6)">
<path d="M0,0 Q5,-10 10,0 T20,0" fill="#2e7d32" opacity="0.7" />
<path d="M3,0 Q8,-7 13,0" fill="#1b5e20" opacity="0.7" />
</g>
<!-- Canyon - Right side -->
<path d="M300,150 Q270,140 260,160 Q240,190 220,170 Q200,150 180,180 L180,300 L300,300 Z" fill="url(#canyonRightGradient)" />
<path d="M300,150 Q270,140 260,160 Q240,190 220,170 Q200,150 180,180 L180,300 L300,300 Z" fill="url(#rockPattern)" fill-opacity="0.3" />
<!-- Right canyon details -->
<path d="M230,180 L240,178 L250,182 L260,179" fill="none" stroke="#5d4037" stroke-width="0.7" opacity="0.8" />
<path d="M270,200 L280,198 L290,201" fill="none" stroke="#5d4037" stroke-width="0.7" opacity="0.8" />
<path d="M220,220 L230,218 L240,222 L250,219" fill="none" stroke="#5d4037" stroke-width="0.7" opacity="0.8" />
<ellipse cx="260" cy="230" rx="10" ry="4" fill="#3e2723" opacity="0.4" />
<!-- Some vegetation on right cliff -->
<g transform="translate(195,170) scale(0.8)">
<path d="M0,0 Q5,-10 10,0 T20,0" fill="#2e7d32" opacity="0.7" />
<path d="M3,0 Q8,-7 13,0" fill="#1b5e20" opacity="0.7" />
</g>
<g transform="translate(240,200) scale(0.6)">
<path d="M0,0 Q5,-10 10,0 T20,0" fill="#2e7d32" opacity="0.7" />
<path d="M3,0 Q8,-7 13,0" fill="#1b5e20" opacity="0.7" />
</g>
<!-- Canyon floor with river -->
<path d="M120,300 L180,300 L180,280 C170,275 160,285 150,280 C140,275 130,285 120,280 Z" fill="#1565c0" opacity="0.7" />
<path d="M130,290 Q140,285 150,290 Q160,285 170,290" fill="none" stroke="white" stroke-width="0.5" opacity="0.5" />
<path d="M125,285 Q135,283 145,287 Q155,283 175,286" fill="none" stroke="white" stroke-width="0.3" opacity="0.5" />
<!-- Tightrope -->
<line x1="120" y1="190" x2="180" y2="180" stroke="#d4ac0d" stroke-width="1.5" />
<line x1="120" y1="190" x2="180" y2="180" stroke="url(#ropePattern)" stroke-width="1.5" stroke-dasharray="0.5,0.5" />
<!-- Rope tension lines -->
<path d="M120,190 Q150,186 180,180" fill="none" stroke="#b7950b" stroke-width="0.3" opacity="0.7" />
<!-- Tiny shadow on the rope -->
<ellipse cx="150" cy="185" rx="3" ry="1" fill="black" opacity="0.3" />
<!-- Unicycle -->
<line x1="150" y1="165" x2="150" y2="183" stroke="#333" stroke-width="2" /> <!-- Post -->
<circle cx="150" cy="186" r="5" fill="none" stroke="#d32f2f" stroke-width="2" /> <!-- Wheel -->
<!-- Spokes -->
<line x1="150" y1="186" x2="150" y2="181" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="150" y2="191" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="145" y2="186" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="155" y2="186" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="147" y2="189" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="153" y2="183" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="147" y2="183" stroke="#333" stroke-width="0.7" />
<line x1="150" y1="186" x2="153" y2="189" stroke="#333" stroke-width="0.7" />
<circle cx="150" cy="186" r="1" fill="#333" /> <!-- Hub -->
<rect x="147" y="165" width="6" height="1" fill="#8d6e63" rx="0.5" /> <!-- Seat -->
<!-- Pedals -->
<line x1="150" y1="186" x2="145" y2="182" stroke="#5d4037" stroke-width="1" />
<circle cx="144" cy="181" r="1" fill="#8d6e63" />
<!-- Cat - Balancing Pole -->
<line x1="130" y1="145" x2="170" y2="145" stroke="#8d6e63" stroke-width="1.5" />
<!-- Cat - Body and Head -->
<ellipse cx="150" cy="150" rx="15" ry="12" fill="url(#catGradient)" /> <!-- Body -->
<circle cx="150" cy="135" r="10" fill="url(#catGradient)" /> <!-- Head -->
<!-- Cat - Ears -->
<polygon points="143,128 146,120 151,127" fill="url(#catGradient)" /> <!-- Left ear -->
<polygon points="157,128 154,120 149,127" fill="url(#catGradient)" /> <!-- Right ear -->
<polygon points="144,127 146,122 150,127" fill="#ffccbc" opacity="0.7" /> <!-- Left inner ear -->
<polygon points="156,127 154,122 150,127" fill="#ffccbc" opacity="0.7" /> <!-- Right inner ear -->
<!-- Cat - Face -->
<circle cx="147" cy="133" r="1.5" fill="white" /> <!-- Left eye -->
<circle cx="153" cy="133" r="1.5" fill="white" /> <!-- Right eye -->
<circle cx="147" cy="132.5" r="0.7" fill="black" /> <!-- Left pupil - looking down slightly at rope -->
<circle cx="153" cy="132.5" r="0.7" fill="black" /> <!-- Right pupil - looking down slightly at rope -->
<ellipse cx="150" cy="136" rx="1" ry="0.5" fill="#ffaaaa" /> <!-- Nose -->
<path d="M148,138 Q150,138.5 152,138" fill="none" stroke="black" stroke-width="0.5" /> <!-- Mouth - slight tension -->
<path d="M146,136 Q142,135 141,133" fill="none" stroke="white" stroke-width="0.5" /> <!-- Left whisker 1 -->
<path d="M146,137 Q142,137 141,138" fill="none" stroke="white" stroke-width="0.5" /> <!-- Left whisker 2 -->
<path d="M154,136 Q158,135 159,133" fill="none" stroke="white" stroke-width="0.5" /> <!-- Right whisker 1 -->
<path d="M154,137 Q158,137 159,138" fill="none" stroke="white" stroke-width="0.5" /> <!-- Right whisker 2 -->
<!-- Cat - Tail for balance -->
<path d="M165,150 Q180,145 172,130 T175,115" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" />
<!-- Cat - Limbs -->
<path d="M140,155 L135,165" fill="none" stroke="#333" stroke-width="2" /> <!-- Left front leg -->
<path d="M160,155 L165,165" fill="none" stroke="#333" stroke-width="2" /> <!-- Right front leg -->
<!-- Cat - Balancing hands -->
<path d="M137,145 L130,145" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" /> <!-- Left arm -->
<path d="M163,145 L170,145" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" /> <!-- Right arm -->
<!-- Cat - Concentrated expression lines -->
<path d="M143,130 L145,131" fill="none" stroke="#333" stroke-width="0.5" /> <!-- Left brow -->
<path d="M157,130 L155,131" fill="none" stroke="#333" stroke-width="0.5" /> <!-- Right brow -->
<!-- Sweat drop showing effort -->
<path d="M140,131 Q138,134 140,136" fill="none" stroke="#87CEFA" stroke-width="0.7" />
<circle cx="140" cy="131" r="0.7" fill="#87CEFA" />
<!-- Tiny motion lines suggesting slight wobble -->
<path d="M134,155 Q135,156 134,158" stroke="#333" stroke-width="0.3" fill="none" />
<path d="M166,155 Q165,156 166,158" stroke="#333" stroke-width="0.3" fill="none" />
<!-- Tiny paw pads -->
<circle cx="135" cy="165" r="1" fill="#ffccbc" opacity="0.7" />
<circle cx="165" cy="165" r="1" fill="#ffccbc" opacity="0.7" />
<!-- Wind effect -->
<path d="M180,130 Q190,132 195,130 Q200,128 205,130" stroke="white" stroke-width="0.3" fill="none" opacity="0.4" />
<path d="M185,140 Q195,142 200,140 Q205,138 210,140" stroke="white" stroke-width="0.3" fill="none" opacity="0.4" />
<path d="M175,150 Q185,152 190,150 Q195,148 200,150" stroke="white" stroke-width="0.3" fill="none" opacity="0.4" />
</svg>
Judge's Analysis
Player 2's submission demonstrates greater creativity and adherence to the prompt, with the detailed depiction of the canyon, sunset, and unicycle.
The vibrant colors, environmental elements like clouds and birds, and the dynamic background enhance the visual appeal and technical quality.
Player 1's image, while clean and minimalist, lacks the same level of detail and storytelling to fully capture the idea.
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
"A levitating teacup pouring rainbow tea into a cloud-shaped saucer."
"A cactus wearing sunglasses, holding a balloon, in the middle of a desert."
"A flying toaster chasing a bagel through a rainbow."
"A giraffe wearing a polka-dot spacesuit floating in zero gravity."