Creative Challenge
"A giraffe on roller skates juggling flaming torches in a thunderstorm."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0a0a3f"/>
<stop offset="100%" stop-color="#30104d"/>
</linearGradient>
<linearGradient id="bodyGrad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="300">
<stop offset="0%" stop-color="#ffed99"/>
<stop offset="100%" stop-color="#ffb84d"/>
</linearGradient>
<radialGradient id="flameGrad" cx="50%" cy="0%" r="50%" gradientTransform="scale(0.8)">
<stop offset="0%" stop-color="#ffcc33"/>
<stop offset="50%" stop-color="#ff6600"/>
<stop offset="100%" stop-color="#990000"/>
</radialGradient>
<pattern id="spots" patternUnits="userSpaceOnUse" width="30" height="30">
<circle cx="7" cy="7" r="5" fill="#8B4513"/>
<circle cx="20" cy="20" r="4" fill="#8B4513"/>
</pattern>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="lightGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="blur1"/>
<feMerge>
<feMergeNode in="blur1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<g id="lightning">
<path d="M50,0 L70,60 L60,60 L80,130" stroke="#ffff66" stroke-width="2" fill="none" filter="url(#lightGlow)"/>
<path d="M200,10 L220,70 L210,70 L230,140" stroke="#ffff66" stroke-width="2" fill="none" filter="url(#lightGlow)"/>
</g>
<g id="rain" stroke="#a0cfff" stroke-width="1" opacity="0.4">
<line x1="20" y1="0" x2="22" y2="12"/>
<line x1="60" y1="10" x2="62" y2="22"/>
<line x1="100" y1="0" x2="102" y2="12"/>
<line x1="140" y1="10" x2="142" y2="22"/>
<line x1="180" y1="5" x2="182" y2="17"/>
<line x1="220" y1="0" x2="222" y2="12"/>
<line x1="260" y1="10" x2="262" y2="22"/>
<line x1="300" y1="5" x2="302" y2="17"/>
</g>
<g id="giraffe">
<g id="backLegs">
<g transform="translate(45 210)">
<rect width="8" height="60" rx="4" fill="url(#bodyGrad)"/>
<rect width="8" height="60" rx="4" fill="url(#spots)" opacity="0.5"/>
<g transform="translate(0 60)">
<rect x="-2" y="0" width="12" height="5" fill="#333"/>
<circle cx="2" cy="8" r="3" fill="#666"/>
<circle cx="8" cy="8" r="3" fill="#666"/>
</g>
</g>
<g transform="translate(65 210)">
<rect width="8" height="60" rx="4" fill="url(#bodyGrad)"/>
<rect width="8" height="60" rx="4" fill="url(#spots)" opacity="0.5"/>
<g transform="translate(0 60)">
<rect x="-2" y="0" width="12" height="5" fill="#333"/>
<circle cx="2" cy="8" r="3" fill="#666"/>
<circle cx="8" cy="8" r="3" fill="#666"/>
</g>
</g>
</g>
<ellipse cx="80" cy="210" rx="45" ry="30" fill="url(#bodyGrad)"/>
<ellipse cx="80" cy="210" rx="45" ry="30" fill="url(#spots)" opacity="0.5"/>
<rect x="83" y="135" width="12" height="75" rx="6" fill="url(#bodyGrad)"/>
<rect x="83" y="135" width="12" height="75" rx="6" fill="url(#spots)" opacity="0.5"/>
<ellipse cx="89" cy="125" rx="18" ry="14" fill="url(#bodyGrad)"/>
<path d="M78,123 Q75,118 80,120 Z" fill="#ffed99"/>
<path d="M98,123 Q101,118 96,120 Z" fill="#ffed99"/>
<circle cx="83" cy="115" r="3" fill="#8B4513"/>
<circle cx="95" cy="115" r="3" fill="#8B4513"/>
<circle cx="96" cy="122" r="2" fill="#000"/>
<path d="M82,133 Q89,138 96,133" stroke="#663300" stroke-width="1" fill="none" stroke-linecap="round"/>
<g id="torches">
<g transform="rotate(-40 89 125)">
<line x1="89" y1="125" x2="89" y2="155" stroke="#332" stroke-width="4" stroke-linecap="round"/>
<path d="M89,155 C95,147 97,135 89,140 C81,135 83,147 89,155 Z" fill="url(#flameGrad)" filter="url(#glow)"/>
</g>
<g transform="rotate(0 89 125)">
<line x1="89" y1="125" x2="89" y2="155" stroke="#332" stroke-width="4" stroke-linecap="round"/>
<path d="M89,155 C95,147 97,135 89,140 C81,135 83,147 89,155 Z" fill="url(#flameGrad)" filter="url(#glow)"/>
</g>
<g transform="rotate(40 89 125)">
<line x1="89" y1="125" x2="89" y2="155" stroke="#332" stroke-width="4" stroke-linecap="round"/>
<path d="M89,155 C95,147 97,135 89,140 C81,135 83,147 89,155 Z" fill="url(#flameGrad)" filter="url(#glow)"/>
</g>
</g>
<g id="frontLegs">
<g transform="translate(85 210)">
<rect width="8" height="60" rx="4" fill="url(#bodyGrad)"/>
<rect width="8" height="60" rx="4" fill="url(#spots)" opacity="0.5"/>
<g transform="translate(0 60)">
<rect x="-2" y="0" width="12" height="5" fill="#333"/>
<circle cx="2" cy="8" r="3" fill="#666"/>
<circle cx="8" cy="8" r="3" fill="#666"/>
</g>
</g>
<g transform="translate(105 210)">
<rect width="8" height="60" rx="4" fill="url(#bodyGrad)"/>
<rect width="8" height="60" rx="4" fill="url(#spots)" opacity="0.5"/>
<g transform="translate(0 60)">
<rect x="-2" y="0" width="12" height="5" fill="#333"/>
<circle cx="2" cy="8" r="3" fill="#666"/>
<circle cx="8" cy="8" r="3" fill="#666"/>
</g>
</g>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background: Dark stormy sky with gradient -->
<defs>
<linearGradient id="stormGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0d1b2a"/>
<stop offset="100%" stop-color="#1b263b"/>
</linearGradient>
<radialGradient id="flameGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="yellow"/>
<stop offset="50%" stop-color="orange"/>
<stop offset="100%" stop-color="red"/>
</radialGradient>
<linearGradient id="skateGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff6f61"/>
<stop offset="100%" stop-color="#de4c4c"/>
</linearGradient>
<pattern id="giraffePattern" width="4" height="4" patternUnits="userSpaceOnUse">
<rect width="4" height="4" fill="#fceabb"/>
<circle cx="2" cy="2" r="1" fill="#e1a95f" />
</pattern>
</defs>
<!-- Dark storm background -->
<rect x="0" y="0" width="300" height="300" fill="url(#stormGradient)"/>
<!-- Lightning bolts -->
<g stroke="#f7f9fc" stroke-width="2" fill="none">
<path d="M50 30 L65 55 L55 55 L70 85" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M220 40 L210 70 L225 70 L215 100" stroke-linejoin="round" stroke-linecap="round"/>
</g>
<!-- Giraffe body on roller skates -->
<g id="giraffe">
<!-- Giraffe neck and head -->
<path d="M150 130 Q145 90 160 60 Q165 45 175 45 Q185 45 190 60 Q205 90 200 130" fill="url(#giraffePattern)" stroke="#9c6b2a" stroke-width="2"/>
<!-- Eyes -->
<circle cx="180" cy="70" r="2" fill="#000"/>
<!-- Ossicones -->
<rect x="172" y="35" width="4" height="8" fill="#9c6b2a"/>
<rect x="182" y="33" width="3" height="7" fill="#9c6b2a"/>
<!-- Giraffe body -->
<path d="M140 130 Q130 160 140 190 L160 200 Q180 210 200 200 L220 190 Q230 160 220 130 Z" fill="url(#giraffePattern)" stroke="#9c6b2a" stroke-width="2"/>
<!-- Legs -->
<g id="legs">
<rect x="150" y="200" width="8" height="25" fill="url(#giraffePattern)" stroke="#9c6b2a" stroke-width="2"/>
<rect x="160" y="200" width="8" height="25" fill="url(#giraffePattern)" stroke="#9c6b2a" stroke-width="2"/>
<rect x="190" y="200" width="8" height="25" fill="url(#giraffePattern)" stroke="#9c6b2a" stroke-width="2"/>
<rect x="200" y="200" width="8" height="25" fill="url(#giraffePattern)" stroke="#9c6b2a" stroke-width="2"/>
</g>
<!-- Roller skates -->
<g id="skates">
<!-- Left skate -->
<ellipse cx="154" cy="230" rx="12" ry="5" fill="url(#skateGradient)" stroke="#911" stroke-width="1"/>
<!-- Right skate -->
<ellipse cx="194" cy="230" rx="12" ry="5" fill="url(#skateGradient)" stroke="#911" stroke-width="1"/>
<!-- Wheels - four small circles per skate -->
<g fill="#333">
<!-- Left skate wheels -->
<circle cx="145" cy="230" r="2"/>
<circle cx="154" cy="230" r="2"/>
<circle cx="163" cy="230" r="2"/>
<!-- Right skate wheels -->
<circle cx="185" cy="230" r="2"/>
<circle cx="194" cy="230" r="2"/>
<circle cx="203" cy="230" r="2"/>
</g>
</g>
<!-- Flaming torches being juggled -->
<g id="torches" stroke="#611" stroke-width="1" fill="none">
<!-- Left torch -->
<g>
<line x1="140" y1="120" x2="130" y2="100" stroke="#6b2a"/>
<circle cx="130" cy="100" r="4" fill="url(#flameGradient)"/>
<path d="M125 100 Q130 90 135 100" fill="rgba(255,165,0,0.5)" />
</g>
<!-- Right torch -->
<g>
<line x1="210" y1="120" x2="220" y2="100" stroke="#6b2a"/>
<circle cx="220" cy="100" r="4" fill="url(#flameGradient)"/>
<path d="M215 100 Q220 90 225 100" fill="rgba(255,165,0,0.5)" />
</g>
<!-- Top torch (juggled above the giraffe's head) -->
<g>
<line x1="185" y1="60" x2="185" y2="40" stroke="#6b2a"/>
<circle cx="185" cy="40" r="4" fill="url(#flameGradient)"/>
<path d="M180 40 Q185 30 190 40" fill="rgba(255,165,0,0.5)" />
</g>
</g>
</g>
<!-- Additional artistic touches: swirling wind lines -->
<g stroke="#ffffff77" stroke-width="1" fill="none">
<path d="M100 250 C110 240, 130 260, 140 250"/>
<path d="M160 260 C170 250, 190 270, 200 260"/>
</g>
</svg>Judge's Analysis
Player 1's image better adheres to the prompt with a clear depiction of a giraffe in a thunderstorm, evident through the spotted body, long neck, and visible lightning bolts.
While it lacks the juggling flaming torches, the giraffe on roller skates is more recognizable and visually appealing than Player 2's abstract execution, which makes it harder to interpret or connect with the prompt.
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
"An owl wearing a wizard hat, perched on a glowing crystal ball."
"A floating island with a single, massive tree shaped like a hand reaching for the sky."
"A giraffe on roller skates juggling pineapples under a disco ball."
