Creative Challenge
"A giraffe sky-diving with a rainbow parachute"
<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%" stop-color="#0080FF" />
<stop offset="100%" stop-color="#87CEEB" />
</linearGradient>
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="16.67%" stop-color="#FF7F00" />
<stop offset="33.33%" stop-color="#FFFF00" />
<stop offset="50%" stop-color="#00FF00" />
<stop offset="66.67%" stop-color="#0000FF" />
<stop offset="83.33%" stop-color="#4B0082" />
<stop offset="100%" stop-color="#9400D3" />
</linearGradient>
<radialGradient id="cloudGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#E0E0E0" />
</radialGradient>
<pattern id="spots" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,10 a7,7 0 1,0 14,0 a7,7 0 1,0 -14,0" fill="#C87533" />
</pattern>
</defs>
<!-- Sky Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Clouds -->
<g class="clouds">
<path d="M40,60 a20,20 0 1,0 0,-1 h40 a15,15 0 1,0 0,-1 h-10 a10,10 0 1,0 0,-1 z" fill="url(#cloudGradient)" opacity="0.9" />
<path d="M230,40 a15,15 0 1,0 0,-1 h30 a10,10 0 1,0 0,-1 h-5 a8,8 0 1,0 0,-1 z" fill="url(#cloudGradient)" opacity="0.8" />
<path d="M180,90 a12,12 0 1,0 0,-1 h20 a8,8 0 1,0 0,-1 h-5 a6,6 0 1,0 0,-1 z" fill="url(#cloudGradient)" opacity="0.7" />
</g>
<!-- Rainbow Parachute -->
<g class="parachute">
<path d="M150,120
C 100,60 80,80 70,90
C 70,90 120,110 150,120
C 180,110 230,90 230,90
C 220,80 200,60 150,120"
fill="url(#rainbowGradient)" stroke="#333" stroke-width="1" />
<!-- Parachute Strings -->
<line x1="88" y1="90" x2="130" y2="157" stroke="#333" stroke-width="1.5" />
<line x1="109" y1="104" x2="140" y2="160" stroke="#333" stroke-width="1.5" />
<line x1="150" y1="120" x2="150" y2="160" stroke="#333" stroke-width="1.5" />
<line x1="191" y1="104" x2="160" y2="160" stroke="#333" stroke-width="1.5" />
<line x1="212" y1="90" x2="170" y2="157" stroke="#333" stroke-width="1.5" />
</g>
<!-- Giraffe Body -->
<g class="giraffe">
<!-- Harness -->
<path d="M130,160 C130,170 170,170 170,160 C170,155 165,150 150,150 C135,150 130,155 130,160 Z" fill="#4D3B24" stroke="#333" stroke-width="1" />
<!-- Body -->
<ellipse cx="150" cy="180" rx="15" ry="20" fill="#F9D976" stroke="#333" stroke-width="1" />
<path d="M135,175 a15,20 0 0,0 30,0" fill="url(#spots)" stroke="#333" stroke-width="0.5" />
<!-- Legs -->
<path d="M140,195 L137,215 L134,215 L137,195" fill="#F9D976" stroke="#333" stroke-width="1" />
<path d="M160,195 L163,215 L166,215 L163,195" fill="#F9D976" stroke="#333" stroke-width="1" />
<path d="M142,195 L139,210 L136,210 L139,195" fill="#F9D976" stroke="#333" stroke-width="1" />
<path d="M158,195 L161,210 L164,210 L161,195" fill="#F9D976" stroke="#333" stroke-width="1" />
<!-- Tail -->
<path d="M155,195 C162,208 166,215 164,220" fill="none" stroke="#333" stroke-width="1.5" />
<circle cx="164" cy="220" r="3" fill="#4D3B24" />
<!-- Neck -->
<path d="M150,165 C145,155 145,145 147,130 C149,115 152,110 155,105" fill="#F9D976" stroke="#333" stroke-width="1.5" />
<path d="M150,165 C145,155 145,145 147,130 C149,115 152,110 155,105" fill="url(#spots)" stroke-width="0" opacity="0.5" />
<!-- Head -->
<ellipse cx="156" cy="100" rx="8" ry="12" transform="rotate(-15,156,100)" fill="#F9D976" stroke="#333" stroke-width="1" />
<path d="M156,95 C156,95 164,88 164,94" fill="none" stroke="#333" stroke-width="1" />
<path d="M156,95 C156,95 148,88 148,94" fill="none" stroke="#333" stroke-width="1" />
<circle cx="152" cy="96" r="1.5" fill="#333" />
<circle cx="159" cy="96" r="1.5" fill="#333" />
<ellipse cx="156" cy="102" rx="2" ry="1" fill="#333" />
</g>
<!-- Additional clouds below -->
<g class="clouds-below">
<path d="M60,260 a20,15 0 1,0 0,-1 h30 a12,12 0 1,0 0,-1 h-8 a8,8 0 1,0 0,-1 z" fill="url(#cloudGradient)" opacity="0.6" />
<path d="M200,280 a15,12 0 1,0 0,-1 h20 a10,10 0 1,0 0,-1 h-5 a6,6 0 1,0 0,-1 z" fill="url(#cloudGradient)" opacity="0.5" />
</g>
<!-- Air motion lines -->
<g stroke="#fff" stroke-width="1" opacity="0.7">
<path d="M120,200 C125,205 125,210 120,215" fill="none" />
<path d="M100,210 C105,215 105,220 100,225" fill="none" />
<path d="M180,210 C185,215 185,220 180,225" fill="none" />
<path d="M200,190 C205,195 205,200 200,205" fill="none" />
</g>
<!-- Sun -->
<g class="sun">
<circle cx="250" cy="50" r="15" fill="#FFFF00" stroke="#FF9900" stroke-width="2" />
<g stroke="#FFFF00" stroke-width="2">
<line x1="250" y1="25" x2="250" y2="20" />
<line x1="250" y1="80" x2="250" y2="75" />
<line x1="225" y1="50" x2="220" y2="50" />
<line x1="280" y1="50" x2="275" y2="50" />
<line x1="232" y1="32" x2="228" y2="28" />
<line x1="268" y1="68" x2="272" y2="72" />
<line x1="232" y1="68" x2="228" y2="72" />
<line x1="268" y1="32" x2="272" y2="28" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Sky background with gradient -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="300">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
</linearGradient>
<!-- Rainbow parachute gradient -->
<linearGradient id="rainbow" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />
<stop offset="20%" style="stop-color:#FFA500;stop-opacity:1" />
<stop offset="40%" style="stop-color:#FFFF00;stop-opacity:1" />
<stop offset="60%" style="stop-color:#008000;stop-opacity:1" />
<stop offset="80%" style="stop-color:#0000FF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#9400D3;stop-opacity:1" />
</linearGradient>
<!-- Giraffe fur pattern -->
<pattern id="giraffeSpots" patternUnits="userSpaceOnUse" width="10" height="10">
<rect x="0" y="0" width="10" height="10" fill="#FFD700" />
<ellipse cx="5" cy="5" rx="1.5" ry="1" fill="#8B4513" />
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Ground -->
<path d="M0 250 Q150 300 300 250 L300 300 L0 300 Z" fill="#556B2F" />
<!-- Giraffe -->
<g transform="translate(150,150)">
<!-- Body -->
<path d="M0 0 L0 -50 Q-20 -60 -40 -60 L-40 -20 L-20 -20 L0 0" fill="#FFD700" />
<!-- Neck -->
<path d="M-40 -20 Q-30 -30 -20 -40" stroke="#8B4513" stroke-width="4" fill="none" />
<!-- Legs -->
<path d="M-20 -20 L-20 -40" stroke="#8B4513" stroke-width="4" />
<path d="M-30 -20 L-30 -40" stroke="#8B4513" stroke-width="4" />
<!-- Head -->
<path d="M-50 -60 Q-45 -55 -40 -60 L-40 -70 L-50 -70 Z" fill="#FFD700" />
<!-- Face details -->
<circle cx="-45" cy="-65" r="2" fill="#000000" />
<path d="M-40 -70 Q-38 -72 -35 -70" stroke="#000000" stroke-width="2" fill="none" />
</g>
<!-- Parachute -->
<g transform="translate(150,100)">
<!-- Parachute canopy -->
<path d="M0 0 Q50 -20 100 0 Q120 20 80 40 L0 40 Z" fill="url(#rainbow)" />
<!-- Parachute strings -->
<path d="M50 -20 L150 150" stroke="#FFFFFF" stroke-width="2" />
<path d="M80 -20 L140 150" stroke="#FFFFFF" stroke-width="2" />
<path d="M30 -20 L110 150" stroke="#FFFFFF" stroke-width="2" />
</g>
<!-- Clouds -->
<path d="M100 50 Q120 40 140 50 Q130 60 120 60 Q110 60 100 50" fill="#FFFFFF" opacity="0.8" />
<path d="M200 80 Q220 70 240 80 Q230 90 220 90 Q210 90 200 80" fill="#FFFFFF" opacity="0.8" />
<path d="M250 120 Q270 110 290 120 Q280 130 270 130 Q260 130 250 120" fill="#FFFFFF" opacity="0.8" />
<!-- Motion lines -->
<path d="M150 100 Q160 90 170 100" stroke="#87CEEB" stroke-width="1" opacity="0.5" />
<path d="M140 100 Q150 90 160 100" stroke="#87CEEB" stroke-width="1" opacity="0.5" />
<!-- Light effects -->
<circle cx="150" cy="100" r="5" fill="url(#rainbow)" opacity="0.7" />
<circle cx="200" cy="80" r="4" fill="url(#rainbow)" opacity="0.7" />
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt with a clear depiction of a giraffe sky-diving using a rainbow parachute, set against a cheerful sky with clouds and a sun.
The technical quality and visual appeal are strong, with expressive details and vibrant colors.
Player 2's image is more abstract and less recognizable as a giraffe sky-diving, which detracts from the clarity and adherence to 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
"Floating city above a giant dandelion in bloom"
"An umbrella that rains upward in a clear blue sky"
"Floating umbrella jellyfish in a starfield sky"
"Surreal snail skyscraper with windows and tiny elevator doors"
"Frog in a tuxedo playing the violin under a crescent moon"
"Steampunk octopus playing a violin under the sea"
