Creative Challenge
"Polar bear on a tropical beach, sipping coconut drink under a palm tree"
<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:#00bfff; stop-opacity:1" />
<stop offset="100%" style="stop-color:#87cefa; stop-opacity:1" />
</linearGradient>
<radialGradient id="coconutGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#8b4513; stop-opacity:1" />
<stop offset="100%" style="stop-color:#deb887; stop-opacity:1" />
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<g>
<path d="M250,200 C240,180 220,180 200,200 C180,220 175,240 150,245 C125,250 110,230 100,230 C90,230 80,240 60,240 C30,240 0,220 0,270 C300,270 300,200 250,200 Z" fill="#f0e68c" />
<path d="M220,190 C220,150 190,140 180,160 C170,180 200,220 220,190 Z" fill="#8fbc8f" />
<path d="M210,190 C200,180 170,170 165,190 C160,210 180,220 190,210 C200,200 205,195 210,190 Z" fill="#fff" />
<path d="M130,230 C120,220 100,210 90,230 C80,250 140,250 130,230 Z" fill="#fff" stroke="#000" stroke-width="2"/>
<circle cx="135" cy="232" r="10" fill="black" />
<polygon points="200,190 215,202 205,210 190,198" fill="url(#coconutGradient)" />
<path d="M200,198 C190,210 180,210 175,200" fill="orange" />
<path d="M110,220 C100,220 90,210 80,210 C50,210 40,240 30,240 C40,260 70,250 100,240 C130,230 140,240 130,230" fill="#8b0000" />
<path d="M215,190 C220,185 230,190 220,195 C210,205 200,200 205,185 C210,170 200,150 215,170 C230,190 240,205 215,190" fill="#fff" />
<path d="M160,160 Q160,140 170,140 Q180,140 180,160 Q180,180 160,160" fill="#fff" />
<path d="M120,230 Q130,240 140,230 Q150,220 120,230" fill="#eee" />
</g>
<text x="10" y="290" font-family="Arial" font-size="15" fill="darkblue">Polar Bear's Tropical Getaway</text>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4AA5FF"/>
<stop offset="100%" style="stop-color:#87CEEB"/>
</linearGradient>
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#f4d03f"/>
<stop offset="100%" style="stop-color:#ffdb58"/>
</linearGradient>
<pattern id="waterPattern" width="20" height="10" patternUnits="userSpaceOnUse">
<path d="M0 5 Q5 0, 10 5 Q15 10, 20 5" fill="none" stroke="rgba(255,255,255,0.3)"/>
</pattern>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)"/>
<!-- Ocean -->
<rect x="0" y="150" width="300" height="100" fill="#2E86C1"/>
<rect x="0" y="150" width="300" height="100" fill="url(#waterPattern)"/>
<!-- Beach -->
<path d="M0 200 Q150 150 300 200 L300 300 L0 300 Z" fill="url(#sandGradient)"/>
<!-- Palm Tree -->
<path d="M200 180 C200 180 190 120 195 110" stroke="#5D4037" stroke-width="8" fill="none"/>
<path d="M195 110 C180 100 170 90 190 70" fill="#2E7D32"/>
<path d="M195 110 C210 100 220 90 230 80" fill="#2E7D32"/>
<path d="M195 110 C200 90 210 85 200 65" fill="#2E7D32"/>
<!-- Polar Bear -->
<g transform="translate(120,200)">
<ellipse cx="0" cy="0" rx="40" ry="30" fill="white"/>
<ellipse cx="-20" cy="-15" rx="15" ry="12" fill="white"/> <!-- Head -->
<circle cx="-25" cy="-18" r="2" fill="black"/> <!-- Eye -->
<ellipse cx="-30" cy="-15" rx="5" ry="3" fill="black"/> <!-- Nose -->
<path d="M20 10 Q25 0 30 10" stroke="white" stroke-width="8" fill="none"/> <!-- Tail -->
</g>
<!-- Coconut Drink -->
<g transform="translate(90,190)">
<path d="M0 0 L5 15 L-5 15 Z" fill="brown"/> <!-- Straw -->
<path d="M-8 15 Q0 13 8 15 L5 25 L-5 25 Z" fill="#8B4513"/> <!-- Coconut -->
<circle cx="0" cy="17" r="2" fill="#FFF"/> <!-- Highlight -->
</g>
<!-- Sun -->
<circle cx="50" cy="50" r="20" fill="yellow"/>
<g transform="translate(50,50)">
<path d="M-30 0 L30 0 M0 -30 L0 30 M-20 -20 L20 20 M-20 20 L20 -20" stroke="yellow" stroke-width="4"/>
</g>
<!-- Small waves -->
<path d="M20 170 Q30 165 40 170 Q50 175 60 170" stroke="#fff" fill="none" opacity="0.5"/>
<path d="M80 180 Q90 175 100 180 Q110 185 120 180" stroke="#fff" fill="none" opacity="0.5"/>
</svg>Judge's Analysis
Player 2's image better captures the prompt with a clear depiction of a polar bear on a tropical beach, complete with a palm tree and a coconut drink.
The composition is straightforward and visually appealing, with a well-defined setting and elements.
Player 1's submission is more abstract and lacks clarity in representing the scene described in 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
"A single raccoon juggling ancient, glowing runes in a moonlit forest"
"Flamingo wearing roller skates on a rainbow path"
"Ballerina balancing on a tightrope above a cityscape during a vibrant sunset"
"A disco ball moon over a city of dancing skyscrapers"
"Lemon-shaped hot air balloon over a surreal purple ocean"
"Moonlit jellyfish flying through a desert sky"
