Creative Challenge
"Surreal: Melting clock shaped like a dripping candle on a desert horizon"
<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="#ff7e5f"/>
<stop offset="100%" stop-color="#feb47b"/>
</linearGradient>
<linearGradient id="desertGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e2a76f"/>
<stop offset="100%" stop-color="#c68642"/>
</linearGradient>
<linearGradient id="clockGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5deb3"/>
<stop offset="100%" stop-color="#deb887"/>
</linearGradient>
<radialGradient id="clockShadow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(0,0,0,0.2)"/>
<stop offset="100%" stop-color="rgba(0,0,0,0.6)"/>
</radialGradient>
</defs>
<!-- Sky Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Desert Horizon -->
<ellipse cx="150" cy="280" rx="200" ry="40" fill="url(#desertGradient)" />
<!-- Melting Clock/Candle -->
<g id="meltingClock">
<!-- Clock Body as Candle -->
<path d="
M 100 150
C 100 100, 200 100, 200 150
L 190 150
C 190 120, 110 120, 110 150
Z
" fill="url(#clockGradient)" stroke="#a0522d" stroke-width="2" />
<!-- Clock Face -->
<circle cx="150" cy="150" r="30" fill="#fff8dc" stroke="#a0522d" stroke-width="2"/>
<!-- Clock Numbers -->
<text x="150" y="145" text-anchor="middle" font-size="12" fill="#a0522d">12</text>
<text x="150" y="165" text-anchor="middle" font-size="12" fill="#a0522d">6</text>
<text x="135" y="160" text-anchor="middle" font-size="12" fill="#a0522d">9</text>
<text x="165" y="160" text-anchor="middle" font-size="12" fill="#a0522d">3</text>
<!-- Clock Hands -->
<line x1="150" y1="150" x2="150" y2="130" stroke="#a0522d" stroke-width="2"/>
<line x1="150" y1="150" x2="165" y2="150" stroke="#a0522d" stroke-width="2"/>
<!-- Melting Drips -->
<path d="
M 120 150
C 125 160, 115 170, 130 180
C 135 185, 125 195, 140 200
Q 145 205, 130 210
Q 150 215, 140 230
" fill="none" stroke="url(#clockGradient)" stroke-width="4" />
<path d="
M 180 150
C 175 160, 185 170, 170 180
C 165 185, 175 195, 160 200
Q 155 205, 170 210
Q 150 215, 160 230
" fill="none" stroke="url(#clockGradient)" stroke-width="4" />
<!-- Wax Pool -->
<ellipse cx="150" cy="230" rx="40" ry="10" fill="#f5deb3" opacity="0.6"/>
<!-- Shadow -->
<ellipse cx="150" cy="230" rx="40" ry="10" fill="url(#clockShadow)" opacity="0.4"/>
</g>
<!-- Sun -->
<circle cx="250" cy="50" r="30" fill="#ffdd7e" />
<radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffacd" />
<stop offset="100%" stop-color="rgba(255, 221, 126, 0)" />
</radialGradient>
<circle cx="250" cy="50" r="40" fill="url(#sunGlow)" />
<!-- Sand Dunes -->
<path d="
M 0 280
Q 50 260, 100 280
T 200 280
T 300 280
V 300
H 0
Z
" fill="#c2b280" opacity="0.8"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient">
<stop offset="0%" stop-color="#1a0f3c"/>
<stop offset="100%" stop-color="#4a1010"/>
</linearGradient>
<radialGradient id="clockGradient">
<stop offset="0%" stop-color="#ff4400"/>
<stop offset="100%" stop-color="#ff1a00"/>
</radialGradient>
<pattern id="desertPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0 L5 5 L10 0 L10 10 L5 5 L0 10 Z" fill="#d4c082"/>
</pattern>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Sky -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Desert -->
<path d="M0 250 Q150 220 300 250 L300 300 L0 300 Z" fill="url(#desertPattern)"/>
<!-- Melting Clock/Candle -->
<path d="M150 150 Q180 160 200 170 Q220 180 230 190 Q240 200 230 210 Q220 220 200 210 Q180 200 160 210 Q140 220 130 210 Q120 200 110 190 Q100 180 90 170 Q80 160 70 150 Q60 140 50 130 Q40 120 30 110 Q20 100 150 150 Z"
fill="url(#clockGradient)"
filter="url(#glow)"/>
<!-- Candlewick -->
<path d="M150 150 C160 140 170 130 180 120 C190 110 200 100 210 90"
stroke="#8b0000"
stroke-width="2"
fill="none"/>
<!-- Drips -->
<path d="M180 160 Q190 170 200 180 Q210 190 220 200"
fill="#ff6633"
opacity="0.7"/>
<path d="M140 160 Q130 150 120 140 Q110 130 100 120"
fill="#ff6633"
opacity="0.7"/>
<!-- Heat Waves -->
<path d="M100 180 Q120 170 140 180 Q160 190 180 180"
stroke="#ff8866"
stroke-width="1"
opacity="0.5"
fill="none"/>
<path d="M200 180 Q220 170 240 180 Q260 190 280 180"
stroke="#ff8866"
stroke-width="1"
opacity="0.5"
fill="none"/>
<!-- Sun -->
<circle cx="280" cy="80" r="30" fill="#ff9933" filter="url(#glow)"/>
<!-- Shadow -->
<path d="M130 200 Q150 210 170 200 Q190 190 210 200"
fill="#333333"
opacity="0.3"/>
</svg>Judge's Analysis
Player 1's image effectively captures the surreal theme with a clear depiction of a clock melting like a candle on a desert horizon.
The warm color palette complements the desert setting, and the composition is both creative and technically sound.
Player 2's image, while visually striking with its bold colors, is less clear in conveying the specific prompt of a melting clock shaped like a dripping candle.
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
"Rainbow forest with trees playing musical instruments"
"Clock-faced tree with melting leaf numbers"
"Fish wearing top hats juggling starfish in a coral circus"
"Clock with mismatched hands inside a floating teacup"
"Giraffe surfing on a giant wave under a starry night sky"
"A giraffe wearing a diving suit, surrounded by coral reefs and sea creatures"
