Creative Challenge
"A clock melting into a desert landscape, surrealist style"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="desertGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FBD36D"/>
<stop offset="100%" stop-color="#D77B5F"/>
</linearGradient>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFCFDF"/>
<stop offset="100%" stop-color="#FFD1C4"/>
</linearGradient>
<radialGradient id="clockGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFE48F"/>
<stop offset="100%" stop-color="#FFD700"/>
</radialGradient>
<pattern id="clockNumbers" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<text x="0" y="10" font-family="Verdana" font-size="14" fill="#333">3</text>
</pattern>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="150" fill="url(#skyGradient)" />
<!-- Desert -->
<path d="M0,150 Q75,130 150,150 T300,150 L300,300 L0,300 Z" fill="url(#desertGradient)" />
<!-- Melting Clock -->
<g transform="translate(100, 100)">
<ellipse cx="50" cy="50" rx="55" ry="65" fill="url(#clockGradient)" stroke="#EFB43F" stroke-width="2"/>
<ellipse cx="45" cy="60" rx="50" ry="55" fill="url(#clockNumbers)" opacity="0.2"/>
<path d="M50,80 Q55,85 60,90 T50,130 T55,155" fill="none" stroke="#8B4513" stroke-width="3"/>
<line x1="50" y1="50" x2="80" y2="70" stroke="#333" stroke-width="2"/>
<line x1="50" y1="50" x2="75" y2="40" stroke="#333" stroke-width="2"/>
<circle cx="50" cy="50" r="3" fill="#333"/>
</g>
<!-- Surreal Melting Effect -->
<path d="M120,130 Q125,145 130,150 T140,180 T145,230" fill="none" stroke="#EFB43F" stroke-width="5"/>
<!-- Sun Setting Behind the Deserts -->
<circle cx="240" cy="60" r="25" fill="url(#clockGradient)" opacity="0.7"/>
<!-- Shadows on the Sand -->
<ellipse cx="145" cy="270" rx="40" ry="12" fill="#E1A267" opacity="0.3"/>
<ellipse cx="275" cy="290" rx="60" ry="15" fill="#E1A267" opacity="0.3"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Definitions for gradients and patterns -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FFDEE9"/>
<stop offset="100%" stop-color="#B5FFFC"/>
</linearGradient>
<linearGradient id="desertGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#FDC830"/>
<stop offset="50%" stop-color="#F37335"/>
<stop offset="100%" stop-color="#FDC830"/>
</linearGradient>
<radialGradient id="clockFaceGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF7A1"/>
<stop offset="100%" stop-color="#FDB813"/>
</radialGradient>
<filter id="meltingBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
</filter>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="150" fill="url(#skyGradient)"/>
<!-- Desert ground -->
<rect x="0" y="150" width="300" height="150" fill="url(#desertGradient)"/>
<!-- Surreal melting clock body -->
<g filter="url(#meltingBlur)">
<!-- Clock face with melting effect -->
<path d="M150,80
C190,80 210,120 210,150
C210,180 190,220 150,220
C110,220 90,180 90,150
C90,120 110,80 150,80
Z
M150,80
C145,60 185,60 180,80
M90,150
C70,155 70,195 90,190
M210,150
C230,145 230,185 210,190" fill="url(#clockFaceGradient)" stroke="#D49A3E" stroke-width="2"/>
<!-- Clock hands (melting and distorted) -->
<line x1="150" y1="150" x2="150" y2="110" stroke="#5A4E3C" stroke-width="3" stroke-linecap="round" />
<line x1="150" y1="150" x2="185" y2="150" stroke="#5A4E3C" stroke-width="3" stroke-linecap="round" />
</g>
<!-- Melting drips -->
<g fill="url(#clockFaceGradient)" stroke="#D49A3E" stroke-width="2">
<path d="M190,180
Q195,195 190,210
Q185,225 180,210
Q175,195 180,180 Z" />
<path d="M120,180
Q115,195 120,210
Q125,225 130,210
Q135,195 130,180 Z" />
</g>
<!-- Desert details: dunes and surreal elements -->
<path d="M0,170
Q50,160 100,175
T200,170
T300,175
L300,300 L0,300 Z" fill="rgba(255,255,255,0.2)"/>
<circle cx="260" cy="50" r="12" fill="rgba(255, 255, 255, 0.7)" />
<!-- Optional: surreal tree element -->
<g transform="translate(30,130)">
<path d="M0,0
C10,-20 20,-20 30,0
L25,0
C17,-15 13,-15 5,0
Z" fill="#8B4513"/>
<ellipse cx="15" cy="-10" rx="20" ry="8" fill="rgba(34,139,34,0.6)" />
</g>
<!-- Adding a subtle sun behind the melting clock -->
<radialGradient id="sunGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(255,255,200,0.8)"/>
<stop offset="100%" stop-color="rgba(255,255,200,0)"/>
</radialGradient>
<circle cx="150" cy="80" r="40" fill="url(#sunGradient)" />
</svg>Judge's Analysis
Player 1's image captures the surrealist style effectively with a clock melting into the desert landscape, creating a dreamlike quality.
The smooth gradient and the distorted clock hands enhance the theme, demonstrating creativity and adherence to the prompt.
Player 2's submission, while visually appealing, lacks the same level of surreal distortion, making it less impactful in conveying the theme.
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
"Giraffe in a UFO knitting a rainbow scarf"
"Sky-high jellyfish floating above a busy cityscape"
"A clock face made of melting candles"
"A giraffe with a fishbowl head, swimming in a jellybean sea"
"Giraffe on roller skates juggling flaming pizzas under a disco ball"
"Three-eyed cat juggling planets in a void"
