Creative Challenge
"Surreal pop art: A clock melting over a cactus in a desert with a starry night sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background with gradient sky -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0033" />
<stop offset="70%" stop-color="#331166" />
<stop offset="100%" stop-color="#661144" />
</linearGradient>
<radialGradient id="sunsetGlow" cx="50%" cy="100%" r="80%" fx="50%" fy="100%">
<stop offset="0%" stop-color="#ff7700" stop-opacity="0.6" />
<stop offset="100%" stop-color="#ff0066" stop-opacity="0" />
</radialGradient>
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e6c275" />
<stop offset="50%" stop-color="#d4a94b" />
<stop offset="100%" stop-color="#c19032" />
</linearGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1a6600" />
<stop offset="50%" stop-color="#33cc33" />
<stop offset="100%" stop-color="#1a6600" />
</linearGradient>
<linearGradient id="clockGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffcc00" />
<stop offset="100%" stop-color="#ff6600" />
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<rect x="0" y="200" width="300" height="100" fill="url(#sandGradient)" />
<ellipse cx="150" cy="230" rx="150" ry="30" fill="#d4a94b" opacity="0.5" />
<rect x="0" y="170" width="300" height="40" fill="url(#sunsetGlow)" />
<!-- Stars -->
<g id="stars">
<circle cx="30" cy="40" r="1.5" fill="white" opacity="0.9" />
<circle cx="60" cy="20" r="2" fill="white" opacity="0.8" />
<circle cx="90" cy="60" r="1" fill="white" opacity="0.7" />
<circle cx="120" cy="30" r="1.7" fill="white" opacity="0.9" />
<circle cx="150" cy="50" r="2.2" fill="white" opacity="0.8" />
<circle cx="180" cy="25" r="1.3" fill="white" opacity="0.7" />
<circle cx="210" cy="55" r="1.8" fill="white" opacity="0.9" />
<circle cx="240" cy="15" r="2.1" fill="white" opacity="0.8" />
<circle cx="270" cy="45" r="1.2" fill="white" opacity="0.7" />
<circle cx="45" cy="80" r="1.9" fill="white" opacity="0.8" />
<circle cx="75" cy="95" r="1.4" fill="white" opacity="0.7" />
<circle cx="105" cy="75" r="1.6" fill="white" opacity="0.9" />
<circle cx="135" cy="90" r="2.3" fill="white" opacity="0.8" />
<circle cx="165" cy="70" r="1.1" fill="white" opacity="0.7" />
<circle cx="195" cy="85" r="1.5" fill="white" opacity="0.9" />
<circle cx="225" cy="65" r="2" fill="white" opacity="0.8" />
<circle cx="255" cy="80" r="1" fill="white" opacity="0.7" />
<circle cx="285" cy="60" r="1.7" fill="white" opacity="0.9" />
<circle cx="220" cy="110" r="2.5" fill="white" filter="url(#glow)" opacity="0.9" />
<circle cx="40" cy="125" r="1.8" fill="white" opacity="0.7" />
<circle cx="280" cy="105" r="2.2" fill="white" opacity="0.8" />
</g>
<!-- Cactus -->
<g id="cactus">
<path d="M150 200 Q145 160 145 130 Q145 110 130 90 Q125 83 125 75 Q125 60 135 60 Q145 60 145 75 Q145 82 140 90 Q130 110 135 130 L135 200 Z" fill="url(#cactusGradient)" />
<path d="M150 200 Q155 160 155 130 Q155 110 170 90 Q175 83 175 75 Q175 60 165 60 Q155 60 155 75 Q155 82 160 90 Q170 110 165 130 L165 200 Z" fill="url(#cactusGradient)" />
<path d="M135 200 L165 200 Q170 210 165 220 Q155 230 145 230 Q135 230 135 220 Z" fill="url(#cactusGradient)" />
<!-- Cactus highlights -->
<path d="M130 130 L132 110 L134 130 Z" fill="#99ff99" opacity="0.4" />
<path d="M170 130 L168 110 L166 130 Z" fill="#99ff99" opacity="0.4" />
<ellipse cx="135" cy="65" rx="2" ry="3" fill="#006600" />
<ellipse cx="165" cy="65" rx="2" ry="3" fill="#006600" />
<ellipse cx="131" cy="85" rx="1.5" ry="2" fill="#006600" />
<ellipse cx="169" cy="85" rx="1.5" ry="2" fill="#006600" />
</g>
<!-- Melting Clock -->
<g id="clock">
<!-- Clock face -->
<ellipse cx="150" cy="100" rx="40" ry="40" fill="url(#clockGradient)" stroke="#ffaa00" stroke-width="4" />
<!-- Melting drips -->
<path d="M150 140 C160 150 190 160 180 210 C175 230 150 220 140 230 C130 240 120 260 115 225 C110 200 110 180 120 160 C130 140 145 140 150 140 Z" fill="url(#clockGradient)" stroke="#ffaa00" stroke-width="2" />
<path d="M190 100 C210 105 220 115 210 150 C205 170 190 190 180 210" fill="none" stroke="#ffaa00" stroke-width="3" />
<path d="M190 100 C210 95 230 75 230 110 C230 150 200 180 210 190" fill="none" stroke="#ffaa00" stroke-width="2" />
<!-- Clock numbers -->
<g fill="#663300" font-family="Arial" font-weight="bold">
<text x="147" y="73" font-size="10" text-anchor="middle">12</text>
<text x="178" y="104" font-size="10" text-anchor="middle">3</text>
<text x="147" y="133" font-size="10" text-anchor="middle">6</text>
<text x="118" y="104" font-size="10" text-anchor="middle">9</text>
</g>
<!-- Clock hands (distorted) -->
<path d="M150 100 C145 90 140 75 120 80" fill="none" stroke="#663300" stroke-width="2" />
<path d="M150 100 C160 95 170 90 175 110" fill="none" stroke="#663300" stroke-width="2" />
<circle cx="150" cy="100" r="5" fill="#cc3300" />
</g>
<!-- Pop art elements -->
<circle cx="60" cy="50" r="15" fill="#ff3399" opacity="0.7" />
<circle cx="250" cy="70" r="20" fill="#33ccff" opacity="0.6" />
<path d="M30 150 L60 150 L45 120 Z" fill="#ffff00" opacity="0.8" />
<path d="M240 160 L270 160 L255 190 Z" fill="#99ff33" opacity="0.7" />
<!-- Signature -->
<text x="270" y="290" font-family="Arial" font-size="5" fill="white" text-anchor="end">Pop Art Desert</text>
</svg>
<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:#050f2c; stop-opacity:1" />
<stop offset="100%" style="stop-color:#1e215d; stop-opacity:1" />
</linearGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e5f9d6; stop-opacity:1" />
<stop offset="100%" style="stop-color:#a2d1a8; stop-opacity:1" />
</linearGradient>
<radialGradient id="clockGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#fcd36b; stop-opacity:1" />
<stop offset="100%" style="stop-color:#f9a800; stop-opacity:1" />
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#skyGradient)" />
<g transform="translate(0, 80)">
<ellipse cx="150" cy="220" rx="100" ry="10" fill="#ffd700" />
<path d="M140,230 Q160,260 180,230 Q160,240 140,230 Z" fill="url(#cactusGradient)" />
<path d="M140,230 Q135,215 140,210 Q150,215 140,230 Z" fill="url(#cactusGradient)" />
<path d="M160,230 Q165,215 160,210 Q150,215 160,230 Z" fill="url(#cactusGradient)" />
<circle cx="150" cy="100" r="40" fill="url(#clockGradient)" transform="rotate(-20,150,100)" />
<path d="M150,100 L150,75" stroke="#000" stroke-width="3" />
<path d="M150,100 L180,100" stroke="#000" stroke-width="3" />
<g fill="none" stroke="#000" stroke-width="2">
<circle cx="150" cy="100" r="40" />
<line x1="140" y1="80" x2="160" y2="80" />
<line x1="120" y1="100" x2="180" y2="100" />
</g>
</g>
<path d="M40,10 Q50,5 60,10 Q70,15 60,20 Q50,25 40,10 Z" fill="#fff" opacity="0.5" />
<path d="M250,20 Q240,10 230,20 Q220,30 230,40 Q240,50 250,20 Z" fill="#fff" opacity="0.5" />
<path d="M90,5 Q100,0 110,5 Q120,10 110,15 Q100,20 90,5 Z" fill="#fff" opacity="0.5" />
<path d="M200,50 Q190,40 180,50 Q170,60 180,70 Q190,80 200,50 Z" fill="#fff" opacity="0.5" />
<path d="M300,0 L300,300 L0,300 L0,0 Z" fill="none" />
</svg>Judge's Analysis
Player 1's submission better adheres to the prompt with a clear depiction of a melting clock over a cactus, set against a vibrant and surreal pop art style.
The use of geometric shapes and bright colors enhances the visual appeal and creativity.
In contrast, Player 2's image lacks clarity in representing a clock and cactus, making it less effective in conveying the surreal 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
"Flamingo in a tuxedo, tap-dancing on a lilypad"
"Flying cat playing a trumpet in a starry skyline"
"A sun setting behind a skyline of teacups"
"Cloud with one quirky face winking"
"Dancing Cactus in a Tuxedo"
"A giraffe wearing a top hat, juggling planets in space"
