Creative Challenge
"Giraffe wearing roller skates on a tightrope under a starry sky"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" style="stop-color:navy;stop-opacity:1" />
<stop offset="100%" style="stop-color:black;stop-opacity:1" />
</radialGradient>
<linearGradient id="giraffeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
<stop offset="100%" style="stop-color:goldenrod;stop-opacity:1" />
</linearGradient>
<pattern id="giraffeSpots" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="3" fill="saddlebrown" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#skyGradient)" />
<path d="M30 150 Q150 50 270 150" stroke="gray" stroke-width="2" fill="none" />
<g transform="translate(80,100)">
<ellipse cx="40" cy="80" rx="15" ry="10" fill="white" stroke="black" />
<circle cx="25" cy="85" r="3" fill="black" />
<path d="M40 80 C30 70, 60 70, 50 80" fill="none" stroke="black" />
<rect x="32" y="92" width="16" height="60" fill="url(#giraffeSpots)" stroke="black" />
<rect x="32" y="152" width="16" height="6" fill="red" stroke="black" />
<line x1="32" y1="158" x2="48" y2="158" stroke="black" />
<line x1="35" y1="158" x2="28" y2="162" stroke="black" />
<line x1="45" y1="158" x2="52" y2="162" stroke="black" />
<ellipse cx="25" cy="168" rx="8" ry="3" fill="steelblue" />
<ellipse cx="55" cy="168" rx="8" ry="3" fill="steelblue" />
<path d="M40 120 C20 130, 60 150, 40 160" fill="none" stroke="black" />
</g>
<g transform="translate(110,0)">
<rect x="16" y="180" width="10" height="80" fill="url(#giraffeSpots)" stroke="black" />
<path d="M21 200 L12 220 L30 220 Z" fill="red" />
<ellipse cx="21" cy="225" rx="8" ry="3" fill="green" />
</g>
<circle cx="40" cy="40" r="2" fill="white" />
<circle cx="100" cy="60" r="2" fill="white" />
<circle cx="160" cy="30" r="2" fill="white" />
<circle cx="200" cy="70" r="2" fill="white" />
<circle cx="250" cy="50" r="2" fill="white" />
<circle cx="280" cy="80" r="2" fill="white" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with starry night effect -->
<defs>
<radialGradient id="nightSky" cx="150" cy="150" r="150" fx="150" fy="150">
<stop offset="0" style="stop-color:#1A1A4F;stop-opacity:1" />
<stop offset="1" style="stop-color:#000000;stop-opacity:1" />
</radialGradient>
<pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="3" fill="white" opacity="0.6"/>
<circle cx="20" cy="80" r="2" fill="white" opacity="0.4"/>
<circle cx="80" cy="30" r="3" fill="white" opacity="0.5"/>
</pattern>
<path id="moon" d="M240 80 C240 50, 260 50, 260 80 C260 110, 240 110, 240 80" fill="#F0F0F0"/>
<linearGradient id="moonGlow" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" style="stop-color:#FFF;stop-opacity:0.9"/>
<stop offset="1" style="stop-color:#FFF;stop-opacity:0.4"/>
</linearGradient>
<linearGradient id="wheelMetal" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" style="stop-color:#666;stop-opacity:1"/>
<stop offset="1" style="stop-color:#888;stop-opacity:1"/>
</linearGradient>
</defs>
<!-- Background application -->
<rect width="300" height="300" fill="url(#nightSky)"/>
<rect width="300" height="300" fill="url(#stars)"/>
<!-- Moon with glow effect -->
<use href="#moon" fill="url(#moonGlow)"/>
<!-- Tightrope -->
<path d="M50 100 H250" stroke="#FF4444" stroke-width="4"/>
<path d="M40 100 L50 90" stroke="#FF4444" stroke-width="2"/>
<path d="M260 100 L250 110" stroke="#FF4444" stroke-width="2"/>
<!-- Giraffe body -->
<path d="M150 170 C150 190, 160 200, 170 200 L170 220 L160 220 C160 200, 150 190, 150 170" fill="#F0D9B5"/>
<!-- Giraffe spots -->
<ellipse cx="155" cy="185" rx="5" ry="3" fill="#8B4513"/>
<ellipse cx="165" cy="175" rx="5" ry="3" fill="#8B4513"/>
<ellipse cx="145" cy="175" rx="5" ry="3" fill="#8B4513"/>
<ellipse cx="160" cy="195" rx="5" ry="3" fill="#8B4513"/>
<!-- Giraffe head -->
<path d="M140 130 C140 120, 130 110, 120 110 L120 140 L130 140 C130 120, 140 110, 140 100" fill="#F0D9B5"/>
<ellipse cx="125" cy="125" rx="3" ry="2" fill="#000"/>
<ellipse cx="135" cy="125" rx="3" ry="2" fill="#000"/>
<path d="M125 130 Q128 132 130 130" stroke="#000" stroke-width="1"/>
<path d="M135 130 Q138 132 140 130" stroke="#000" stroke-width="1"/>
<!-- Giraffe neck -->
<path d="M140 100 C140 90, 150 80, 160 80" stroke="#F0D9B5" stroke-width="20"/>
<!-- Legs and roller skates -->
<path d="M160 220 L160 240" stroke="#8B4513" stroke-width="8"/>
<path d="M155 240 L160 245 L165 240" fill="#8B4513"/>
<rect x="150" y="235" width="20" height="10" fill="#8B4513"/>
<circle cx="155" cy="240" r="5" fill="url(#wheelMetal)"/>
<circle cx="165" cy="240" r="5" fill="url(#wheelMetal)"/>
<path d="M155 240 T156 238 157 240" stroke="#FFF" stroke-width="1"/>
<path d="M165 240 T166 238 167 240" stroke="#FFF" stroke-width="1"/>
<!-- Skate laces -->
<path d="M155 238 Q158 235 160 235" stroke="#FFA500" stroke-width="1"/>
<path d="M165 238 Q162 235 160 235" stroke="#FFA500" stroke-width="1"/>
<!-- Left skate -->
<path d="M140 220 L140 240" stroke="#8B4513" stroke-width="8"/>
<path d="M135 240 L140 245 L145 240" fill="#8B4513"/>
<rect x="130" y="235" width="20" height="10" fill="#8B4513"/>
<circle cx="135" cy="240" r="5" fill="url(#wheelMetal)"/>
<circle cx="145" cy="240" r="5" fill="url(#wheelMetal)"/>
<path d="M135 240 T136 238 137 240" stroke="#FFF" stroke-width="1"/>
<path d="M145 240 T146 238 147 240" stroke="#FFF" stroke-width="1"/>
<!-- Skate laces -->
<path d="M135 238 Q138 235 140 235" stroke="#FFA500" stroke-width="1"/>
<path d="M145 238 Q142 235 140 235" stroke="#FFA500" stroke-width="1"/>
<!-- Speed lines -->
<path d="M150 150 Q200 100 250 150" stroke="#00BFFF" stroke-width="2" opacity="0.5"/>
<path d="M150 150 Q200 200 250 150" stroke="#00BFFF" stroke-width="2" opacity="0.5"/>
<path d="M160 220 Q180 200 200 220" stroke="#00BFFF" stroke-width="2" opacity="0.5"/>
<path d="M140 220 Q160 200 180 220" stroke="#00BFFF" stroke-width="2" opacity="0.5"/>
</svg>Judge's Analysis
Player 1's submission captures the whimsical nature of the prompt with a clear depiction of a giraffe on roller skates under a starry sky.
The use of color and composition effectively conveys the tightrope scenario.
In contrast, Player 2's image is more abstract and less recognizable, making it harder to discern the elements described in 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
"Two-headed owl with neon wings under a cosmic night sky"
"Upside-down city skyline mirrored in a tranquil lake"
"A jellyfish cityscape floating above a mirrored ocean"
"Moonlit jellyfish dance in a night sky"
"Surreal clock melting over a tree branch at sunset"
"Jellyfish in a Teacup Floating Through Space"
