Creative Challenge
"Cactus wearing sunglasses and a sombrero in a desert sunset"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Desert Sky Gradient -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FF5E62"/>
<stop offset="50%" stop-color="#FF9966"/>
<stop offset="100%" stop-color="#FFCC33"/>
</linearGradient>
<linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e6b96a"/>
<stop offset="100%" stop-color="#8B4513"/>
</linearGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3c8d50"/>
<stop offset="100%" stop-color="#1e5631"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="sombreroPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0,0 L10,0 L10,10 L0,10 Z" fill="#F9D423"/>
<path d="M0,0 L5,5 L10,0 M0,10 L5,5 L10,10" stroke="#D38312" stroke-width="1" fill="none"/>
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)"/>
<rect x="0" y="200" width="300" height="100" fill="url(#groundGradient)"/>
<!-- Sun -->
<circle cx="50" cy="50" r="30" fill="#FF4500" filter="url(#shadow)">
<animate attributeName="opacity" values="0.8;1;0.8" dur="5s" repeatCount="indefinite"/>
</circle>
<!-- Distant Mountains -->
<path d="M0,200 L60,160 L100,190 L150,150 L200,180 L250,145 L300,175 L300,200 Z" fill="#634d41" opacity="0.7"/>
<path d="M0,200 L30,170 L70,185 L120,160 L170,190 L220,155 L270,185 L300,165 L300,200 Z" fill="#483b31" opacity="0.5"/>
<!-- Cacti in the background -->
<path d="M30,200 L30,170 L25,170 L25,185 L20,185 L20,170 L30,170 L30,160 L40,160 L40,170 L45,170 L45,185 L40,185 L40,170 L30,170 Z" fill="#2d623d" opacity="0.7"/>
<path d="M260,200 L260,165 L255,165 L255,180 L250,180 L250,165 L260,165 L260,155 L270,155 L270,165 L275,165 L275,180 L270,180 L270,165 L260,165 Z" fill="#2d623d" opacity="0.7"/>
<!-- Main Cactus Body -->
<path d="M150,200 L150,120 C150,115 150,110 145,105 C140,100 130,100 125,105 C120,110 120,115 120,120 L120,150 L110,150 L110,130 C110,125 110,120 105,115 C100,110 90,110 85,115 C80,120 80,125 80,130 L80,200 Z" fill="url(#cactusGradient)" filter="url(#shadow)"/>
<path d="M150,200 L150,120 C150,115 150,110 155,105 C160,100 170,100 175,105 C180,110 180,115 180,120 L180,150 L190,150 L190,130 C190,125 190,120 195,115 C200,110 210,110 215,115 C220,120 220,125 220,130 L220,200 Z" fill="url(#cactusGradient)" filter="url(#shadow)"/>
<!-- Cactus Face -->
<ellipse cx="150" cy="110" rx="25" ry="30" fill="url(#cactusGradient)"/>
<!-- Cactus Arms -->
<path d="M110,170 L95,160 C90,155 85,155 80,160 C75,165 75,170 80,175 L95,180 Z" fill="url(#cactusGradient)"/>
<path d="M190,170 L205,160 C210,155 215,155 220,160 C225,165 225,170 220,175 L205,180 Z" fill="url(#cactusGradient)"/>
<!-- Cactus Details -->
<path d="M130,140 L125,140 M130,160 L125,160 M175,140 L170,140 M175,160 L170,160" stroke="#1e5631" stroke-width="2"/>
<path d="M90,160 L95,160 M90,180 L95,180 M205,160 L210,160 M205,180 L210,180" stroke="#1e5631" stroke-width="2"/>
<!-- Sombrero -->
<ellipse cx="150" cy="80" rx="70" ry="15" fill="#D38312"/>
<ellipse cx="150" cy="80" rx="50" ry="10" fill="url(#sombreroPattern)"/>
<ellipse cx="150" cy="75" rx="25" ry="10" fill="#D38312"/>
<!-- Sunglasses -->
<path d="M130,110 L110,105 Q105,105 108,110 L115,115 Q125,120 135,115 L140,110 Z" fill="#000" opacity="0.9"/>
<path d="M170,110 L190,105 Q195,105 192,110 L185,115 Q175,120 165,115 L160,110 Z" fill="#000" opacity="0.9"/>
<path d="M140,110 L160,110" stroke="#000" stroke-width="3"/>
<!-- Reflection on sunglasses -->
<path d="M120,107 L125,109" stroke="#fff" stroke-width="2" opacity="0.7"/>
<path d="M180,107 L175,109" stroke="#fff" stroke-width="2" opacity="0.7"/>
<!-- Small prickles on cactus -->
<g fill="#ffff99" opacity="0.8">
<circle cx="130" cy="130" r="1"/>
<circle cx="140" cy="150" r="1"/>
<circle cx="120" cy="170" r="1"/>
<circle cx="100" cy="160" r="1"/>
<circle cx="170" cy="130" r="1"/>
<circle cx="160" cy="150" r="1"/>
<circle cx="180" cy="170" r="1"/>
<circle cx="200" cy="160" r="1"/>
</g>
<!-- Decorative elements on the sombrero -->
<g fill="#E74C3C">
<circle cx="120" cy="80" r="3"/>
<circle cx="140" cy="80" r="3"/>
<circle cx="160" cy="80" r="3"/>
<circle cx="180" cy="80" r="3"/>
</g>
<!-- Desert Floor Details -->
<path d="M20,200 L40,210 L60,195 L80,205 L100,200 L120,210 L140,205 L160,195 L180,210 L200,200 L220,205 L240,195 L260,205 L280,200 L300,210" stroke="#a67c52" stroke-width="1" fill="none"/>
<!-- Small cactus -->
<path d="M230,200 L230,190 L225,190 L225,195 L220,195 L220,185 L230,185 L230,180 L240,180 L240,185 L245,185 L245,195 L240,195 L240,190 L235,190 L235,200 Z" fill="#2d623d"/>
<!-- Tumbleweeds -->
<circle cx="50" cy="210" r="10" fill="none" stroke="#a67c52" stroke-width="1" opacity="0.6"/>
<circle cx="260" cy="210" r="15" fill="none" stroke="#a67c52" stroke-width="1" opacity="0.6"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF5E5B; stop-opacity:1" />
<stop offset="50%" style="stop-color:#FFA41B; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFD700; stop-opacity:1" />
</linearGradient>
<pattern id="cactusPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="3" fill="#018749" opacity="0.7" />
</pattern>
<linearGradient id="hatGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF5733; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFC300; stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#sunsetGradient)" />
<circle cx="220" cy="80" r="40" fill="#FFDD44" />
<ellipse cx="150" cy="220" rx="130" ry="80" fill="#FFC857" opacity="0.5" />
<path d="M130,150 C120,100 180,100 170,150 Z" fill="#A9CB60" />
<ellipse cx="150" cy="190" rx="40" ry="70" fill="url(#cactusPattern)" stroke="#016637" stroke-width="6" />
<ellipse cx="125" cy="160" rx="10" ry="25" fill="url(#cactusPattern)" stroke="#016637" stroke-width="4" />
<ellipse cx="175" cy="160" rx="10" ry="25" fill="url(#cactusPattern)" stroke="#016637" stroke-width="4" />
<rect x="130" y="180" width="40" height="10" fill="#504D4D" />
<rect x="127" y="175" width="46" height="10" fill="#000" />
<path d="M120,130 L180,130 Q150,80 120,130 Z" fill="url(#hatGradient)" stroke="#7D4427" stroke-width="2" />
<path d="M100,130 Q150,40 200,130" fill="none" stroke="#7D4427" stroke-width="8" />
<path d="M115,130 Q150,50 185,130" fill="none" stroke="#FF5733" stroke-width="3" />
<path d="M130,130 Q150,60 170,130" fill="none" stroke="#FFC300" stroke-width="3" />
</svg>Judge's Analysis
Player 1's image more effectively captures the theme with a clear depiction of a cactus wearing sunglasses and a sombrero, set against a desert sunset.
The composition includes details like the desert landscape and mountains, enhancing the adherence to the prompt.
Player 2's image, while creative, lacks clarity in representing the cactus and sombrero, making it less visually appealing and coherent in relation 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
"A tree with roots as legs dancing in a grassy meadow"
"Astronaut disco dancing with a robot on the moon"
"An ice cream cone floating in space with rings like Saturn"
"An octopus playing a grand piano in a moonlit ocean concert"
"Surreal fruit sailing a sea of chocolate milk under a checkerboard sky"
"Flying cat playing chess with a tiny, animated raincloud"
