Creative Challenge
"A giraffe blowing bubblegum balloons in a sunny park."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sun gradient -->
<radialGradient id="sunGradient" cx="0.5" cy="0.5" r="0.7">
<stop offset="0%" stop-color="#fffbe9"/>
<stop offset="70%" stop-color="#ffef96"/>
<stop offset="100%" stop-color="#ffd200"/>
</radialGradient>
<!-- Sky gradient -->
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#85DFF7"/>
<stop offset="100%" stop-color="#fff3e3"/>
</linearGradient>
<!-- Grass gradient -->
<linearGradient id="grassGradient" x1="0" y1="0.4" x2="0" y2="1">
<stop offset="0%" stop-color="#bbf796"/>
<stop offset="45%" stop-color="#6cdb6d"/>
<stop offset="100%" stop-color="#2ca868"/>
</linearGradient>
<!-- Giraffe body gradient -->
<linearGradient id="giraffeBody" x1="0.5" y1="0" x2="0.3" y2="1">
<stop offset="0%" stop-color="#f4d96d"/>
<stop offset="100%" stop-color="#e8aa44"/>
</linearGradient>
<!-- Giraffe spot gradient -->
<radialGradient id="giraffeSpots" cx="0.4" cy="0.4" r="1">
<stop offset="15%" stop-color="#e16e12" />
<stop offset="90%" stop-color="#a35316" />
</radialGradient>
<!-- Tree trunk gradient -->
<linearGradient id="trunkGrad" x1="0" y1="0" x2="0.2" y2="1">
<stop offset="0%" stop-color="#ac7c47"/>
<stop offset="100%" stop-color="#865530"/>
</linearGradient>
<!-- Leaves gradient -->
<radialGradient id="leavesGrad" cx="0.6" cy="0.3" r="1">
<stop offset="0%" stop-color="#dbffc1"/>
<stop offset="90%" stop-color="#62ba5a"/>
</radialGradient>
<!-- Bubblegum balloon gradient -->
<radialGradient id="gum1" cx="0.3" cy="0.3" r="1">
<stop offset="0%" stop-color="#fff2fb"/>
<stop offset="70%" stop-color="#ff82c0"/>
<stop offset="100%" stop-color="#c7287c"/>
</radialGradient>
<radialGradient id="gum2" cx="0.7" cy="0.5" r="1">
<stop offset="0%" stop-color="#fff7fc"/>
<stop offset="60%" stop-color="#97e5ff"/>
<stop offset="100%" stop-color="#32a4bf"/>
</radialGradient>
<radialGradient id="gum3" cx="0.3" cy="0.3" r="1">
<stop offset="0%" stop-color="#fff9ed"/>
<stop offset="60%" stop-color="#ffe481"/>
<stop offset="100%" stop-color="#ffc100"/>
</radialGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="150%">
<feGaussianBlur stdDeviation="2"/>
</filter>
<!-- Cloud gradient -->
<radialGradient id="cloudGrad" cx="0.5" cy="0.4" r="1">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#e1ebff"/>
</radialGradient>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="180" fill="url(#skyGradient)" />
<!-- Sun -->
<circle cx="60" cy="45" r="35" fill="url(#sunGradient)" opacity="0.92"/>
<g>
<!-- Sunbeams -->
<g opacity="0.23">
<g>
<ellipse cx="60" cy="45" rx="55" ry="9" fill="#fffde0" transform="rotate(-10 60 45)" />
<ellipse cx="60" cy="45" rx="55" ry="8" fill="#fffbe7" transform="rotate(30 60 45)" />
<ellipse cx="60" cy="45" rx="55" ry="10" fill="#ffe070" transform="rotate(60 60 45)" />
</g>
</g>
<g opacity="0.11">
<ellipse cx="60" cy="45" rx="90" ry="15" fill="#ffe100"/>
</g>
</g>
<!-- Distant trees (background) -->
<g>
<ellipse cx="40" cy="150" rx="28" ry="13" fill="#abe394" opacity="0.5"/>
<ellipse cx="260" cy="160" rx="23" ry="9" fill="#9ce686" opacity="0.6"/>
<ellipse cx="220" cy="136" rx="16" ry="7" fill="#84dc7a" opacity="0.6"/>
</g>
<!-- Clouds -->
<g>
<ellipse cx="180" cy="42" rx="22" ry="9" fill="url(#cloudGrad)" opacity="0.78"/>
<ellipse cx="195" cy="49" rx="11" ry="5" fill="url(#cloudGrad)" opacity="0.72"/>
<ellipse cx="172" cy="47" rx="10" ry="4" fill="url(#cloudGrad)" opacity="0.7"/>
<ellipse cx="240" cy="34" rx="17" ry="7" fill="url(#cloudGrad)" opacity="0.64"/>
<ellipse cx="250" cy="39" rx="7" ry="3" fill="url(#cloudGrad)" opacity="0.45"/>
<ellipse cx="30" cy="35" rx="13" ry="6" fill="url(#cloudGrad)" opacity="0.6"/>
</g>
<!-- Park grass -->
<rect x="0" y="170" width="300" height="130" fill="url(#grassGradient)" />
<!-- Rolling hills -->
<ellipse cx="140" cy="198" rx="65" ry="35" fill="#98f2aa" opacity="0.2"/>
<ellipse cx="250" cy="205" rx="42" ry="19" fill="#55d685" opacity="0.20"/>
<ellipse cx="55" cy="215" rx="37" ry="12" fill="#b1ffa3" opacity="0.20"/>
<!-- Distant path -->
<path d="M118 210
Q130 250 144 300
Q151 247 185 230
Q153 222 118 210 Z"
fill="#fbe5c1" opacity="0.43"
/>
<!-- Trees (foreground, stylized lollipop trees for whimsy) -->
<g>
<!-- Left tree -->
<rect x="28" y="145" width="7" height="38" fill="url(#trunkGrad)" rx="2"/>
<ellipse cx="32" cy="144" rx="18" ry="16" fill="url(#leavesGrad)"/>
<ellipse cx="36" cy="135" rx="6" ry="5" fill="#b5fbbf" opacity="0.84"/>
<!-- Right tree -->
<rect x="254" y="172" width="8" height="34" fill="url(#trunkGrad)" rx="2"/>
<ellipse cx="259" cy="169" rx="13" ry="12" fill="url(#leavesGrad)" />
<ellipse cx="265" cy="164" rx="5" ry="4" fill="#b5fbbf" opacity="0.7"/>
</g>
<!-- Giraffe shadow -->
<ellipse cx="112" cy="246" rx="35" ry="9" fill="#4a9766" opacity="0.22" filter="url(#shadow)"/>
<!-- Giraffe group -->
<g id="giraffe" transform="translate(80 90)">
<!-- Body -->
<ellipse cx="32" cy="90" rx="27" ry="32" fill="url(#giraffeBody)" />
<!-- Thigh -->
<ellipse cx="32" cy="120" rx="16" ry="8" fill="url(#giraffeBody)" />
<!-- Back leg -->
<rect x="25" y="120" width="7" height="28" rx="4" fill="#db9741" />
<!-- Front leg -->
<rect x="43" y="122" width="7" height="28" rx="4" fill="#f7bb57" />
<!-- Hind hoof -->
<ellipse cx="28" cy="146" rx="4" ry="2" fill="#9e6e41" />
<!-- Front hoof -->
<ellipse cx="46.5" cy="149" rx="3.7" ry="1.8" fill="#b29263" />
<!-- Neck -->
<rect x="44" y="32" width="14" height="62" rx="8" fill="url(#giraffeBody)" stroke="#ecd96e" stroke-width="1.5"/>
<!-- Head -->
<ellipse cx="52" cy="22" rx="14" ry="13" fill="url(#giraffeBody)" />
<!-- Giraffe spots: body -->
<ellipse cx="40" cy="82" rx="7" ry="5.5" fill="url(#giraffeSpots)" />
<ellipse cx="25" cy="105" rx="5" ry="5" fill="url(#giraffeSpots)" />
<ellipse cx="33" cy="110" rx="4" ry="3.5" fill="url(#giraffeSpots)" />
<ellipse cx="37" cy="95" rx="3" ry="3.5" fill="url(#giraffeSpots)" />
<ellipse cx="44" cy="101" rx="3.3" ry="2.4" fill="url(#giraffeSpots)" />
<!-- Spots: neck -->
<ellipse cx="51" cy="60" rx="4" ry="2.4" fill="url(#giraffeSpots)" />
<ellipse cx="54" cy="48" rx="4" ry="2.2" fill="url(#giraffeSpots)" />
<ellipse cx="57" cy="70" rx="2" ry="1.3" fill="url(#giraffeSpots)" />
<!-- Ear right -->
<ellipse cx="62" cy="17" rx="3.5" ry="5.5" fill="#ffe6a9" />
<ellipse cx="62" cy="17" rx="2.0" ry="4.2" fill="#fff3d9" opacity="0.55"/>
<!-- Ear left -->
<ellipse cx="46" cy="17" rx="2.6" ry="4.1" fill="#ffe6a9" />
<ellipse cx="47" cy="16.7" rx="1.5" ry="3.0" fill="#fff3d9" opacity="0.48"/>
<!-- Ossicones -->
<rect x="56" y="0" width="2" height="10" rx="1" fill="#a35316"/>
<ellipse cx="57" cy="1.7" rx="2" ry="2.3" fill="#c78744"/>
<rect x="49" y="2" width="2" height="9" rx="1" fill="#a35316"/>
<ellipse cx="50" cy="2.8" rx="1.5" ry="2.1" fill="#c78744"/>
<!-- Tail -->
<path d="M19,114 Q12,127 25,129 Q22,119 19,114 z"
fill="#e8aa44"
stroke="#a35316"
stroke-width="1"
/>
<ellipse cx="25" cy="129" rx="2.3" ry="2" fill="#a35316" />
<!-- Eye -->
<ellipse cx="59" cy="24" rx="2.1" ry="2.3" fill="#46391b" />
<ellipse cx="59.4" cy="23.5" rx="0.7" ry="0.9" fill="#fff" opacity="0.8"/>
<!-- Nose and smile -->
<ellipse cx="66.5" cy="29.2" rx="2" ry="1.2" fill="#a35316" opacity="0.5" />
<path d="M65.5 32 Q66.9 33.8 63.2 35"
stroke="#a35316" stroke-width="1.3" fill="none"/>
<!-- Giggle blushes -->
<ellipse cx="63.5" cy="27" rx="2.5" ry="1.2" fill="#ffb2a8" opacity="0.44"/>
</g>
<!-- Bubblegum balloons: three of them, attached to giraffe's mouth by strings -->
<g>
<!-- Strings -->
<path d="M146 122 Q154 130 157 149" fill="none" stroke="#d58eb9" stroke-width="2.3" stroke-dasharray="2.5 2"/>
<path d="M146 122 Q145 142 136 167" fill="none" stroke="#76bfd3" stroke-width="2.2" stroke-dasharray="2 1"/>
<path d="M146 122 Q141 135 119 146" fill="none" stroke="#ece66e" stroke-width="2.1" stroke-dasharray="2.2 1.5"/>
<!-- Balloons -->
<ellipse cx="157" cy="149" rx="24" ry="22" fill="url(#gum1)" filter="url(#shadow)"/>
<ellipse cx="136" cy="167" rx="17" ry="16" fill="url(#gum2)" filter="url(#shadow)"/>
<ellipse cx="119" cy="146" rx="12" ry="12.5" fill="url(#gum3)" filter="url(#shadow)"/>
<!-- Balloon glares -->
<ellipse cx="167" cy="141" rx="7" ry="4" fill="#fff" opacity="0.32"/>
<ellipse cx="143" cy="159" rx="4" ry="2.3" fill="#fff" opacity="0.18"/>
<ellipse cx="125" cy="141" rx="2.9" ry="1.1" fill="#fff" opacity="0.17"/>
<!-- Balloon knots -->
<polygon points="150,132 154,139 156,137" fill="#bd158c" opacity="0.33"/>
<polygon points="135.5,159 136,166 138,164" fill="#368fa1" opacity="0.21"/>
<polygon points="117,143 119,147 121,144" fill="#ffe33a" opacity="0.20"/>
</g>
<!-- Bubble gum at giraffe's mouth -->
<ellipse cx="146" cy="122" rx="11" ry="10.2" fill="url(#gum1)" transform="rotate(-8 146 122)" filter="url(#shadow)" />
<ellipse cx="152" cy="117" rx="4.3" ry="2" fill="#fff" opacity="0.13"/>
<!-- Floating bubbles for whimsy -->
<g opacity="0.4">
<ellipse cx="165" cy="82" rx="7" ry="7" fill="url(#gum1)" />
<ellipse cx="132" cy="70" rx="3" ry="2.7" fill="url(#gum2)" />
<ellipse cx="125" cy="61" rx="2.5" ry="2.5" fill="url(#gum3)" />
<ellipse cx="172" cy="100" rx="4.2" ry="3.4" fill="url(#gum1)" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#B0E0E6;stop-opacity:1" />
</linearGradient>
<radialGradient id="bubbleGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFCCCB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF99CC;stop-opacity:1" />
</radialGradient>
<radialGradient id="grassGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#4CAF50;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8BC34A;stop-opacity:1" />
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#skyGradient)" />
<ellipse cx="150" cy="250" rx="150" ry="50" fill="url(#grassGradient)" />
<g transform="translate(120,80)">
<path d="M40,5 C60,-10 90,20 80,60 C70,100 30,120 10,80 C-10,40 20,15 40,5" fill="#FFC107" />
<circle cx="40" cy="5" r="25" fill="#FBC02D" />
<path d="M45,35 C70,20 100,50 80,70 C60,90 30,60 15,40 C10,35 30,10 45,35" fill="#FFEB3B" />
<text x="30" y="0" font-size="14" fill="#6A4E4D" font-weight="bold" text-anchor="middle">Giraffe</text>
<path d="M40,5 C45,35 75,45 65,80 C55,115 10,90 5,80 C-5,70 35,15 40,5" fill="#FFC107" />
</g>
<g transform="translate(140,130)">
<path d="M10,0 C10,-15 30,-15 30,0 C30,15 10,15 10,0 Z" fill="url(#bubbleGradient)" />
<path d="M70,-10 C80,-25 110,-25 110,-10 C110,5 90,5 70,-10 Z" fill="url(#bubbleGradient)" />
<path d="M150,0 C150,-15 170,-15 170,0 C170,15 150,15 150,0 Z" fill="url(#bubbleGradient)" />
<path d="M120,20 C120,5 140,5 140,20 C140,35 120,35 120,20 Z" fill="url(#bubbleGradient)" />
</g>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt, depicting a recognizable giraffe blowing colorful bubblegum balloons in a sunny park setting with trees and a bright sun.
The technical quality and visual appeal are stronger, with good use of gradients and a whimsical atmosphere.
Player 2's submission is less detailed and does not clearly convey a giraffe or the park environment as effectively, making it less aligned 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 octopus juggling planets under the sea."
"A floating island shaped like a sleeping cat, with a single tree growing on its back."
