Creative Challenge
"A giraffe wearing roller skates on a rainbow road."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff80b3"/>
<stop offset="100%" stop-color="#9080ff"/>
</linearGradient>
<radialGradient id="sun" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ffff00"/>
<stop offset="100%" stop-color="#ffaa00" stop-opacity="0.8"/>
</radialGradient>
<pattern id="spots" patternUnits="userSpaceOnUse" width="15" height="15">
<path d="M0 7.5a7.5 7.5 0 1 1 15 0" fill="#ff6b35" transform="rotate(45)"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#sky)"/>
<circle cx="250" cy="50" r="40" fill="url(#sun)" filter="blur(8px)"/>
<!-- Rainbow path -->
<g transform="translate(0 200)" filter="url(#shadow)">
<path d="M-50 50 Q150 -30 350 50" fill="none" stroke="#ff0000" stroke-width="35" stroke-linecap="round"/>
<path d="M-50 50 Q150 -20 350 50" fill="none" stroke="#ff9900" stroke-width="35" stroke-linecap="round"/>
<path d="M-50 50 Q150 -10 350 50" fill="none" stroke="#ffff00" stroke-width="35" stroke-linecap="round"/>
<path d="M-50 50 Q150 0 350 50" fill="none" stroke="#00ff00" stroke-width="35" stroke-linecap="round"/>
<path d="M-50 50 Q150 10 350 50" fill="none" stroke="#0080ff" stroke-width="35" stroke-linecap="round"/>
<path d="M-50 50 Q150 20 350 50" fill="none" stroke="#4b0082" stroke-width="35" stroke-linecap="round"/>
</g>
<!-- Giraffe -->
<g transform="translate(150 180)">
<!-- Body -->
<rect x="-30" y="-80" width="60" height="100" fill="#ffe066" rx="15"/>
<rect x="-30" y="-80" width="60" height="100" fill="url(#spots)" opacity="0.8"/>
<!-- Neck & Head -->
<path d="M-15 -80 Q-25 -150 5 -200 L15 -200 Q35 -150 15 -80" fill="#ffe066"/>
<ellipse cx="0" cy="-210" rx="20" ry="25" fill="#ffe066"/>
<circle cx="-8" cy="-220" r="5" fill="#333"/>
<circle cx="12" cy="-220" r="5" fill="#333"/>
<path d="M-10 -200 Q0 -190 10 -200" stroke="#333" fill="none"/>
<!-- Legs -->
<g transform="translate(-20 20)">
<rect x="-10" y="0" width="20" height="60" fill="#ffe066"/>
<rect x="-15" y="50" width="30" height="25" fill="#993300" rx="5"/>
<circle cx="0" y="70" r="8" fill="#666"/>
<circle cx="-10" y="70" r="8" fill="#666"/>
<circle cx="10" y="70" r="8" fill="#666"/>
</g>
<g transform="translate(20 20)">
<rect x="-10" y="0" width="20" height="60" fill="#ffe066"/>
<rect x="-15" y="50" width="30" height="25" fill="#993300" rx="5"/>
<circle cx="0" y="70" r="8" fill="#666"/>
<circle cx="-10" y="70" r="8" fill="#666"/>
<circle cx="10" y="70" r="8" fill="#666"/>
</g>
</g>
<filter id="shadow">
<feDropShadow dx="2" dy="4" stdDeviation="4" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Rainbow road gradient -->
<linearGradient id="rainbowRoad" x1="0" y1="250" x2="300" y2="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FF3264"/>
<stop offset="15%" stop-color="#FFB800"/>
<stop offset="30%" stop-color="#48CE2E"/>
<stop offset="48%" stop-color="#36B6FF"/>
<stop offset="65%" stop-color="#932FDB"/>
<stop offset="80%" stop-color="#FF66C4"/>
<stop offset="100%" stop-color="#FF4500"/>
</linearGradient>
<!-- Giraffe spots pattern -->
<pattern id="giraffeSpots" width="30" height="30" patternUnits="userSpaceOnUse">
<ellipse cx="10" cy="8" rx="6" ry="4.5" fill="#946634"/>
<ellipse cx="22" cy="20" rx="5" ry="3.5" fill="#946634"/>
<ellipse cx="18" cy="10" rx="2.5" ry="2" fill="#946634"/>
<ellipse cx="6" cy="20" rx="4" ry="2" fill="#a8742a"/>
</pattern>
<!-- Glow for roller wheels -->
<radialGradient id="wheelGlow" cx="0.5" cy="0.5" r="0.6">
<stop offset="0%" stop-color="#80fffb" stop-opacity="1"/>
<stop offset="80%" stop-color="#0ff" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0ff" stop-opacity="0"/>
</radialGradient>
<!-- Shadow under giraffe -->
<radialGradient id="shadow" cx="0.5" cy="0.5" r="0.7">
<stop offset="0%" stop-color="#000" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#rainbowRoad)" opacity="0.18"/>
<ellipse cx="150" cy="260" rx="80" ry="15" fill="url(#shadow)" />
<!-- Rainbow Road -->
<path d="M20,250 Q90,160 150,180 Q210,200 280,70 L300,120 Q200,240 125,230 Q65,220 5,300 Z" fill="url(#rainbowRoad)" />
<!-- White sparkle stars on the road -->
<g>
<circle cx="70" cy="210" r="1.6" fill="#fff" opacity="0.7"/>
<polygon points="160,202 163,211 157,206 163,206 157,211" fill="#fff" opacity="0.55" />
<circle cx="200" cy="182" r="2" fill="#fff" opacity="0.5"/>
<polygon points="220,150 221,154 217,154 221,156 217,158 221,160" fill="#fff" opacity="0.4"/>
<polygon points="100,220 102,226 104,222 106,226 108,220" fill="#fff" opacity="0.7"/>
<circle cx="240" cy="130" r="1.5" fill="#fff" opacity="0.42"/>
</g>
<!-- Giraffe Body Group -->
<g>
<!-- Neck -->
<rect x="130" y="80" width="24" height="92" rx="15" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2"/>
<!-- Body (rotated ellipse) -->
<ellipse cx="142" cy="158" rx="44" ry="32" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2" transform="rotate(-9 142 158)"/>
<!-- Tail -->
<path d="M98,175 Q85,203 112,196" stroke="#dbb049" stroke-width="5" fill="none" />
<ellipse cx="87" cy="202" rx="5" ry="1.7" fill="#876132"/>
<!-- Back Leg -->
<g>
<rect x="115" y="210" width="10" height="38" rx="4.2" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2"/>
<g>
<!-- Roller skate 1 -->
<ellipse cx="120" cy="250" rx="11" ry="6" fill="#2c2c32" stroke="#71e6ff" stroke-width="2"/>
<ellipse cx="120" cy="250" rx="5" ry="2.2" fill="#b1e6ff"/>
<ellipse cx="115" cy="252" rx="2" ry="1.2" fill="url(#wheelGlow)"/>
<ellipse cx="125" cy="252" rx="2" ry="1.2" fill="url(#wheelGlow)"/>
<!-- Boot -->
<rect x="113" y="244" width="14" height="8" rx="3" fill="#59d6ff" stroke="#089fe3" stroke-width="1.3"/>
</g>
</g>
<!-- Front Leg -->
<g>
<rect x="155" y="193" width="9.5" height="47" rx="3.7" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2"/>
<g>
<!-- Roller skate 2 -->
<ellipse cx="160" cy="246" rx="10.5" ry="5.7" fill="#333348" stroke="#fcff67" stroke-width="2"/>
<ellipse cx="160" cy="246" rx="5" ry="2.2" fill="#f9f20d"/>
<ellipse cx="155" cy="249" rx="2" ry="1.1" fill="url(#wheelGlow)"/>
<ellipse cx="164" cy="249" rx="2" ry="1.1" fill="url(#wheelGlow)"/>
<!-- Boot -->
<rect x="154" y="238" width="12" height="10" rx="2.5" fill="#ffd800" stroke="#df8000" stroke-width="1.1"/>
</g>
</g>
<!-- Front support leg (crossed backwards) -->
<g>
<rect x="175" y="194" width="8" height="42" rx="4" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2" transform="rotate(15 179 194)"/>
<g>
<!-- Roller skate 3 -->
<ellipse cx="180" cy="242" rx="8.5" ry="4.7" fill="#403a68" stroke="#95f690" stroke-width="1.5"/>
<ellipse cx="180" cy="242" rx="3.5" ry="1.5" fill="#50fa7b"/>
<ellipse cx="176" cy="244" rx="1.3" ry="1" fill="url(#wheelGlow)"/>
<ellipse cx="184" cy="244" rx="1.3" ry="1" fill="url(#wheelGlow)"/>
<!-- Boot -->
<rect x="175" y="237" width="10" height="7" rx="1.8" fill="#22e199" stroke="#13c98d" stroke-width="1.1"/>
</g>
</g>
<!-- Back support leg -->
<g>
<rect x="128" y="215" width="7" height="34" rx="2.2" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2" transform="rotate(-5 132 232)"/>
<g>
<!-- Roller skate 4 -->
<ellipse cx="132" cy="246" rx="7.5" ry="4" fill="#47362b" stroke="#ff8f31" stroke-width="1.5"/>
<ellipse cx="132" cy="246" rx="3" ry="1.3" fill="#ffad5e"/>
<ellipse cx="129" cy="248" rx="1.1" ry="0.7" fill="url(#wheelGlow)"/>
<ellipse cx="135" cy="248" rx="1.1" ry="0.7" fill="url(#wheelGlow)"/>
<!-- Boot -->
<rect x="128" y="241" width="8" height="4.5" rx="0.7" fill="#ffcc85" stroke="#ff9336" stroke-width="0.6"/>
</g>
</g>
<!-- Head -->
<g>
<!-- Main head shape -->
<ellipse cx="137" cy="61" rx="22" ry="21" fill="url(#giraffeSpots)" stroke="#e6b140" stroke-width="2.5"/>
<!-- Cheek highlight -->
<ellipse cx="128" cy="63" rx="4.5" ry="2.8" fill="#fff" opacity="0.3"/>
<!-- Jaw -->
<ellipse cx="122" cy="73" rx="7.9" ry="7" fill="#f7e097" stroke="#e6b140" stroke-width="1"/>
<!-- Nostrils -->
<ellipse cx="125" cy="78.5" rx="1" ry="0.7" fill="#69421f"/>
<ellipse cx="120" cy="77.2" rx="0.9" ry="0.5" fill="#69421f"/>
<!-- Smile -->
<path d="M120,79 Q122,82 126,80.8" stroke="#814c21" stroke-width="1" fill="none"/>
<!-- Eye (left) -->
<ellipse cx="131" cy="65" rx="2.6" ry="3.3" fill="#fff"/>
<ellipse cx="132" cy="66" rx="1.3" ry="1.6" fill="#2c2a2e"/>
<circle cx="133" cy="65" r="0.6" fill="#fff"/>
<!-- Eye (right, smaller) -->
<ellipse cx="144" cy="62" rx="1.3" ry="1.8" fill="#fff"/>
<ellipse cx="144.7" cy="62.6" rx="0.7" ry="1" fill="#2c2a2e"/>
<!-- Blink highlight -->
<ellipse cx="138" cy="63" rx="0.6" ry="0.3" fill="#fff" opacity="0.2"/>
<!-- Horns -->
<rect x="132.5" y="41" width="3.2" height="13" rx="1.3" fill="#ffc09a" stroke="#ba8953" stroke-width="1"/>
<rect x="140" y="44" width="2.5" height="11" rx="1.1" fill="#ffc09a" stroke="#ba8953" stroke-width="1"/>
<ellipse cx="134" cy="41" rx="2" ry="2.3" fill="#854e1d"/>
<ellipse cx="141.3" cy="44" rx="1.6" ry="1.7" fill="#ab6f27"/>
<!-- Ears -->
<ellipse cx="123" cy="51" rx="5" ry="2.5" fill="#efc666" stroke="#e6b140" stroke-width="1"/>
<ellipse cx="153" cy="56" rx="5" ry="2.5" fill="#efc666" stroke="#e6b140" stroke-width="1"/>
<!-- Inner ears -->
<ellipse cx="125" cy="51" rx="2" ry="1" fill="#fff2e6" opacity="0.7"/>
<ellipse cx="155" cy="56" rx="2" ry="1" fill="#fff2e6" opacity="0.7"/>
<!-- Sunglasses for style -->
<rect x="134" y="58" width="13" height="6" rx="3" fill="#222" opacity="0.7"/>
<ellipse cx="140.5" cy="61" rx="3.5" ry="2.5" fill="#474747" opacity="0.45"/>
<ellipse cx="144" cy="61" rx="3.5" ry="2.3" fill="#0ff" opacity="0.12"/>
<rect x="145.5" y="60" width="2" height="2" rx="0.5" fill="#fff" opacity="0.2"/>
<rect x="134" y="60" width="2.2" height="2" rx="0.6" fill="#fff" opacity="0.19"/>
<rect x="132" y="61" width="3.7" height="1.1" rx="0.3" fill="#0ff" opacity="0.09"/>
</g>
</g>
<!-- Rainbow speed swish lines -->
<g>
<path d="M80,220 Q90,215 110,217" stroke="url(#rainbowRoad)" stroke-width="5" fill="none" opacity="0.75"/>
<path d="M150,200 Q160,210 190,205" stroke="url(#rainbowRoad)" stroke-width="3.5" fill="none" opacity="0.46"/>
<path d="M128,245 Q140,247 150,243" stroke="#fff" stroke-width="2" fill="none" opacity="0.19"/>
<path d="M160,250 Q180,247 180,230" stroke="url(#rainbowRoad)" stroke-width="2" fill="none" opacity="0.32"/>
</g>
<!-- Dreamy clouds -->
<ellipse cx="50" cy="60" rx="22" ry="11" fill="#fff" opacity="0.7"/>
<ellipse cx="70" cy="66" rx="14" ry="6" fill="#fff" opacity="0.46"/>
<ellipse cx="240" cy="33" rx="27" ry="12" fill="#fff" opacity="0.62"/>
<ellipse cx="215" cy="41" rx="11" ry="5" fill="#fff" opacity="0.37"/>
<!-- Sun glimmer -->
<circle cx="260" cy="25" r="12" fill="#f7e774" opacity="0.55"/>
<circle cx="260" cy="25" r="23" fill="#fff7ad" opacity="0.18"/>
</svg>Judge's Analysis
Player 2's submission demonstrates greater creativity, technical quality, and visual appeal.
The giraffe is fully depicted, with clear roller skates and detailed features, while the vibrant rainbow background enhances the composition.
Player 1's submission is minimalistic and lacks a complete representation of the giraffe, reducing adherence to the prompt and visual impact.
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
"Melting clock dripping from a tree branch at sunset."
"Treehouse on a cloud under a rainbow with one ladder reaching down to Earth."
"An octopus juggling flaming swords under the moonlight."
