Creative Challenge
"A clock melting over a flamingo's back"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#87CEEB" />
<stop offset="100%" stop-color="#E0F7FA" />
</linearGradient>
<linearGradient id="flamingoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFB6C1" />
<stop offset="100%" stop-color="#FF69B4" />
</linearGradient>
<linearGradient id="clockGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F5F5F5" />
<stop offset="100%" stop-color="#D3D3D3" />
</linearGradient>
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="2" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<clipPath id="meltMask">
<path d="M150,100 Q170,150 190,170 Q210,190 220,240 Q230,260 160,270 Q100,260 80,240 Q70,190 90,170 Q110,150 130,100 Z" />
</clipPath>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Water reflection -->
<ellipse cx="150" cy="260" rx="140" ry="30" fill="#81D4FA" opacity="0.6" />
<!-- Flamingo body -->
<path d="M120,180 C110,160 100,150 80,145 C60,140 70,120 90,125 C110,130 120,140 130,160 C135,170 140,180 120,180 Z" fill="url(#flamingoGradient)" filter="url(#dropShadow)" />
<!-- Flamingo neck -->
<path d="M90,125 C85,110 90,100 100,90 C110,80 120,70 130,60 C140,50 150,60 145,70 C140,80 130,90 125,100 C120,110 122,120 130,130 C140,142 145,150 140,160" fill="url(#flamingoGradient)" stroke="#FF69B4" stroke-width="1" filter="url(#dropShadow)" />
<!-- Flamingo head -->
<ellipse cx="130" cy="60" rx="12" ry="8" fill="url(#flamingoGradient)" />
<path d="M138,58 C145,56 150,58 145,62 C140,66 135,64 138,58" fill="#FF1493" />
<circle cx="126" cy="58" r="2" fill="#000" />
<!-- Flamingo legs -->
<line x1="120" y1="180" x2="110" y2="245" stroke="#FF69B4" stroke-width="3" />
<line x1="125" y1="180" x2="135" y2="240" stroke="#FF69B4" stroke-width="3" />
<path d="M110,245 C105,250 110,255 115,253" stroke="#FF69B4" stroke-width="3" fill="none" />
<path d="M135,240 C140,245 145,250 150,248" stroke="#FF69B4" stroke-width="3" fill="none" />
<!-- Flamingo wing -->
<path d="M120,160 C130,155 140,158 145,165 C150,172 145,178 135,175 C125,172 120,165 120,160 Z" fill="#FFB6C1" />
<!-- Melting clock base -->
<g filter="url(#dropShadow)">
<path d="M150,100 Q170,150 190,170 Q210,190 220,240 Q230,260 160,270 Q100,260 80,240 Q70,190 90,170 Q110,150 130,100 Z" fill="url(#clockGradient)" />
<!-- Clock face (clipped to melting shape) -->
<g clip-path="url(#meltMask)">
<circle cx="150" cy="130" r="40" fill="#FFF" stroke="#333" stroke-width="2" />
<!-- Clock numbers -->
<text x="147" y="102" font-size="10" text-anchor="middle">12</text>
<text x="178" y="133" font-size="10" text-anchor="middle">3</text>
<text x="147" y="164" font-size="10" text-anchor="middle">6</text>
<text x="116" y="133" font-size="10" text-anchor="middle">9</text>
<!-- Clock hands -->
<line x1="150" y1="130" x2="150" y2="105" stroke="#333" stroke-width="2" />
<line x1="150" y1="130" x2="170" y2="140" stroke="#333" stroke-width="2" />
<circle cx="150" cy="130" r="3" fill="#333" />
</g>
<!-- Melting drips -->
<path d="M220,240 Q225,270 215,290" fill="url(#clockGradient)" />
<path d="M180,270 Q185,285 175,295" fill="url(#clockGradient)" />
<path d="M120,270 Q125,285 115,295" fill="url(#clockGradient)" />
</g>
<!-- Additional dripping elements -->
<path d="M150,100 Q160,120 170,110 Q180,120 185,90" fill="url(#clockGradient)" filter="url(#dropShadow)" />
<path d="M130,100 Q120,120 110,110 Q100,120 95,90" fill="url(#clockGradient)" filter="url(#dropShadow)" />
<!-- Surreal elements -->
<path d="M210,80 Q240,60 230,100 Q220,130 210,80" fill="#FFD700" opacity="0.6" filter="url(#dropShadow)" />
<circle cx="240" cy="50" r="15" fill="#FFD700" opacity="0.8" />
<path d="M50,100 Q30,120 45,140 Q60,160 75,140 Q90,120 50,100" fill="#9C27B0" opacity="0.4" filter="url(#dropShadow)" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="clockGrad" cx="50%" cy="50%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#ffa857;stop-opacity:1"/>
</radialGradient>
<pattern id="feathers" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0 L5 5 L10 0" fill="#ffffff" opacity="0.2"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#clockGrad)"/>
<path d="M150 100 Q170 120 150 140 Q130 120 150 100" fill="#ff6b6b" opacity="0.8"/>
<path d="M120 80 Q140 100 160 80 Q180 60 160 40 Q140 60 120 40" fill="#ff6b6b" opacity="0.8"/>
<path d="M140 90 Q160 110 180 90 Q200 70 180 50 Q160 70 140 50" fill="#ff6b6b" opacity="0.8"/>
<g transform="translate(100,150)">
<path d="M0 0 Q50 50 100 0" fill="#ff6b6b"/>
<path d="M30 30 Q40 40 50 30" fill="#ffffff"/>
<path d="M10 10 Q20 20 30 10" fill="#ffffff"/>
</g>
<path d="M200 150 Q220 170 240 160" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<path d="M200 150 Q240 160 280 140" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<path d="M200 150 Q220 140 240 130" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<path d="M200 150 Q180 140 160 130" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<g transform="translate(100,150)">
<path d="M0 0 Q50 50 100 0" fill="#ff6b6b"/>
<path d="M30 30 Q40 40 50 30" fill="#ffffff"/>
<path d="M10 10 Q20 20 30 10" fill="#ffffff"/>
</g>
<path d="M100 200 Q120 220 140 200" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<path d="M100 200 Q140 210 180 200" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<path d="M100 200 Q80 210 60 200" stroke="#ff6b6b" stroke-width="4" fill="none"/>
<g transform="translate(150,150)">
<circle r="50" fill="url(#clockGrad)"/>
<path d="M0 0 L0 10 L10 10 L10 0" fill="#ff6b6b"/>
<path d="M20 20 L20 30 L30 30 L30 20" fill="#ff6b6b"/>
</g>
</svg>Judge's Analysis
Player 1's image clearly represents the prompt by depicting a melting clock over a flamingo's back.
The composition is creative and visually appealing, with distinct elements that are easily recognizable.
Player 2's image, while abstract and colorful, fails to clearly convey the concept of a clock or a flamingo, making it less successful in adhering to the given 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
"Watermelon on roller skates racing an orange on a skateboard"
"Cat surfing on a pizza slice in a cosmic sea"
"A whimsical clockwork tree with gears as leaves, in geometric style"
"A giraffe juggling planets in a cosmic circus tent"
"Whimsical snail taxi with a cityscape shell gliding through pastel clouds"
"A snail with a city skyline on its shell under a starry sky"
