Creative Challenge
"A flamingo on a unicycle juggling pineapples under a disco ball."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="flamingoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF69B4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF1493;stop-opacity:1" />
</linearGradient>
<radialGradient id="pineappleGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#DAA520;stop-opacity:1" />
</radialGradient>
<pattern id="discoPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="#A9A9A9"/>
<rect x="1" y="1" width="2" height="2" fill="#FFFFFF"/>
<rect x="5" y="5" width="2" height="2" fill="#FFFFFF"/>
<rect x="8" y="2" width="2" height="2" fill="#FFFFFF"/>
<rect x="2" y="8" width="2" height="2" fill="#FFFFFF"/>
</pattern>
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#1A2B3C"/>
<!-- Disco Ball -->
<circle cx="150" cy="50" r="40" fill="url(#discoPattern)" filter="url(#glow)"/>
<line x1="150" y1="50" x2="150" y2="10" stroke="#A9A9A9" stroke-width="2"/>
<!-- Unicycle -->
<circle cx="150" cy="250" r="30" fill="#808080"/>
<circle cx="150" cy="250" r="20" fill="#C0C0C0"/>
<line x1="150" y1="250" x2="150" y2="200" stroke="#808080" stroke-width="5"/>
<circle cx="150" cy="200" r="8" fill="#808080"/>
<ellipse cx="150" cy="195" rx="15" ry="5" fill="#A0522D"/>
<!-- Flamingo -->
<path d="M 150 195
Q 160 170 170 140
Q 180 100 160 80
Q 140 60 120 80
Q 100 100 110 140
Q 120 170 130 195 Z" fill="url(#flamingoGradient)"/>
<circle cx="140" cy="75" r="5" fill="#000"/> <!-- Eye -->
<path d="M 135 85 Q 140 95 150 90 Q 160 95 165 85 L 160 80 L 140 80 Z" fill="#000"/> <!-- Beak -->
<path d="M 145 195 L 150 220 L 140 230 L 130 210 Z" fill="url(#flamingoGradient)"/> <!-- Leg -->
<!-- Pineapples (Juggling) -->
<g transform="rotate(-10 150 150)">
<circle cx="100" cy="160" r="15" fill="url(#pineappleGradient)"/>
<path d="M 95 145 Q 100 140 105 145 L 102 150 L 98 150 Z" fill="#228B22"/>
<circle cx="100" cy="160" r="15" fill="url(#pineappleGradient)" transform="rotate(10 100 160)"/>
<path d="M 95 145 Q 100 140 105 145 L 102 150 L 98 150 Z" fill="#228B22" transform="rotate(10 100 160)"/>
</g>
<g transform="rotate(10 150 150)">
<circle cx="200" cy="160" r="15" fill="url(#pineappleGradient)"/>
<path d="M 195 145 Q 200 140 205 145 L 202 150 L 198 150 Z" fill="#228B22"/>
<circle cx="200" cy="160" r="15" fill="url(#pineappleGradient)" transform="rotate(-10 200 160)"/>
<path d="M 195 145 Q 200 140 205 145 L 202 150 L 198 150 Z" fill="#228B22" transform="rotate(-10 200 160)"/>
</g>
<g transform="translate(0 -20)">
<circle cx="150" cy="120" r="15" fill="url(#pineappleGradient)"/>
<path d="M 145 105 Q 150 100 155 105 L 152 110 L 148 110 Z" fill="#228B22"/>
<circle cx="150" cy="120" r="15" fill="url(#pineappleGradient)" transform="rotate(5 150 120)"/>
<path d="M 145 105 Q 150 100 155 105 L 152 110 L 148 110 Z" fill="#228B22" transform="rotate(5 150 120)"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Disco Ball Gradient -->
<radialGradient id="disco-ball-glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffbe6" />
<stop offset="55%" stop-color="#d6f8ff" />
<stop offset="100%" stop-color="#8eafff" />
</radialGradient>
<!-- Flamingo Body Gradient -->
<linearGradient id="flamingo-body" x1="0%" y1="0%" x2="100%" y2="80%">
<stop offset="0%" stop-color="#fe90b9" />
<stop offset="60%" stop-color="#ff489b" />
<stop offset="100%" stop-color="#ff4499" />
</linearGradient>
<!-- Pineapple Gradient -->
<radialGradient id="pineapple-skin" cx="60%" cy="40%" r="80%">
<stop offset="0%" stop-color="#ffffb2" />
<stop offset="65%" stop-color="#ffc93b" />
<stop offset="100%" stop-color="#dd8000" />
</radialGradient>
<!-- Unicycle Wheel Gradient -->
<linearGradient id="wheel-rim" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#90d4fc" />
<stop offset="100%" stop-color="#165e93" />
</linearGradient>
<!-- Flamingo Beak Gradient -->
<linearGradient id="flamingo-beak" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fee481" />
<stop offset="100%" stop-color="#ff7d7d" />
</linearGradient>
<!-- Wing Pattern -->
<pattern id="wing-feathers" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(22)">
<ellipse cx="2" cy="4" rx="2" ry="1" fill="#ffd2e1" />
<ellipse cx="6" cy="4" rx="2" ry="1" fill="#ff628e"/>
</pattern>
<!-- Spotlights -->
<radialGradient id="spotlight" cx="50%" cy="10%" r="100%">
<stop offset="0%" stop-color="#fffbe6" stop-opacity="0.9"/>
<stop offset="80%" stop-color="#fffbe6" stop-opacity="0.02"/>
<stop offset="100%" stop-color="#fffbe6" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#20224a"/>
<!-- Spotlights (under disco ball) -->
<ellipse cx="85" cy="55" rx="78" ry="110" fill="url(#spotlight)" opacity="0.34"/>
<ellipse cx="220" cy="55" rx="52" ry="110" fill="url(#spotlight)" opacity="0.22"/>
<!-- Disco Ball -->
<g>
<circle cx="150" cy="36" r="28" fill="url(#disco-ball-glow)" stroke="#e4e8ff" stroke-width="3"/>
<!-- Tiles -->
<g>
<g stroke="#c0d4f6" stroke-width="1">
<rect x="128" y="20" width="9" height="7" fill="#c9e4f8"/>
<rect x="173" y="20" width="10" height="7" fill="#a7c4f3"/>
<rect x="137" y="28" width="9" height="6" fill="#aed3fa"/>
<rect x="155" y="26" width="14" height="9" fill="#e1e8fd"/>
<rect x="140" y="41" width="16" height="7" fill="#c5caf7"/>
<rect x="159" y="37" width="13" height="8" fill="#f2fafb"/>
<rect x="134" y="47" width="13" height="7" fill="#dfd3fa"/>
<rect x="167" y="49" width="11" height="7" fill="#b6e1f6"/>
<rect x="148" y="21" width="9" height="7" fill="#c9f7f4" />
</g>
<!-- Highlights -->
<ellipse cx="146" cy="29" rx="18" ry="7" fill="#fff" opacity="0.22"/>
<ellipse cx="153" cy="43" rx="14" ry="4" fill="#fff" opacity="0.13"/>
</g>
<!-- Hanging cord -->
<rect x="147.5" y="5" width="5" height="17" fill="#b0cfff"/>
<!-- Star glimmers -->
<g>
<polygon points="157,18 159,24 165,25 160,28 161,34 157,30 152,34 153,28 148,25 154,24" fill="#fff" opacity="0.82"/>
<polygon points="132,37 133.5,41.5 138,42 134.5,44 135.5,48 132,45.5 128.5,48 129.5,44 126,42 130.5,41.5" fill="#fff" opacity="0.52"/>
<polygon points="168,41 169,44 172,45 170,47 170.5,50 168,48.5 165.5,50 166,47 164,45 167,44" fill="#fff" opacity="0.41"/>
</g>
</g>
<!-- Juggled Pineapples -->
<g>
<!-- Pineapple 1 (Left) -->
<g>
<ellipse cx="86" cy="100" rx="15" ry="22" fill="url(#pineapple-skin)" stroke="#b97904" stroke-width="2"/>
<!-- skin pattern -->
<g stroke="#ab6d0b" stroke-width="1">
<path d="M73,96 Q78,114 99,108" fill="none"/>
<path d="M71,104 Q79,122 98,119" fill="none"/>
<path d="M80,83 Q91,90 97,95" fill="none"/>
<path d="M74,119 Q85,125 96,118" fill="none"/>
</g>
<!-- Leaves -->
<g>
<path d="M85,76 Q82,68 90,78" fill="none" stroke="#127c3a" stroke-width="3"/>
<path d="M91,78 Q100,71 90,82" fill="none" stroke="#48e47e" stroke-width="3"/>
<path d="M83,80 Q77,66 89,80" fill="none" stroke="#41ae4a" stroke-width="2"/>
<ellipse cx="84" cy="76" rx="2.2" ry="6" fill="#8adb46" transform="rotate(-15 84 76)"/>
<ellipse cx="87" cy="77" rx="2" ry="6" fill="#6bcf31" transform="rotate(7 87 77)"/>
</g>
</g>
<!-- Pineapple 2 (Top) -->
<g>
<ellipse cx="149" cy="61" rx="13" ry="19" fill="url(#pineapple-skin)" stroke="#b97904" stroke-width="2"/>
<!-- skin pattern -->
<g stroke="#ab6d0b" stroke-width="1">
<path d="M137,62 Q146,84 160,71" fill="none"/>
<path d="M139,54 Q147,74 157,63" fill="none"/>
<path d="M142,68 Q158,68 155,74" fill="none"/>
</g>
<!-- Leaves -->
<g>
<path d="M149,42 Q151,32 153,49" fill="none" stroke="#127c3a" stroke-width="2"/>
<ellipse cx="151" cy="40" rx="1.5" ry="6" fill="#a6ff8b" transform="rotate(22 151 40)"/>
<ellipse cx="147" cy="44" rx="1.2" ry="4.5" fill="#6bcf31" transform="rotate(-16 147 44)"/>
</g>
</g>
<!-- Pineapple 3 (Right) -->
<g>
<ellipse cx="217" cy="105" rx="14" ry="20" fill="url(#pineapple-skin)" stroke="#b97904" stroke-width="2"/>
<!-- skin pattern -->
<g stroke="#ab6d0b" stroke-width="1">
<path d="M208,100 Q218,119 226,108" fill="none"/>
<path d="M210,110 Q219,127 227,114" fill="none"/>
<path d="M215,91 Q223,101 225,104" fill="none"/>
<path d="M207,119 Q222,128 222,110" fill="none"/>
</g>
<!-- Leaves -->
<g>
<path d="M218,83 Q212,77 221,89" fill="none" stroke="#127c3a" stroke-width="3"/>
<ellipse cx="215" cy="84" rx="2" ry="7" fill="#8adb46" transform="rotate(-8 215 84)"/>
<ellipse cx="221" cy="85" rx="2.8" ry="7" fill="#6bcf31" transform="rotate(11 221 85)"/>
</g>
</g>
</g>
<!-- Shadow below unicycle -->
<ellipse cx="150" cy="268" rx="46" ry="13" fill="#1c202f" opacity="0.52"/>
<!-- Unicycle -->
<g>
<!-- Wheel Rim -->
<circle cx="150" cy="245" r="36" fill="url(#wheel-rim)" stroke="#f2f9fb" stroke-width="4" />
<!-- Spokes -->
<g stroke="#d4f7ff" stroke-width="1.8">
<line x1="150" y1="245" x2="150" y2="209"/>
<line x1="150" y1="245" x2="178" y2="228"/>
<line x1="150" y1="245" x2="177" y2="261"/>
<line x1="150" y1="245" x2="151" y2="281"/>
<line x1="150" y1="245" x2="123" y2="261"/>
<line x1="150" y1="245" x2="122" y2="227"/>
</g>
<!-- Tire -->
<circle cx="150" cy="245" r="32.7" fill="none" stroke="#2c2b32" stroke-width="7"/>
<!-- Axle -->
<circle cx="150" cy="245" r="7" fill="#e1e0e5" stroke="#7c8ca4" stroke-width="2"/>
<!-- Fork -->
<rect x="146" y="169" width="8" height="50" rx="4" fill="#babcf3"/>
<rect x="145" y="218" width="10" height="10" rx="5" fill="#edfaff"/>
<!-- Pedal Arms -->
<rect x="151.5" y="274" width="3" height="22" rx="1.5" fill="#c0c0f8" transform="rotate(-35 153.5 285)"/>
<rect x="145.5" y="253" width="3" height="17" rx="1.5" fill="#dda0c8" transform="rotate(21 147 261.5)"/>
<!-- Pedals -->
<rect x="162" y="295" width="10" height="5" rx="2.5" fill="#75e286" opacity="0.88" transform="rotate(-26 167 297.5)"/>
<rect x="136" y="244" width="11" height="5" rx="2.5" fill="#49baf9" opacity="0.91" transform="rotate(21 141.5 246.5)"/>
<!-- Seat Tube -->
<rect x="138" y="155" width="24" height="18" rx="7" fill="#4e466b"/>
<rect x="143" y="172" width="14" height="12" rx="5" fill="#ff4177"/>
<!-- Seat -->
<ellipse cx="150" cy="155" rx="17" ry="7.5" fill="#343167" stroke="#f0a2e7" stroke-width="2"/>
<ellipse cx="150" cy="159" rx="12" ry="3.6" fill="#ffbac0" opacity="0.15"/>
</g>
<!-- Flamingo -->
<g>
<!-- Body -->
<ellipse cx="142" cy="178" rx="37" ry="23" fill="url(#flamingo-body)" stroke="#fc67bc" stroke-width="2"/>
<!-- Chest Shine -->
<ellipse cx="132" cy="180" rx="11" ry="6" fill="#fff" opacity="0.21"/>
<!-- Wing -->
<ellipse cx="160" cy="182" rx="20" ry="9" fill="url(#wing-feathers)" opacity="0.93" stroke="#da1b83" stroke-width="2" transform="rotate(12 160 182)"/>
<!-- Tail Feathers -->
<path d="M185,190 Q195,200 170,187 Q190,202 170,189" fill="none" stroke="#e85ba9" stroke-width="3" />
<!-- Neck -->
<path d="M147,196 Q119,160 155,109 Q180,85 189,116 Q191,126 178,124 Q169,124 162,134 Q148,151 167,187" fill="none" stroke="#fa65be" stroke-width="12" stroke-linecap="round"/>
<!-- Neck Shine -->
<path d="M151,192 Q122,156 167,116" fill="none" stroke="#fff" stroke-width="3.2" opacity="0.09"/>
<!-- Head -->
<ellipse cx="174" cy="103" rx="19" ry="15" fill="url(#flamingo-body)" stroke="#ff4499" stroke-width="2"/>
<!-- Eye -->
<ellipse cx="179" cy="109" rx="2.5" ry="4" fill="#312646"/>
<ellipse cx="180" cy="111" rx="1.1" ry="1.5" fill="#fff" opacity="0.8"/>
<!-- Cheek Highlight -->
<ellipse cx="172" cy="110" rx="3" ry="2" fill="#fff" opacity="0.13"/>
<!-- Beak -->
<g>
<!-- Main beak -->
<path d="M188,110 Q203,111 196,124 Q189,119 190,113" fill="url(#flamingo-beak)" stroke="#aa270b" stroke-width="1.5"/>
<!-- Beak tip -->
<path d="M197,121 Q200,133 187,120" fill="#17101d" stroke="#463029" stroke-width="1.3"/>
</g>
<!-- Head Feathers -->
<path d="M184,91 Q190,80 183,97" fill="none" stroke="#ea89e2" stroke-width="2"/>
<ellipse cx="191" cy="89" rx="2" ry="5" fill="#fc9dde" transform="rotate(12 191 89)"/>
<!-- Legs -->
<g>
<!-- Leg 1 (on pedal) -->
<path d="M144,207 Q138,275 165,294" fill="none" stroke="#fdcbf0" stroke-width="8" stroke-linecap="round"/>
<!-- Toes -->
<path d="M164,294 Q176,296 168,289" fill="none" stroke="#fe91bd" stroke-width="3"/>
<ellipse cx="166" cy="293" rx="3.2" ry="1" fill="#ffc6e7"/>
<!-- Leg 2 (balance) -->
<path d="M151,207 Q158,230 147,273" fill="none" stroke="#bd62d4" stroke-width="8" stroke-linecap="round"/>
<!-- Toes -->
<ellipse cx="146" cy="277" rx="3" ry="1" fill="#f6a9dd"/>
<ellipse cx="151" cy="274" rx="2.1" ry="0.9" fill="#ffe0fa"/>
</g>
<!-- Arms/Wings for juggling -->
<g>
<!-- Right Wing (throwing pineapple) -->
<path d="M177,165 Q219,124 218,105" fill="none" stroke="#ea438d" stroke-width="13" stroke-linecap="round"/>
<ellipse cx="215" cy="110" rx="8" ry="3.2" fill="#fd9bdc" opacity="0.29" transform="rotate(-15 215 110)"/>
<!-- Left Wing (catching pineapple) -->
<path d="M125,165 Q81,124 86,100" fill="none" stroke="#fd6bc3" stroke-width="14" stroke-linecap="round"/>
<ellipse cx="86" cy="109" rx="6" ry="2.2" fill="#ffe1f3" opacity="0.25" transform="rotate(-6 86 109)"/>
</g>
</g>
<!-- Light beams from disco ball -->
<g>
<polygon points="150,36 110,90 113,95 150,36" fill="#fffbe6" opacity="0.18"/>
<polygon points="150,36 160,99 163,97 150,36" fill="#a4f5fd" opacity="0.13"/>
<polygon points="150,36 177,70 181,75 150,36" fill="#ffdde2" opacity="0.12"/>
<polygon points="150,36 185,20 198,46 150,36" fill="#ffe9b3" opacity="0.12"/>
<polygon points="150,36 131,54 120,57 150,36" fill="#c7adff" opacity="0.08"/>
</g>
</svg>
Judge's Analysis
Player 2's submission demonstrates superior creativity, technical quality, and adherence to the prompt.
The flamingo is highly detailed with expressive features, and the juggling pineapples and disco ball are rendered with vibrant colors and dynamic lighting.
While Player 1's submission captures the concept, it lacks the complexity and visual appeal of Player 2's work.
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.