Creative Challenge
"A cactus wearing sunglasses, holding a balloon, standing in the middle of a desert."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87CEEB" />
<stop offset="100%" stop-color="#FFDEAD" />
</linearGradient>
<!-- Sand gradient for desert ground -->
<linearGradient id="sandGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#F4A460" />
<stop offset="100%" stop-color="#DEB887" />
</linearGradient>
<!-- Cactus gradient -->
<linearGradient id="cactusGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2E8B57" />
<stop offset="100%" stop-color="#98FB98" />
</linearGradient>
<!-- Balloon gradient -->
<radialGradient id="balloonGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFB6C1" />
<stop offset="100%" stop-color="#FF69B4" />
</radialGradient>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Sun in the upper left corner -->
<circle cx="50" cy="50" r="30" fill="yellow" opacity="0.8" />
<!-- Desert ground with a wavy dune -->
<path d="M0,220 Q75,200 150,220 T300,220 L300,300 L0,300 Z" fill="url(#sandGradient)" />
<!-- Cactus composed of ellipses -->
<g id="cactus">
<!-- Main trunk -->
<ellipse cx="150" cy="200" rx="20" ry="30" fill="url(#cactusGradient)" />
<!-- Left arm -->
<ellipse cx="130" cy="180" rx="15" ry="20" fill="url(#cactusGradient)" />
<!-- Right arm -->
<ellipse cx="170" cy="180" rx="15" ry="20" fill="url(#cactusGradient)" />
<!-- Cactus spines (decorative details) -->
<circle cx="150" cy="210" r="1" fill="#8B4513" />
<circle cx="145" cy="205" r="1" fill="#8B4513" />
<circle cx="155" cy="205" r="1" fill="#8B4513" />
<circle cx="148" cy="195" r="1" fill="#8B4513" />
<circle cx="152" cy="195" r="1" fill="#8B4513" />
</g>
<!-- Sunglasses on the cactus -->
<g id="sunglasses">
<!-- Left lens -->
<rect x="138" y="185" width="12" height="8" rx="2" fill="#000" />
<!-- Right lens -->
<rect x="150" y="185" width="12" height="8" rx="2" fill="#000" />
<!-- Bridge between lenses -->
<rect x="149" y="187" width="2" height="2" fill="#000" />
<!-- Reflections on lenses -->
<ellipse cx="143" cy="187" rx="1.5" ry="1" fill="white" opacity="0.6" />
<ellipse cx="155" cy="187" rx="1.5" ry="1" fill="white" opacity="0.6" />
</g>
<!-- Balloon held by the cactus (attached to the right arm) -->
<g id="balloon">
<!-- String connecting cactus to balloon -->
<path d="M185,180 C190,170 200,150 210,130" stroke="#555" stroke-width="1" fill="none" />
<!-- Balloon body -->
<circle cx="210" cy="130" r="12" fill="url(#balloonGradient)" stroke="#C71585" stroke-width="1" />
<!-- Highlight on the balloon -->
<circle cx="214" cy="126" r="2" fill="white" opacity="0.7" />
</g>
<!-- Shadow under the cactus -->
<ellipse cx="150" cy="230" rx="25" ry="5" fill="black" opacity="0.2" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="50%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />
</linearGradient>
<radialGradient id="sunGradient" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
<stop offset="0%" style="stop-color:#FFFACD;stop-opacity:1" />
<stop offset="60%" style="stop-color:#FFEB3B;stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#FFD700;stop-opacity:0.3" />
</radialGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(15)">
<stop offset="0%" style="stop-color:#388E3C;" />
<stop offset="50%" style="stop-color:#4CAF50;" />
<stop offset="100%" style="stop-color:#66BB6A;" />
</linearGradient>
<radialGradient id="balloonGradient" cx="0.35" cy="0.35" r="0.5" fx="0.3" fy="0.3">
<stop offset="0%" style="stop-color:#FF5252;" />
<stop offset="100%" style="stop-color:#D32F2F;" />
</radialGradient>
<pattern id="sandTexture" patternUnits="userSpaceOnUse" width="6" height="6">
<circle cx="1" cy="2" r="0.3" fill="rgba(0,0,0,0.08)"/>
<circle cx="4" cy="5" r="0.3" fill="rgba(0,0,0,0.08)"/>
</pattern>
</defs>
<!-- Background -->
<g id="background">
<rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)" />
<circle cx="240" cy="80" r="35" fill="url(#sunGradient)" opacity="0.95" />
</g>
<!-- Desert Floor -->
<g id="desertFloor">
<path d="M0,300 L0,190 Q80,160 150,180 Q220,200 300,170 L300,300 Z" fill="#D2B48C" />
<path d="M0,300 L0,190 Q80,160 150,180 Q220,200 300,170 L300,300 Z" fill="url(#sandTexture)" />
<path d="M0,300 L0,210 Q100,180 180,220 Q250,250 300,200 L300,300 Z" fill="#E6BF8F" opacity="0.9"/>
<path d="M0,300 L0,210 Q100,180 180,220 Q250,250 300,200 L300,300 Z" fill="url(#sandTexture)" opacity="0.9"/>
<path d="M0,300 L0,240 Q120,210 200,250 Q270,280 300,230 L300,300 Z" fill="#F5DEB3" />
<path d="M0,300 L0,240 Q120,210 200,250 Q270,280 300,230 L300,300 Z" fill="url(#sandTexture)" />
</g>
<!-- Shadows -->
<g id="shadows">
<ellipse cx="165" cy="250" rx="18" ry="5" fill="rgba(0,0,0,0.12)" transform="rotate(-15 165 250)"/> <!-- Balloon Shadow -->
<ellipse cx="135" cy="263" rx="35" ry="8" fill="rgba(0,0,0,0.15)" transform="rotate(-15 135 263)"/> <!-- Cactus Shadow -->
</g>
<!-- Small Rocks -->
<g id="rocks">
<path d="M60,282 q5,-5 10,0 q5,5 0,8 q-5,3 -10,-2 q-5,-6 0,-6 Z" fill="#B0A090" stroke="#8C7868" stroke-width="0.5"/>
<path d="M230,275 q4,-4 8,0 q4,4 0,6 q-4,2 -8,-1 q-4,-4 0,-5 Z" fill="#C0B0A0" stroke="#9C8878" stroke-width="0.5"/>
</g>
<!-- Cactus Character -->
<g id="cactusCharacter">
<path id="cactusTrunk" d="M145,260 C140,200 138,145 150,125 C162,145 160,200 155,260 Z" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="1.5"/>
<path id="cactusArmLeft" d="M146,195 C120,190 105,165 115,145 Q123,130 133,138 Q138,158 144,180 Z" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="1.5"/>
<path id="cactusArmRight" d="M154,185 C180,180 195,155 185,130 Q177,120 167,130 Q162,150 156,170 Z" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="1.5"/>
<!-- Cactus Ribs -->
<path d="M150,127 V258 M145,140 C143,180 144,220 146,258 M155,140 C157,180 156,220 154,258" stroke="#2E7D32" stroke-width="0.8" fill="none" opacity="0.7"/>
<path d="M118,145 Q125,160 130,180" stroke="#2E7D32" stroke-width="0.8" fill="none" opacity="0.7"/>
<path d="M182,133 Q175,150 170,170" stroke="#2E7D32" stroke-width="0.8" fill="none" opacity="0.7"/>
<!-- Cactus Flower -->
<g id="cactusFlower" transform="translate(150, 123)">
<ellipse cx="0" cy="-2.5" rx="2" ry="3" fill="#F48FB1" transform="rotate(0 0 0)"/>
<ellipse cx="0" cy="-2.5" rx="2" ry="3" fill="#F48FB1" transform="rotate(72 0 0)"/>
<ellipse cx="0" cy="-2.5" rx="2" ry="3" fill="#F48FB1" transform="rotate(144 0 0)"/>
<ellipse cx="0" cy="-2.5" rx="2" ry="3" fill="#F48FB1" transform="rotate(216 0 0)"/>
<ellipse cx="0" cy="-2.5" rx="2" ry="3" fill="#F48FB1" transform="rotate(288 0 0)"/>
<circle cx="0" cy="0" r="2" fill="#FFEB3B" stroke="#FBC02D" stroke-width="0.5"/>
</g>
</g>
<!-- Sunglasses -->
<g id="sunglasses" transform="translate(0, 2)">
<path d="M133,142 a10,8 0 1,0 20,0 a10,8 0 1,0 -20,0 Z M147,142 a10,8 0 1,0 20,0 a10,8 0 1,0 -20,0 Z" fill="#212121"/> <!-- Frames -->
<rect x="148" y="139.5" width="4" height="3" fill="#212121" rx="1"/> <!-- Bridge -->
<ellipse cx="143" cy="142" rx="8" ry="6" fill="#101010"/> <!-- Lens 1 -->
<ellipse cx="157" cy="142" rx="8" ry="6" fill="#101010"/> <!-- Lens 2 -->
<ellipse cx="140" cy="139.5" rx="2.5" ry="1.5" fill="rgba(224,224,224,0.5)" transform="rotate(-20 140 139.5)"/> <!-- Glint 1 -->
<ellipse cx="154" cy="139.5" rx="2.5" ry="1.5" fill="rgba(224,224,224,0.5)" transform="rotate(-20 154 139.5)"/> <!-- Glint 2 -->
</g>
<!-- Balloon -->
<g id="balloon">
<path d="M185,131.5 C186,125 190,118 190,115" stroke="#757575" stroke-width="1.5" fill="none"/> <!-- String -->
<ellipse cx="190" cy="85" rx="22" ry="30" fill="url(#balloonGradient)" stroke="#B71C1C" stroke-width="0.7"/>
<path d="M190,115 l-2.5,3.5 q0,2.5 2.5,2.5 q2.5,0 2.5,-2.5 l-2.5,-3.5 Z" fill="#D32F2F" stroke="#B71C1C" stroke-width="0.5"/> <!-- Knot -->
<path d="M180,72 Q188,68 196,78 Q193,85 182,82 Z" fill="rgba(255,255,255,0.4)"/> <!-- Highlight -->
</g>
</svg>Judge's Analysis
Player 2's image demonstrates a stronger adherence to the prompt with a more detailed, lifelike depiction of a cactus wearing sunglasses and holding a balloon in a desert setting.
The composition is visually richer, with better shading, textures, and depth, creating a more appealing and technically refined scene.
Player 1's submission, while creative, is simpler and less detailed, lacking the same level of visual interest and realism seen in Player 2's work.
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 snail racing a rocket to the finish line under a starry sky."
"Alien watering a garden of glowing, geometric plants under two crescent moons."
"Surreal snail with a city skyline spiraled into its shell."
