Creative Challenge
"A cactus wearing a superhero cape, standing on top of a mountain."
<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="100%" style="stop-color:#00BFFF;stop-opacity:1" />
</linearGradient>
<linearGradient id="mountainGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A0522D;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8B4513;stop-opacity:1" />
</linearGradient>
<linearGradient id="cactusBodyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#90EE90;stop-opacity:1" />
<stop offset="100%" style="stop-color:#32CD32;stop-opacity:1" />
</linearGradient>
<linearGradient id="capeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF4500;stop-opacity:1" />
<stop offset="50%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF4500;stop-opacity:1" />
</linearGradient>
<radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFFF00;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFA500;stop-opacity:0" />
</radialGradient>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
<!-- Sun -->
<circle cx="250" cy="50" r="40" fill="url(#sunGradient)"/>
<!-- Mountain -->
<path d="M0 300 L50 150 L150 250 L250 100 L300 200 L300 300 Z" fill="url(#mountainGradient)"/>
<!-- Cactus Body -->
<path d="M140 160 C140 140 160 140 160 160 V200 C160 220 140 220 140 200 Z M130 170 C120 170 120 180 130 180 M170 170 C180 170 180 180 170 180 M130 190 C120 190 120 200 130 200 M170 190 C180 190 180 200 170 200" fill="url(#cactusBodyGradient)"/>
<!-- Cactus Arms -->
<path d="M140 170 C135 160 125 160 120 170 M160 170 C165 160 175 160 180 170" stroke="darkgreen" stroke-width="5" fill="none" stroke-linecap="round"/>
<!-- Spikes (simplified) -->
<line x1="150" y1="170" x2="150" y2="165" stroke="darkgreen" stroke-width="2"/>
<line x1="145" y1="175" x2="140" y2="170" stroke="darkgreen" stroke-width="2"/>
<line x1="155" y1="175" x2="160" y2="170" stroke="darkgreen" stroke-width="2"/>
<!-- Superhero Cape -->
<path d="M150 160 C140 150 110 150 100 180 L110 200 C120 180 140 180 150 200 C160 180 180 180 190 200 L200 180 C190 150 160 150 150 160 Z" fill="url(#capeGradient)" transform="rotate(10 150 180)"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradient for mountain -->
<linearGradient id="mountainGradient" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#4a3c28"/>
<stop offset="60%" stop-color="#7a6a4a"/>
<stop offset="100%" stop-color="#c9a570"/>
</linearGradient>
<!-- Gradient for cactus body -->
<radialGradient id="cactusGradient" cx="50%" cy="40%" r="60%">
<stop offset="20%" stop-color="#1b6b27"/>
<stop offset="100%" stop-color="#3cb043"/>
</radialGradient>
<!-- Gradient for cactus thorn shadows -->
<radialGradient id="thornShadow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#264d19" stop-opacity="0.7"/>
<stop offset="100%" stop-color="transparent" stop-opacity="0"/>
</radialGradient>
<!-- Gradient for cape -->
<linearGradient id="capeGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e8232d" />
<stop offset="50%" stop-color="#900c13" />
<stop offset="100%" stop-color="#ff4a58" />
</linearGradient>
<!-- Pattern for cactus spines -->
<pattern id="spinesPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<line x1="5" y1="2" x2="5" y2="8" stroke="#e5e6d3" stroke-width="1" />
<line x1="3" y1="5" x2="7" y2="5" stroke="#e5e6d3" stroke-width="1" />
</pattern>
<!-- Glow filter for hero aura -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%" >
<feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="#ff3333" flood-opacity="0.6" />
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#ff6666" flood-opacity="0.4" />
<feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#ff9999" flood-opacity="0.2" />
</filter>
<!-- Mask for cape flutter -->
<mask id="capeMask">
<rect x="0" y="0" width="300" height="300" fill="white" />
<circle cx="230" cy="140" r="80" fill="black" />
</mask>
<!-- Highlight gradient for mountain snowtops -->
<radialGradient id="snowHighlight" cx="50%" cy="40%" r="40%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#c9a570" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<defs>
<radialGradient id="skyGradient" cx="50%" cy="60%" r="80%">
<stop offset="0%" stop-color="#2f4f7f" />
<stop offset="100%" stop-color="#080c17" />
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars scattered -->
<g stroke="#fff" stroke-width="0.7" stroke-linecap="round" opacity="0.8">
<circle cx="50" cy="30" r="1.4" fill="white" />
<circle cx="220" cy="20" r="1" fill="white" />
<circle cx="180" cy="45" r="1.2" fill="white" />
<circle cx="130" cy="80" r="1" fill="white" />
<circle cx="80" cy="50" r="1.3" fill="white" />
<circle cx="270" cy="60" r="1.1" fill="white" />
<circle cx="260" cy="40" r="1.4" fill="white" />
<circle cx="40" cy="90" r="1" fill="white" />
</g>
<!-- Mountain shapes -->
<g>
<!-- Large central mountain -->
<path d="M150 300 L70 170 L140 110 L210 170 Z" fill="url(#mountainGradient)" />
<path d="M150 300 L130 170 L155 145 L180 165 L170 200 Z" fill="url(#snowHighlight)" opacity="0.4" />
<!-- Left peak -->
<path d="M70 300 L10 200 L60 170 Z" fill="url(#mountainGradient)" />
<path d="M60 170 L30 180 L50 210 Z" fill="url(#snowHighlight)" opacity="0.3" />
<!-- Right peak -->
<path d="M210 300 L270 200 L220 170 Z" fill="url(#mountainGradient)" />
<path d="M220 170 L250 180 L230 210 Z" fill="url(#snowHighlight)" opacity="0.3" />
</g>
<!-- Ground shadow -->
<ellipse cx="150" cy="295" rx="80" ry="20" fill="rgba(0,0,0,0.25)" />
<!-- Heroic Cactus Group -->
<g filter="url(#glow)" transform="translate(140 140)">
<!-- Cactus arms left -->
<ellipse cx="-16" cy="-20" rx="10" ry="32" fill="url(#cactusGradient)" stroke="#195819" stroke-width="1.3" />
<ellipse cx="-17" cy="-20" rx="4" ry="12" fill="url(#spinesPattern)" />
<ellipse cx="-15" cy="-25" rx="1.5" ry="5" fill="url(#thornShadow)" />
<!-- Cactus arms right -->
<ellipse cx="32" cy="-10" rx="10" ry="32" fill="url(#cactusGradient)" stroke="#195819" stroke-width="1.3" />
<ellipse cx="31" cy="-10" rx="4" ry="12" fill="url(#spinesPattern)" />
<ellipse cx="33" cy="-15" rx="1.5" ry="5" fill="url(#thornShadow)" />
<!-- Cactus main body -->
<ellipse cx="0" cy="0" rx="30" ry="70" fill="url(#cactusGradient)" stroke="#195819" stroke-width="2" />
<!-- Shadows and highlights on body -->
<ellipse cx="5" cy="8" rx="8" ry="20" fill="url(#thornShadow)" />
<ellipse cx="-8" cy="-15" rx="6" ry="24" fill="url(#spinesPattern)" opacity="0.5" />
<!-- Spines small details -->
<g stroke="#d9e9c0" stroke-width="1" stroke-linecap="round" >
<line x1="-20" y1="-40" x2="-15" y2="-45"/>
<line x1="-10" y1="10" x2="-8" y2="20"/>
<line x1="15" y1="-30" x2="18" y2="-40"/>
<line x1="5" y1="-10" x2="5" y2="-20"/>
<line x1="0" y1="40" x2="5" y2="45"/>
</g>
<!-- Hero cape behind cactus -->
<path
d="M-10 20
C-90 160, 80 220, 70 40
C60 0, 15 10, -10 20 Z"
fill="url(#capeGradient)"
stroke="#7a0a11" stroke-width="2"
mask="url(#capeMask)"
style="transform-origin: 150px 140px;"
/>
<!-- Cape folds highlights -->
<path d="M-10 20 C-60 110, 40 150, 35 60" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="4" stroke-linejoin="round" />
<!-- Heroic emblem: a shining star burst on chest -->
<g transform="translate(0 18)">
<circle r="9" fill="#ffec00" filter="url(#glow)" />
<polygon points="0,-7 2,-2 7,-2 3,1 5,6 0,3 -5,6 -3,1 -7,-2 -2,-2" fill="#fff44f" stroke="#caa800" stroke-width="0.7"/>
</g>
<!-- Small eyes on cactus -->
<circle cx="-8" cy="-22" r="5" fill="#2e4f20" />
<circle cx="-8" cy="-22" r="2" fill="#aaff99" />
<circle cx="8" cy="-22" r="5" fill="#2e4f20" />
<circle cx="8" cy="-22" r="2" fill="#aaff99" />
<!-- Mouth line - serious but heroic -->
<path d="M-12 15 Q0 25 12 15" stroke="#144412" stroke-width="2" fill="none" stroke-linecap="round" />
</g>
<!-- Mountain top snowcaps glow -->
<circle cx="140" cy="110" r="40" fill="url(#snowHighlight)" opacity="0.4" />
<!-- Final silhouette shadow below cactus (soft) -->
<ellipse cx="140" cy="210" rx="25" ry="8" fill="rgba(0,0,0,0.2)" />
</svg>Judge's Analysis
Player 2's submission is more creative and visually appealing, with a detailed depiction of a cactus wearing a cape and standing on a mountain illuminated by spotlights under a starry sky.
It adheres more closely to the superhero theme, showing effort in the composition and technical quality.
Player 1's submission, while colorful, lacks detail and does not clearly convey the superhero theme or the mountain setting as effectively.
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.