Creative Challenge
"Melting clock dripping over a cactus in the desert"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Desert background -->
<rect x="0" y="0" width="300" height="300" fill="#FFE4B5" />
<!-- Sun in the sky -->
<circle cx="250" cy="50" r="30" fill="#FFD700" />
<!-- Cactus in the desert -->
<path d="M150 150 l-20 100, 40 0Z" fill="#228B22" />
<circle cx="150" cy="150" r="40" fill="#228B22" />
<!-- Melting clock -->
<path d="M120 120 l-10 30, 40 0, -10 -30Z" fill="silver" />
<path d="M123 120 l-7 25, 0 -10Z" fill="gray" />
<path d="M137 120 l-7 25, 0 -10Z" fill="gray" />
<path d="M138 139 l-16 0, 0 7Z" fill="gray" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3a7bd5" />
<stop offset="50%" stop-color="#f4983e" />
<stop offset="100%" stop-color="#f9d423" />
</linearGradient>
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e8a755" />
<stop offset="50%" stop-color="#d68230" />
<stop offset="100%" stop-color="#e8a755" />
</linearGradient>
<linearGradient id="clockGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f9d423" />
<stop offset="100%" stop-color="#e09b58" />
</linearGradient>
<linearGradient id="meltGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f9d423" opacity="0.9" />
<stop offset="100%" stop-color="#e09b58" opacity="0.7" />
</linearGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2ecc71" />
<stop offset="100%" stop-color="#27ae60" />
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.3" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)" />
<!-- Sun -->
<circle cx="250" cy="50" r="20" fill="#f9d423" />
<g stroke="#f9d423" stroke-width="2">
<line x1="250" y1="20" x2="250" y2="10" />
<line x1="250" y1="90" x2="250" y2="80" />
<line x1="220" y1="50" x2="210" y2="50" />
<line x1="290" y1="50" x2="280" y2="50" />
<line x1="228" y1="28" x2="221" y2="21" />
<line x1="272" y1="72" x2="279" y2="79" />
<line x1="228" y1="72" x2="221" y2="79" />
<line x1="272" y1="28" x2="279" y2="21" />
</g>
<!-- Desert ground -->
<path d="M0,150 Q75,130 150,150 T300,140 L300,300 L0,300 Z" fill="url(#sandGradient)" />
<path d="M0,170 Q50,160 100,170 T200,160 T300,180 L300,300 L0,300 Z" fill="#e09b58" opacity="0.7" />
<!-- Small desert rocks -->
<ellipse cx="50" cy="260" rx="15" ry="10" fill="#a67c52" />
<ellipse cx="70" cy="280" rx="10" ry="7" fill="#8c5e3b" />
<ellipse cx="240" cy="270" rx="20" ry="12" fill="#a67c52" />
<ellipse cx="210" cy="290" rx="8" ry="5" fill="#8c5e3b" />
<!-- Tiny cacti in background -->
<path d="M40,200 L40,230 L45,230 L45,215 L50,215 L50,230 L55,230 L55,200 Z" fill="#27ae60" />
<path d="M260,210 L260,240 L265,240 L265,225 L270,225 L270,240 L275,240 L275,210 Z" fill="#27ae60" />
<!-- Main cactus body with filter -->
<g filter="url(#shadow)">
<!-- Main cactus stem -->
<path d="M150,280 C150,200 150,130 150,100 C150,80 150,70 150,50 L160,50 C160,70 160,80 160,100 C160,130 160,200 160,280 Z" fill="url(#cactusGradient)" />
<!-- Left cactus arm -->
<path d="M150,180 C130,180 110,170 100,160 C90,150 90,140 100,130 C110,120 120,120 130,130 L130,180 Z" fill="url(#cactusGradient)" />
<!-- Right cactus arm -->
<path d="M150,150 C170,150 190,140 200,130 C210,120 210,110 200,100 C190,90 180,90 170,100 L170,150 Z" fill="url(#cactusGradient)" />
</g>
<!-- Cactus spines -->
<g fill="none" stroke="#116633" stroke-width="1">
<line x1="140" y1="270" x2="130" y2="260" />
<line x1="170" y1="270" x2="180" y2="260" />
<line x1="140" y1="240" x2="130" y2="230" />
<line x1="170" y1="240" x2="180" y2="230" />
<line x1="140" y1="210" x2="130" y2="200" />
<line x1="170" y1="210" x2="180" y2="200" />
<line x1="140" y1="180" x2="130" y2="170" />
<line x1="170" y1="180" x2="180" y2="170" />
<line x1="140" y1="150" x2="130" y2="140" />
<line x1="170" y1="150" x2="180" y2="140" />
<line x1="140" y1="120" x2="130" y2="110" />
<line x1="170" y1="120" x2="180" y2="110" />
<line x1="140" y1="90" x2="130" y2="80" />
<line x1="170" y1="90" x2="180" y2="80" />
<line x1="140" y1="60" x2="130" y2="50" />
<line x1="170" y1="60" x2="180" y2="50" />
<line x1="120" y1="170" x2="110" y2="165" />
<line x1="120" y1="160" x2="110" y2="155" />
<line x1="120" y1="150" x2="110" y2="145" />
<line x1="120" y1="140" x2="110" y2="135" />
<line x1="180" y1="140" x2="190" y2="135" />
<line x1="180" y1="130" x2="190" y2="125" />
<line x1="180" y1="120" x2="190" y2="115" />
<line x1="180" y1="110" x2="190" y2="105" />
</g>
<!-- Melting clock with filter -->
<g filter="url(#shadow)">
<!-- Main clock body dripping over the cactus -->
<ellipse cx="150" cy="90" rx="40" ry="40" fill="url(#clockGradient)" stroke="#a67c52" stroke-width="2" />
<!-- Melting drips -->
<path d="M120,110 C110,120 112,140 115,150 C120,170 125,190 115,210 C105,230 110,250 120,260 C130,270 140,260 135,240 C130,220 140,210 145,190 C150,170 140,160 135,140 C130,120 130,110 120,110"
fill="url(#meltGradient)" opacity="0.9" />
<path d="M180,110 C190,120 188,140 185,150 C180,170 175,190 185,210 C195,230 190,250 180,260 C170,270 160,260 165,240 C170,220 160,210 155,190 C150,170 160,160 165,140 C170,120 170,110 180,110"
fill="url(#meltGradient)" opacity="0.85" />
<!-- Drip over right cactus arm -->
<path d="M170,125 C185,135 190,145 180,160 C170,175 175,185 180,200 C185,215 175,225 165,225 C155,225 155,215 160,205 C165,195 155,180 160,165 C165,150 155,135 170,125"
fill="url(#meltGradient)" opacity="0.8" />
</g>
<!-- Clock face -->
<circle cx="150" cy="90" r="35" fill="white" opacity="0.8" />
<!-- Clock numbers -->
<g font-family="Arial" font-size="8" font-weight="bold" text-anchor="middle" fill="#333">
<text x="150" y="65">12</text>
<text x="175" y="90">3</text>
<text x="150" y="115">6</text>
<text x="125" y="90">9</text>
<text x="162" y="72">1</text>
<text x="170" y="80">2</text>
<text x="170" y="100">4</text>
<text x="162" y="108">5</text>
<text x="138" y="108">7</text>
<text x="130" y="100">8</text>
<text x="130" y="80">10</text>
<text x="138" y="72">11</text>
</g>
<!-- Clock hands - melting and distorted -->
<g stroke="#333" stroke-width="2" stroke-linecap="round">
<!-- Hour hand (melting) -->
<path d="M150,90 C145,85 140,75 135,75 C130,78 130,85 135,88" fill="none" />
<!-- Minute hand (melting) -->
<path d="M150,90 C155,80 158,70 160,65 C162,60 160,55 155,60" fill="none" />
<!-- Second hand (melting) -->
<path d="M150,90 C155,95 162,105 165,110 C168,115 172,118 175,115" fill="none" stroke="#c0392b" />
</g>
<!-- Clock center -->
<circle cx="150" cy="90" r="3" fill="#333" />
<!-- Additional melting drips -->
<g opacity="0.8">
<path d="M135,110 Q130,130 140,150 Q150,170 130,190 Q120,210 130,230"
fill="none" stroke="url(#meltGradient)" stroke-width="5" stroke-linecap="round" />
<path d="M165,110 Q170,130 160,150 Q150,170 170,190 Q180,210 170,230"
fill="none" stroke="url(#meltGradient)" stroke-width="5" stroke-linecap="round" />
<path d="M150,130 Q155,150 145,170 Q135,190 145,210"
fill="none" stroke="url(#meltGradient)" stroke-width="3" stroke-linecap="round" />
</g>
<!-- Small drip droplets -->
<circle cx="130" cy="235" r="5" fill="url(#meltGradient)" />
<circle cx="170" cy="245" r="4" fill="url(#meltGradient)" />
<circle cx="145" cy="215" r="3" fill="url(#meltGradient)" />
<!-- Heat waves -->
<g stroke="#f9d423" stroke-width="0.5" opacity="0.4">
<path d="M30,120 Q40,115 30,110 Q20,105 30,100" fill="none" />
<path d="M50,130 Q60,125 50,120 Q40,115 50,110" fill="none" />
<path d="M70,110 Q80,105 70,100 Q60,95 70,90" fill="none" />
<path d="M230,120 Q240,115 230,110 Q220,105 230,100" fill="none" />
<path d="M250,130 Q260,125 250,120 Q240,115 250,110" fill="none" />
<path d="M270,110 Q280,105 270,100 Q260,95 270,90" fill="none" />
</g>
</svg>Judge's Analysis
Player 2's submission excels in creativity and adherence to the prompt, depicting a melting clock with intricate details and a compelling desert backdrop.
The use of gradients and smooth lines enhances the visual appeal and technical quality.
In contrast, Player 1's image is more simplistic and lacks the dynamic elements that effectively convey the idea of a clock melting over a cactus in the desert.
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
"Skyscraper made of giant seashells under aurora borealis"
"A moonlit violin serenades a dancing galaxy, in impressionism"
"A giraffe wearing a top hat, juggling planets in a starry sky"
"Floating library in a teacup sailing on a sea of honey under a moonlit sky"
"A flying teacup with wings, pouring stars into an ocean made of swirling galaxies"
"A giraffe wearing a suit, reading a newspaper, on a tiny unicycle"
