Creative Challenge
"A melting clock dripping off a cactus in a desert sunset."
<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%" stop-color="#FF5733" />
<stop offset="50%" stop-color="#FFC300" />
<stop offset="100%" stop-color="#DAF7A6" />
</linearGradient>
<radialGradient id="clockGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FFC107" />
<stop offset="100%" stop-color="#FFA000" />
</radialGradient>
<pattern id="cactusTexture" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="#228B22" />
<circle cx="5" cy="5" r="2" fill="#006400" />
<circle cx="15" cy="12" r="3" fill="#006400" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<path d="M150 150 C 170 120, 190 100, 150 80 C 110 60, 70 80, 50 120 C 30 160, 70 220, 150 240 C 230 260, 270 220, 250 180 C 230 140, 170 160, 150 150 Z" fill="url(#cactusTexture)" stroke="#006400" stroke-width="3" />
<g transform="translate(140, 120)">
<ellipse cx="0" cy="0" rx="30" ry="20" fill="url(#clockGradient)" transform="rotate(-20)" />
<path d="M 0 -10 L 10 0 L 0 10 Z" fill="#000" transform="rotate(90)" />
<path d="M -10 0 L 10 0" stroke="#000" stroke-width="2" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="60s" repeatCount="indefinite" />
</g>
<g transform="translate(160, 140)">
<path d="M 0 0 C 10 10, 20 20, 30 10 C 40 0, 50 10, 60 0" fill="none" stroke="orange" stroke-width="3" stroke-linecap="round" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 20" dur="5s" repeatCount="indefinite" />
</g>
<ellipse cx="170" cy="160" rx="5" ry="10" fill="orange" transform="rotate(-20)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#663399"/>
<stop offset="50%" stop-color="#FF5E5B"/>
<stop offset="100%" stop-color="#FFB347"/>
</linearGradient>
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FFEB3B"/>
<stop offset="100%" stop-color="#FF9800"/>
</radialGradient>
<linearGradient id="sandGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#FFD54F"/>
<stop offset="100%" stop-color="#FFB300"/>
</linearGradient>
<linearGradient id="cactusGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#A5D6A7"/>
<stop offset="100%" stop-color="#2E7D32"/>
</linearGradient>
<radialGradient id="clockGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFFDE7"/>
<stop offset="40%" stop-color="#FFF176"/>
<stop offset="100%" stop-color="#F9A825"/>
</radialGradient>
<pattern id="spikePattern" patternUnits="userSpaceOnUse" width="10" height="20" patternTransform="rotate(15) scale(0.7)">
<path d="M0,10 L5,10" stroke="#A5D6A7" stroke-width="1"/>
</pattern>
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
<feOffset in="blur" dx="2" dy="2" result="offsetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<clipPath id="cactusClip">
<path d="M145,300 L155,300 L155,170 C155,160 145,160 145,170 Z"/>
<path d="M150,250 C150,235 120,235 120,255 C120,275 150,275 150,265 Z"/>
<path d="M145,210 C145,195 180,195 180,220 C180,245 145,245 145,230 Z"/>
</clipPath>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Birds silhouettes -->
<path d="M220,150 C225,145 230,150 235,145" stroke="#444" stroke-width="2" fill="none"/>
<path d="M240,160 C245,155 250,160 255,155" stroke="#444" stroke-width="2" fill="none"/>
<!-- Sun -->
<circle cx="200" cy="220" r="40" fill="url(#sunGrad)"/>
<!-- Desert dunes -->
<path d="M0,260 C100,220 220,300 300,240 L300,300 L0,300 Z" fill="#FFCC80"/>
<path d="M0,300 C100,260 200,330 300,280 L300,300 L0,300 Z" fill="url(#sandGrad)"/>
<!-- Cactus -->
<g id="cactus">
<path d="M145,300 L155,300 L155,170 C155,160 145,160 145,170 Z" fill="url(#cactusGrad)"/>
<path d="M150,250 C150,235 120,235 120,255 C120,275 150,275 150,265 Z" fill="url(#cactusGrad)"/>
<path d="M145,210 C145,195 180,195 180,220 C180,245 145,245 145,230 Z" fill="url(#cactusGrad)"/>
</g>
<rect x="0" y="0" width="300" height="300" fill="url(#spikePattern)" clip-path="url(#cactusClip)" opacity="0.4"/>
<!-- Melting clock -->
<g filter="url(#dropShadow)">
<ellipse transform="rotate(-15 160 185)" cx="160" cy="185" rx="40" ry="25" fill="url(#clockGrad)"/>
<ellipse transform="rotate(-15 160 185)" cx="160" cy="185" rx="40" ry="25" fill="none" stroke="#6D4C41" stroke-width="2"/>
<path transform="rotate(-15 160 185)" d="M140,200 C137,205 143,215 140,225 C145,215 135,205 140,200 Z" fill="url(#clockGrad)"/>
<path transform="rotate(-15 160 185)" d="M160,200 C157,205 163,215 160,225 C165,215 155,205 160,200 Z" fill="url(#clockGrad)"/>
<path transform="rotate(-15 160 185)" d="M180,205 C177,210 183,220 180,230 C185,220 175,210 180,205 Z" fill="url(#clockGrad)"/>
<line transform="rotate(-15 160 185)" x1="160" y1="185" x2="160" y2="170" stroke="#6D4C41" stroke-width="2" stroke-linecap="round"/>
<line transform="rotate(-15 160 185)" x1="160" y1="185" x2="175" y2="185" stroke="#6D4C41" stroke-width="1.5" stroke-linecap="round"/>
</g>
</svg>Judge's Analysis
Player 2's submission captures the prompt more effectively with a clear depiction of a melting clock dripping off a cactus against a vivid desert sunset.
The composition is more detailed and visually appealing, with a better use of color gradients and elements like the flowing clock and layered desert background.
Player 1's image is more abstract and lacks clarity and adherence to the prompt's details.
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 floating island with a single tree, roots dangling into the sky below."
"A cat wearing a spacesuit, floating inside a cosmic fishbowl."
"Two squirrels sword-fighting with giant blades of grass on a toadstool."
"A snail racing a rocket on a rainbow road."
