Creative Challenge
"A cactus wearing a royal crown and sunglasses in the desert at sunset."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for reusable elements -->
<defs>
<!-- Sky gradient (sunset) -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0c1445" />
<stop offset="30%" stop-color="#2c3e7e" />
<stop offset="50%" stop-color="#723e7e" />
<stop offset="70%" stop-color="#e75a7c" />
<stop offset="85%" stop-color="#ff9b6a" />
<stop offset="100%" stop-color="#ffd66b" />
</linearGradient>
<!-- Sand gradient -->
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e8b923" />
<stop offset="100%" stop-color="#c87137" />
</linearGradient>
<!-- Cactus gradient -->
<linearGradient id="cactusGradient" x1="30%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0e6e1e" />
<stop offset="50%" stop-color="#2e9a40" />
<stop offset="100%" stop-color="#0e6e1e" />
</linearGradient>
<!-- Shaded cactus gradient -->
<linearGradient id="cactusShadeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#074911" />
<stop offset="100%" stop-color="#0e6e1e" />
</linearGradient>
<!-- Crown gradient -->
<linearGradient id="crownGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffd700" />
<stop offset="50%" stop-color="#ffcc00" />
<stop offset="100%" stop-color="#ffaa00" />
</linearGradient>
<!-- Sunglasses gradient -->
<linearGradient id="glassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#000000" />
<stop offset="50%" stop-color="#333333" />
<stop offset="100%" stop-color="#000000" />
</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="#ffffa0" />
<stop offset="100%" stop-color="#ff7e00" />
</radialGradient>
<!-- Jewel gradient - Ruby -->
<radialGradient id="rubyGradient" cx="30%" cy="30%" r="70%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ff5252" />
<stop offset="50%" stop-color="#d32f2f" />
<stop offset="100%" stop-color="#b71c1c" />
</radialGradient>
<!-- Jewel gradient - Sapphire -->
<radialGradient id="sapphireGradient" cx="30%" cy="30%" r="70%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#448aff" />
<stop offset="50%" stop-color="#2962ff" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<!-- Jewel gradient - Emerald -->
<radialGradient id="emeraldGradient" cx="30%" cy="30%" r="70%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#69f0ae" />
<stop offset="50%" stop-color="#00c853" />
<stop offset="100%" stop-color="#1b5e20" />
</radialGradient>
<!-- Star filter -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Sun rays filter -->
<filter id="sunRays" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g filter="url(#starGlow)">
<circle cx="30" cy="30" r="1" fill="white" />
<circle cx="60" cy="20" r="1.2" fill="white" />
<circle cx="90" cy="40" r="0.8" fill="white" />
<circle cx="120" cy="15" r="1" fill="white" />
<circle cx="150" cy="25" r="0.9" fill="white" />
<circle cx="180" cy="35" r="1.1" fill="white" />
<circle cx="210" cy="20" r="0.7" fill="white" />
<circle cx="40" cy="50" r="1.3" fill="white" />
<circle cx="70" cy="60" r="0.9" fill="white" />
<circle cx="25" cy="80" r="1" fill="white" />
<circle cx="240" cy="40" r="1.2" fill="white" />
<circle cx="270" cy="30" r="0.8" fill="white" />
</g>
<!-- Sun -->
<circle cx="250" cy="80" r="25" fill="url(#sunGradient)" filter="url(#sunRays)" />
<!-- Sun rays -->
<g opacity="0.7" stroke="#ff9b6a" stroke-width="1.5">
<line x1="250" y1="45" x2="250" y2="35" />
<line x1="250" y1="125" x2="250" y2="115" />
<line x1="215" y1="80" x2="205" y2="80" />
<line x1="295" y1="80" x2="285" y2="80" />
<line x1="225" y1="55" x2="215" y2="45" />
<line x1="285" y1="115" x2="275" y2="105" />
<line x1="225" y1="105" x2="215" y2="115" />
<line x1="285" y1="45" x2="275" y2="55" />
</g>
<!-- Distant mountains -->
<path d="M0,150 L30,130 L60,145 L90,125 L120,140 L150,120 L180,145 L210,130 L240,150 L270,125 L300,150 L300,200 L0,200 Z" fill="#5d4037" opacity="0.6" />
<!-- Sand dunes -->
<path d="M0,200 C50,180 100,190 150,170 C200,150 250,180 300,170 L300,300 L0,300 Z" fill="url(#sandGradient)" />
<!-- Small cactus 1 -->
<path d="M40,250 L40,210 C40,205 45,205 45,210 L45,220 C45,215 50,215 50,220 L50,250 Z" fill="#0e6e1e" />
<!-- Small cactus 2 -->
<path d="M260,260 L260,220 C260,215 255,215 255,220 L255,230 C255,225 250,225 250,230 L250,260 Z" fill="#0e6e1e" />
<!-- Rock 1 -->
<ellipse cx="70" cy="270" rx="15" ry="8" fill="#7d6b53" />
<!-- Rock 2 -->
<ellipse cx="220" cy="280" rx="20" ry="10" fill="#7d6b53" />
<!-- Tumbleweed -->
<g transform="translate(90, 265) rotate(15)">
<circle cx="0" cy="0" r="8" fill="none" stroke="#b39169" stroke-width="1" />
<circle cx="0" cy="0" r="6" fill="none" stroke="#b39169" stroke-width="0.8" />
<circle cx="0" cy="0" r="4" fill="none" stroke="#b39169" stroke-width="0.6" />
<line x1="-8" y1="0" x2="8" y2="0" stroke="#b39169" stroke-width="0.7" />
<line x1="0" y1="-8" x2="0" y2="8" stroke="#b39169" stroke-width="0.7" />
<line x1="-6" y1="-6" x2="6" y2="6" stroke="#b39169" stroke-width="0.7" />
<line x1="-6" y1="6" x2="6" y2="-6" stroke="#b39169" stroke-width="0.7" />
</g>
<!-- Tumbleweed 2 -->
<g transform="translate(230, 255) rotate(-10)">
<circle cx="0" cy="0" r="6" fill="none" stroke="#b39169" stroke-width="1" />
<circle cx="0" cy="0" r="4" fill="none" stroke="#b39169" stroke-width="0.8" />
<line x1="-6" y1="0" x2="6" y2="0" stroke="#b39169" stroke-width="0.7" />
<line x1="0" y1="-6" x2="0" y2="6" stroke="#b39169" stroke-width="0.7" />
<line x1="-4" y1="-4" x2="4" y2="4" stroke="#b39169" stroke-width="0.7" />
<line x1="-4" y1="4" x2="4" y2="-4" stroke="#b39169" stroke-width="0.7" />
</g>
<!-- Main cactus shadow -->
<ellipse cx="150" cy="280" rx="40" ry="5" fill="#000000" opacity="0.3" />
<!-- Main cactus body -->
<path d="M150,280 L130,280 C120,280 120,270 120,260 L120,180 C120,170 110,170 110,180 L110,220 C110,230 100,230 100,220 L100,210 C100,160 130,150 150,150 C170,150 200,160 200,210 L200,220 C200,230 190,230 190,220 L190,180 C190,170 180,170 180,180 L180,260 C180,270 180,280 170,280 Z" fill="url(#cactusGradient)" />
<!-- Cactus shading -->
<path d="M150,280 L130,280 C120,280 120,270 120,260 L120,180 C120,170 110,170 110,180 L110,220 C110,230 100,230 100,220 L100,210 C100,160 130,150 150,150 L150,280 Z" fill="url(#cactusShadeGradient)" opacity="0.3" />
<!-- Crown base -->
<path d="M125,150 L135,125 L150,110 L165,125 L175,150 L125,150 Z" fill="url(#crownGradient)" stroke="#b8860b" stroke-width="1" />
<!-- Crown details -->
<path d="M130,150 L135,135 L150,125 L165,135 L170,150 L130,150 Z" fill="#ffcc00" stroke="#b8860b" stroke-width="0.5" />
<circle cx="150" cy="118" r="5" fill="url(#sapphireGradient)" stroke="#b8860b" stroke-width="0.5" />
<path d="M125,150 L135,135 M135,125 L150,110 M150,125 L165,125 M165,135 L175,150" stroke="#b8860b" stroke-width="0.5" fill="none" />
<!-- Crown jewels -->
<circle cx="135" cy="130" r="3" fill="url(#rubyGradient)" stroke="#b8860b" stroke-width="0.5" />
<circle cx="165" cy="130" r="3" fill="url(#emeraldGradient)" stroke="#b8860b" stroke-width="0.5" />
<circle cx="150" cy="140" r="2" fill="url(#sapphireGradient)" stroke="#b8860b" stroke-width="0.5" />
<!-- Sunglasses frame -->
<path d="M125,190 L175,190 C179,190 182,188 182,184 C182,180 177,178 175,178 L125,178 C123,178 118,180 118,184 C118,188 121,190 125,190 Z" fill="#121212" />
<!-- Left temple (arm) -->
<path d="M118,184 L105,180" stroke="#121212" stroke-width="2" />
<!-- Right temple (arm) -->
<path d="M182,184 L195,180" stroke="#121212" stroke-width="2" />
<!-- Bridge -->
<rect x="145" y="178" width="10" height="4" fill="#121212" />
<!-- Left lens -->
<ellipse cx="135" cy="184" rx="10" ry="8" fill="url(#glassGradient)" />
<!-- Right lens -->
<ellipse cx="165" cy="184" rx="10" ry="8" fill="url(#glassGradient)" />
<!-- Lens reflections (light spots) -->
<ellipse cx="132" cy="181" rx="3" ry="2" fill="white" opacity="0.3" transform="rotate(-15, 132, 181)" />
<ellipse cx="162" cy="181" rx="3" ry="2" fill="white" opacity="0.3" transform="rotate(-15, 162, 181)" />
<!-- Cactus spines -->
<g stroke="#ffeb3b" stroke-width="0.5" opacity="0.8">
<!-- Right side spines -->
<line x1="180" y1="190" x2="185" y2="185" />
<line x1="180" y1="200" x2="186" y2="195" />
<line x1="180" y1="210" x2="186" y2="205" />
<line x1="180" y1="220" x2="186" y2="215" />
<line x1="180" y1="230" x2="186" y2="225" />
<line x1="180" y1="240" x2="186" y2="235" />
<line x1="180" y1="250" x2="186" y2="245" />
<line x1="180" y1="260" x2="185" y2="255" />
<line x1="180" y1="270" x2="185" y2="265" />
<!-- Left side spines -->
<line x1="120" y1="190" x2="115" y2="185" />
<line x1="120" y1="200" x2="114" y2="195" />
<line x1="120" y1="210" x2="114" y2="205" />
<line x1="120" y1="220" x2="114" y2="215" />
<line x1="120" y1="230" x2="114" y2="225" />
<line x1="120" y1="240" x2="114" y2="235" />
<line x1="120" y1="250" x2="114" y2="245" />
<line x1="120" y1="260" x2="115" y2="255" />
<line x1="120" y1="270" x2="115" y2="265" />
<!-- Left arm spines -->
<line x1="110" y1="180" x2="105" y2="175" />
<line x1="110" y1="190" x2="104" y2="185" />
<line x1="110" y1="200" x2="104" y2="195" />
<line x1="110" y1="210" x2="104" y2="205" />
<line x1="100" y1="210" x2="95" y2="205" />
<line x1="100" y1="215" x2="95" y2="210" />
<!-- Right arm spines -->
<line x1="190" y1="180" x2="195" y2="175" />
<line x1="190" y1="190" x2="196" y2="185" />
<line x1="190" y1="200" x2="196" y2="195" />
<line x1="190" y1="210" x2="196" y2="205" />
<line x1="200" y1="210" x2="205" y2="205" />
<line x1="200" y1="215" x2="205" y2="210" />
</g>
<!-- Facial features - "smile" -->
<path d="M140,205 Q150,215 160,205" fill="none" stroke="#065115" stroke-width="1.5" stroke-linecap="round" />
<!-- Desert dust/wind effect -->
<g opacity="0.3">
<path d="M10,240 Q30,235 20,245 Q40,240 30,250 Q50,245 40,255" fill="none" stroke="#e8b923" stroke-width="0.5" />
<path d="M190,240 Q210,235 200,245 Q220,240 210,250 Q230,245 220,255" fill="none" stroke="#e8b923" stroke-width="0.5" />
<path d="M50,260 Q70,255 60,265 Q80,260 70,270 Q90,265 80,275" fill="none" stroke="#e8b923" stroke-width="0.5" />
</g>
<!-- Cactus flower -->
<g transform="translate(110, 190) rotate(-15)">
<circle cx="0" cy="0" r="4" fill="#ff69b4" />
<circle cx="0" cy="0" r="2" fill="#ffff00" />
<path d="M0,-4 Q3,-8 0,-10 Q-3,-8 0,-4" fill="#ff69b4" />
<path d="M3,-3 Q8,-4 8,-8 Q5,-6 3,-3" fill="#ff69b4" />
<path d="M4,0 Q8,2 10,-2 Q6,-2 4,0" fill="#ff69b4" />
<path d="M3,3 Q6,6 10,4 Q6,2 3,3" fill="#ff69b4" />
<path d="M0,4 Q0,8 4,10 Q2,6 0,4" fill="#ff69b4" />
<path d="M-3,3 Q-6,6 -4,10 Q-2,6 -3,3" fill="#ff69b4" />
<path d="M-4,0 Q-10,0 -10,4 Q-6,2 -4,0" fill="#ff69b4" />
<path d="M-3,-3 Q-8,-4 -10,0 Q-6,-2 -3,-3" fill="#ff69b4" />
</g>
<!-- Sunset light reflections on glasses -->
<ellipse cx="132" cy="187" rx="4" ry="1.5" fill="#ff9b6a" opacity="0.2" transform="rotate(-15, 132, 187)" />
<ellipse cx="162" cy="187" rx="4" ry="1.5" fill="#ff9b6a" opacity="0.2" transform="rotate(-15, 162, 187)" />
<!-- Crown reflection of sunset -->
<path d="M130,145 L170,145 L170,150 L130,150 Z" fill="#ff9b6a" opacity="0.2" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Sky Gradient -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF7E5F"/>
<stop offset="100%" stop-color="#FEB47B"/>
</linearGradient>
<!-- Sunset Gradient -->
<radialGradient id="sunsetGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#FF6347"/>
</radialGradient>
<!-- Green gradient for cactus -->
<linearGradient id="cactusGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4CAF50"/>
<stop offset="100%" stop-color="#2E7D32"/>
</linearGradient>
<!-- Gold for crown -->
<linearGradient id="crownGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#FFA500"/>
</linearGradient>
</defs>
<!-- Background Sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Sunset Circle -->
<circle cx="150" cy="200" r="80" fill="url(#sunsetGradient)" opacity="0.8" />
<!-- Ground -->
<rect y="250" width="300" height="50" fill="#E0C097" />
<!-- Cactus -->
<g transform="translate(150,220)">
<!-- Main Body -->
<ellipse cx="0" cy="0" rx="20" ry="40" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="2"/>
<!-- Left Arm -->
<rect x="-30" y="-10" width="10" height="40" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="2" rx="2" ry="2"/>
<rect x="-35" y="10" width="10" height="20" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="2" rx="2" ry="2"/>
<!-- Right Arm -->
<rect x="20" y="-15" width="10" height="35" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="2" rx="2" ry="2"/>
<rect x="25" y="5" width="10" height="20" fill="url(#cactusGradient)" stroke="#2E7D32" stroke-width="2" rx="2" ry="2"/>
</g>
<!-- Sunglasses -->
<g transform="translate(150,210)">
<!-- Left lens -->
<ellipse cx="-10" cy="0" rx="8" ry="4" fill="#222" opacity="0.8"/>
<!-- Right lens -->
<ellipse cx="10" cy="0" rx="8" ry="4" fill="#222" opacity="0.8"/>
<!-- Bridge -->
<rect x="-2" y="-1" width="4" height="2" fill="#222"/>
<!-- Reflection in sunglasses -->
<circle cx="-10" cy="-1" r="2" fill="#ddd" opacity="0.3"/>
<circle cx="10" cy="-1" r="2" fill="#ddd" opacity="0.3"/>
</g>
<!-- Crown -->
<g transform="translate(150,170)">
<polygon points="0,-20 10,0 -10,0" fill="url(#crownGradient)" stroke="#B8860B" stroke-width="1"/>
<polygon points="0,-25 12,0 -12,0" fill="url(#crownGradient)" stroke="#B8860B" stroke-width="1"/>
<polygon points="0,-30 14,0 -14,0" fill="url(#crownGradient)" stroke="#B8860B" stroke-width="1"/>
<!-- Points of the crown -->
<circle cx="0" cy="-30" r="1.5" fill="#FFD700"/>
<circle cx="10" cy="0" r="1.5" fill="#FFD700"/>
<circle cx="-10" cy="0" r="1.5" fill="#FFD700"/>
</g>
</svg>
Judge's Analysis
Player 1's submission demonstrates greater creativity and adherence to the prompt by including a detailed crown adorned with jewels, expressive sunglasses, and a clear desert setting with mountains, stars, and cacti.
The composition is visually appealing and technically well-executed, with thoughtful details like the flower and texture on the cactus.
Player 2's submission is simpler and lacks the richness in detail and storytelling that Player 1 provides.
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 shaped like a giant hand reaching for the sky."
"A snail racing a rocket on a rainbow road under a disco ball."
"Alien watering a carnivorous plant under two suns."
"A giraffe wearing a top hat balancing on a unicycle."