Creative Challenge
"A clock melting over a campfire under a starry sky."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0a0a2a"/>
<stop offset="100%" stop-color="#2b1b3b"/>
</linearGradient>
<radialGradient id="flameGrad" cx="50%" cy="80%" r="50%">
<stop offset="0%" stop-color="#ffd700"/>
<stop offset="60%" stop-color="#ff8c00"/>
<stop offset="100%" stop-color="#ff4500"/>
</radialGradient>
<pattern id="wood" patternUnits="userSpaceOnUse" width="20" height="20">
<rect width="20" height="20" fill="#8b5a2b"/>
<path d="M0,5 L20,5 M0,15 L20,15" stroke="#6b3e1e" stroke-width="2"/>
</pattern>
<filter id="blurSmall">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
</filter>
</defs>
<!-- Night sky -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Stars -->
<g fill="white" filter="url(#blurSmall)" opacity="0.9">
<circle cx="20" cy="30" r="1.5"/>
<circle cx="50" cy="60" r="1"/>
<circle cx="110" cy="20" r="1.2"/>
<circle cx="160" cy="50" r="1"/>
<circle cx="210" cy="30" r="1.5"/>
<circle cx="260" cy="70" r="1"/>
<circle cx="280" cy="20" r="1.2"/>
<circle cx="240" cy="110" r="1"/>
<circle cx="180" cy="90" r="1"/>
<circle cx="130" cy="100" r="1.3"/>
<circle cx="80" cy="120" r="1"/>
<circle cx="40" cy="90" r="1.2"/>
</g>
<!-- Campfire logs -->
<g>
<rect x="90" y="220" width="140" height="20" fill="url(#wood)" transform="rotate(-15 160 230)"/>
<rect x="90" y="220" width="140" height="20" fill="url(#wood)" transform="rotate(15 160 230)"/>
</g>
<!-- Flames -->
<g>
<path d="M160,210 C150,180 180,160 170,130 C180,150 200,140 195,170 C210,155 220,180 200,200 C190,215 165,215 160,210 Z" fill="url(#flameGrad)" />
<path d="M160,210 C155,190 175,175 165,145 C175,160 185,150 180,175 C190,165 200,185 185,195 C175,205 165,200 160,210 Z" fill="#ffa500" opacity="0.6"/>
</g>
<!-- Melting Clock -->
<g>
<!-- Dripping base -->
<path d="M130,150 C125,165 135,200 160,215 C185,230 200,180 185,150 C180,140 160,135 130,150 Z" fill="#fff8e1" stroke="#e0d5c0" stroke-width="2"/>
<!-- Clock face -->
<g transform="rotate(8 160 170)">
<circle cx="160" cy="170" r="40" fill="#fff5e6" stroke="#e0d5c0" stroke-width="3"/>
<text x="160" y="132" text-anchor="middle" font-size="12" fill="#333">12</text>
<text x="198" y="173" text-anchor="middle" font-size="12" fill="#333">3</text>
<text x="160" y="213" text-anchor="middle" font-size="12" fill="#333">6</text>
<text x="122" y="173" text-anchor="middle" font-size="12" fill="#333">9</text>
<line x1="160" y1="170" x2="160" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<line x1="160" y1="170" x2="185" y2="170" stroke="#333" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- Extra drips -->
<ellipse cx="172" cy="212" rx="5" ry="10" fill="#fff8e1" opacity="0.9"/>
<ellipse cx="148" cy="222" rx="4" ry="8" fill="#fff8e1" opacity="0.9"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with starry sky -->
<defs>
<radialGradient id="starsGrad" cx="150" cy="150" r="150" fx="150" fy="150">
<stop offset="0" stop-color="#1a1a2c" stop-opacity="1"/>
<stop offset="1" stop-color="#0a0a1a" stop-opacity="1"/>
</radialGradient>
<path id="starPath" d="M2 0l2 2h8l-4 4-6 2-2-2-6-6 4-4 6-2"/>
</defs>
<rect width="300" height="300" fill="url(#starsGrad)"/>
<!-- Stars -->
<g id="stars">
<use href="#starPath" x="20" y="20" fill="white" opacity="0.6"/>
<use href="#starPath" x="80" y="30" fill="white" opacity="0.8"/>
<use href="#starPath" x="120" y="25" fill="white" opacity="0.7"/>
<use href="#starPath" x="200" y="20" fill="white" opacity="0.5"/>
<use href="#starPath" x="250" y="40" fill="white" opacity="0.9"/>
</g>
<!-- Campfire -->
<g id="campfire">
<path d="M150 250c0-10-10-20-20-20h40c10 0 10 10 10 20v40c0 10-10 20-20 20h-40c-10 0-10-10-10-20v-40z"
fill="#e67e22" opacity="0.8"/>
<path d="M150 270c0-5 5-10 10-10h20c5 0 10 5 10 10v20c0 5-5 10-10 10h-20c-5 0-10-5-10-10v-20z"
fill="#e74c3c" opacity="0.8"/>
<path d="M140 280c0-5-5-10-10-10h-20c-5 0-10 5-10 10v20c0 5 5 10 10 10h20c5 0 10-5 10-10v-20z"
fill="#e67e22" opacity="0.8"/>
</g>
<!-- Flames -->
<g id="flames">
<path d="M140 240c0 10 10 20 20 20h40c10 0 10-10 10-20v-40c0-10-10-20-20-20h-40c-10 0-10 10-10 20v40z"
fill="#f39c12" opacity="0.8"/>
<path d="M150 230c0 5 5 10 10 10h20c5 0 10-5 10-10v-20c0-5-5-10-10-10h-20c-5 0-10 5-10 10v20z"
fill="#f1c40f" opacity="0.8"/>
<path d="M160 235c0 3 3 6 6 6h10c3 0 6-3 6-6v-10c0-3-3-6-6-6h-10c-3 0-6 3-6 6v10z"
fill="#f1c40f" opacity="0.8"/>
</g>
<!-- Melting Clock -->
<g id="clock">
<path d="M175 180c0-15-15-30-30-30s-30 15-30 30 15 30 30 30 30-15 30-30zm-30 0c0 5-5 10-10 10s-10-5-10-10 10-10 10 10zm-25-40c0-5 5-10 10-10s10 5 10 10-5 10-10 10-10-5-10-10zm-35-20c0-5 5-10 10-10s10 5 10 10-5 10-10 10-10-5-10-10zm-25 0c0-5 5-10 10-10s10 5 10 10-5 10-10 10-10-5-10-10zm-35-20c0-5 5-10 10-10s10 5 10 10-5 10-10 10-10-5-10-10zm-25 0c0-5 5-10 10-10s10 5 10 10-5 10-10 10-10-5-10-10z"
fill="#2c3e50" transform="rotate(45 150 150)"/>
<path d="M150 150c-15 0-30-15-30-30s15-30 30-30 30 15 30 30-15 30-30 30zm0-60c0 15-15 30-30 30s-30-15-30-30 15-30 30-30 30 15 30 30z"
fill="#2c3e50" opacity="0.7"/>
<path d="M150 150c0 5 5 10 10 10s10-5 10-10-5-10-10-10-10 5-10 10z"
fill="#2c3e50" transform="rotate(90 150 150)"/>
</g>
<!-- Drips -->
<g id="drips">
<path d="M140 200c0-10-10-20-20-20s-20 10-20 20 10 20 20 20 20-10 20-20z"
fill="#2c3e50" opacity="0.5"/>
<path d="M160 200c0-10-10-20-20-20s-20 10-20 20 10 20 20 20 20-10 20-20z"
fill="#2c3e50" opacity="0.5"/>
</g>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt, clearly depicting a melting clock over a campfire under a starry sky.
The visual elements are well-organized and the concept is directly represented.
Player 2's image is more abstract, lacking key elements like the clock, making it less effective in fulfilling the prompt despite its creativity.
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 flamingo wearing a crown, standing on a stack of pancakes."
"Rocketship shaped like a fish leaping out of a cupcake galaxy."
"A floating island with a single tree, roots dangling into the clouds below."
"A lizard wearing roller skates on a tightrope under a crescent moon."
