Creative Challenge
"A giraffe wearing a vintage diving helmet, peeking out of a giant teacup"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="cupGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#fbc2eb;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e4b5f1;stop-opacity:1" />
</linearGradient>
<radialGradient id="giraffeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#e4b5f1;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d0b650;stop-opacity:1" />
</radialGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="3" dy="3" result="offsetblur" />
<feFlood flood-color="rgba(0, 0, 0, 0.3)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g>
<path d="M 75 210 Q 150 250, 225 210 Q 250 190, 245 170 Q 220 170, 220 160 Q 210 150, 200 160 Q 180 145, 150 150 Q 125 125, 105 160 Q 85 150, 50 170 Q 45 180, 75 210 Z" fill="url(#cupGradient)" filter="url(#shadow)"/>
<circle cx="150" cy="230" r="5" fill="#8f5b4c" />
<circle cx="120" cy="230" r="5" fill="#8f5b4c" />
</g>
<g>
<path d="M 135 150 C 140 130, 180 130, 185 150 Q 185 170, 155 170 Q 150 160, 135 150 Z" fill="url(#giraffeGradient)" />
<path d="M 150 140 Q 145 135, 147 128 Q 150 125, 155 128 Q 159 135, 150 140 Z" fill="#f1c40f" />
<path d="M 100 160 Q 120 130, 145 130 Q 160 140, 155 160 Q 140 155, 120 160 Q 105 170, 100 160 Z" fill="#e4b5f1" />
<path d="M 135 110 Q 170 60, 145 40 Q 140 35, 135 40 Q 130 35, 125 40 Q 100 60, 135 110 Z" fill="url(#giraffeGradient)" />
</g>
<g>
<path d="M 165 85 Q 175 80, 170 70 Q 160 75, 165 85 Z" fill="#f1c40f" />
<path d="M 155 75 Q 165 70, 160 60 Q 150 65, 155 75 Z" fill="#f1c40f" />
</g>
<g>
<path d="M 135 100 Q 130 90, 140 88 Q 135 80, 145 85 Q 150 90, 135 100 Z" fill="#d45300" />
<circle cx="125" cy="160" r="3" fill="#d63031" />
<circle cx="155" cy="160" r="3" fill="#d63031" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="teacupGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f3f0ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d4c8ff;stop-opacity:1" />
</linearGradient>
<linearGradient id="teaGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#c2a775;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8c7851;stop-opacity:1" />
</linearGradient>
<linearGradient id="giraffeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f8d878;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e6b840;stop-opacity:1" />
</linearGradient>
<linearGradient id="helmetGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#c09b6e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8a6e4e;stop-opacity:1" />
</linearGradient>
<pattern id="spots" width="40" height="40" patternUnits="userSpaceOnUse">
<circle cx="20" cy="20" r="8" fill="#b3842b" />
</pattern>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" />
<feOffset dx="3" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="steamFilter" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#e9f5ff" />
<!-- Saucer -->
<ellipse cx="150" cy="260" rx="100" ry="20" fill="#d4c8ff" filter="url(#shadow)" />
<!-- Teacup -->
<path d="M70 170 Q 70 230 150 230 Q 230 230 230 170 L 230 140 Q 230 110 200 110 L 100 110 Q 70 110 70 140 Z" fill="url(#teacupGradient)" stroke="#b2a8d8" stroke-width="2" filter="url(#shadow)" />
<!-- Tea inside cup -->
<path d="M80 170 Q 80 220 150 220 Q 220 220 220 170 L 220 160 Q 150 180 80 160 Z" fill="url(#teaGradient)" />
<!-- Cup handle -->
<path d="M230 150 Q 260 150 260 180 Q 260 210 230 210" fill="none" stroke="#b2a8d8" stroke-width="8" stroke-linecap="round" />
<!-- Tea design decorations -->
<circle cx="110" cy="190" r="10" fill="none" stroke="#f3f0ff" stroke-width="1" opacity="0.6" />
<circle cx="170" cy="180" r="15" fill="none" stroke="#f3f0ff" stroke-width="1" opacity="0.6" />
<circle cx="140" cy="195" r="8" fill="none" stroke="#f3f0ff" stroke-width="1" opacity="0.6" />
<!-- Steam -->
<path d="M110 160 Q 115 145 105 135 Q 95 125 105 115" fill="none" stroke="white" stroke-width="3" opacity="0.7" filter="url(#steamFilter)" />
<path d="M140 160 Q 145 140 135 130 Q 125 120 135 110" fill="none" stroke="white" stroke-width="3" opacity="0.7" filter="url(#steamFilter)" />
<path d="M170 160 Q 175 145 165 135 Q 155 125 165 115" fill="none" stroke="white" stroke-width="3" opacity="0.7" filter="url(#steamFilter)" />
<!-- Giraffe body in teacup -->
<path d="M120 175 Q 140 190 160 175 Q 170 160 165 140 Q 160 120 145 110 Q 130 100 120 110 Q 110 120 115 140 Q 110 160 120 175 Z" fill="url(#giraffeGradient)" stroke="#e6af2e" stroke-width="1" />
<path d="M120 175 Q 140 190 160 175 Q 170 160 165 140 Q 160 120 145 110 Q 130 100 120 110 Q 110 120 115 140 Q 110 160 120 175 Z" fill="url(#pattern)" fill-opacity="0.5" />
<!-- Giraffe spots -->
<g opacity="0.9">
<circle cx="125" cy="130" r="5" fill="#b3842b" />
<circle cx="145" cy="125" r="4" fill="#b3842b" />
<circle cx="155" cy="145" r="6" fill="#b3842b" />
<circle cx="135" cy="155" r="5" fill="#b3842b" />
<circle cx="125" cy="150" r="3" fill="#b3842b" />
<circle cx="150" cy="160" r="4" fill="#b3842b" />
</g>
<!-- Vintage diving helmet -->
<circle cx="140" cy="95" r="30" fill="url(#helmetGradient)" stroke="#8a6e4e" stroke-width="2" />
<path d="M115 95 L 110 95 Q 105 105 110 115 L 115 115" fill="none" stroke="#8a6e4e" stroke-width="3" />
<path d="M165 95 L 170 95 Q 175 105 170 115 L 165 115" fill="none" stroke="#8a6e4e" stroke-width="3" />
<!-- Helmet bolts -->
<circle cx="120" cy="85" r="3" fill="#5c4933" />
<circle cx="120" cy="105" r="3" fill="#5c4933" />
<circle cx="160" cy="85" r="3" fill="#5c4933" />
<circle cx="160" cy="105" r="3" fill="#5c4933" />
<!-- Helmet window -->
<ellipse cx="140" cy="95" rx="15" ry="12" fill="#a7ddf9" stroke="#8a6e4e" stroke-width="2" />
<!-- Giraffe face in helmet -->
<ellipse cx="140" cy="97" rx="10" ry="8" fill="#f8d878" />
<circle cx="135" cy="94" r="2" fill="black" />
<circle cx="145" cy="94" r="2" fill="black" />
<path d="M137 102 Q 140 104 143 102" fill="none" stroke="black" stroke-width="1" />
<!-- Giraffe small horns -->
<path d="M134 85 L 132 78" stroke="#8a6e4e" stroke-width="2" stroke-linecap="round" />
<path d="M146 85 L 148 78" stroke="#8a6e4e" stroke-width="2" stroke-linecap="round" />
<circle cx="132" cy="77" r="2" fill="#8a6e4e" />
<circle cx="148" cy="77" r="2" fill="#8a6e4e" />
<!-- Cup edge details -->
<path d="M70 140 Q 150 160 230 140" fill="none" stroke="#b2a8d8" stroke-width="4" />
<!-- Teacup pattern details -->
<path d="M90 135 Q 95 120 110 125" fill="none" stroke="#b2a8d8" stroke-width="1" opacity="0.7" />
<path d="M190 125 Q 205 120 210 135" fill="none" stroke="#b2a8d8" stroke-width="1" opacity="0.7" />
<path d="M100 200 Q 150 210 200 200" fill="none" stroke="#b2a8d8" stroke-width="1" opacity="0.5" />
</svg>Judge's Analysis
Player 2's submission adheres closely to the prompt by clearly depicting a giraffe wearing a vintage diving helmet inside a teacup.
The technical quality and compositional strength are superior, with clean lines and a cohesive design.
Player 1's submission, while creative, lacks clarity and detail, making it less successful in meeting the prompt's criteria.
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
"Flamingo in a tuxedo, tap-dancing on a lilypad"
"Flying cat playing a trumpet in a starry skyline"
"A sun setting behind a skyline of teacups"
"Cloud with one quirky face winking"
"Dancing Cactus in a Tuxedo"
"A giraffe wearing a top hat, juggling planets in space"
