Creative Challenge
"Surreal: A clock melting over a tree branch, with a sunset backdrop"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Sunset gradient -->
<radialGradient id="sunset" cx="50%" cy="30%" r="80%" fx="50%" fy="30%">
<stop offset="0%" stop-color="#ffff88" />
<stop offset="30%" stop-color="#ffaa44" />
<stop offset="60%" stop-color="#ff5500" />
<stop offset="80%" stop-color="#aa2200" />
<stop offset="100%" stop-color="#550066" />
</radialGradient>
<!-- Clock face gradient -->
<linearGradient id="clockFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#ddddff" />
</linearGradient>
<!-- Tree bark texture -->
<pattern id="barkTexture" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0,0 L5,10 L10,0" fill="none" stroke="#442200" stroke-width="0.5" opacity="0.3" />
</pattern>
<!-- Melted gold color -->
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffdd44" />
<stop offset="50%" stop-color="#ffaa00" />
<stop offset="100%" stop-color="#aa7700" />
</linearGradient>
<!-- Sun glow -->
<filter id="sunGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<!-- Melting effect filter -->
<filter id="meltEffect" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" seed="5" />
<feDisplacementMap in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G" />
</filter>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#sunset)" />
<!-- Sun -->
<circle cx="150" cy="70" r="35" fill="#ffffff" opacity="0.7" filter="url(#sunGlow)" />
<circle cx="150" cy="70" r="25" fill="#ffffff" opacity="0.9" />
<!-- Distant mountains -->
<path d="M0,160 Q50,120 100,150 Q150,100 200,140 Q250,120 300,160 L300,300 L0,300 Z"
fill="#331133" opacity="0.5" />
<!-- Middle ground -->
<path d="M0,190 Q75,170 150,185 Q225,170 300,190 L300,300 L0,300 Z"
fill="#221122" opacity="0.7" />
<!-- Foreground -->
<path d="M0,220 Q75,200 150,215 Q225,195 300,210 L300,300 L0,300 Z"
fill="#221100" />
<!-- Distant trees silhouettes -->
<path d="M20,210 L30,180 L40,210 L50,170 L60,210" stroke="#221100" stroke-width="2" fill="none" />
<path d="M250,205 L260,175 L270,205 L280,165 L290,205" stroke="#221100" stroke-width="2" fill="none" />
<!-- Main tree trunk -->
<path d="M100,300 C100,260 110,230 115,200 C120,170 110,160 120,140 C130,120 140,130 145,110"
stroke="#553311" stroke-width="15" fill="url(#barkTexture)" />
<!-- Main branches -->
<path d="M115,200 C130,190 150,195 170,190" stroke="#553311" stroke-width="12" fill="url(#barkTexture)" />
<path d="M120,140 C135,145 145,135 160,125" stroke="#553311" stroke-width="9" fill="url(#barkTexture)" />
<path d="M145,110 C160,115 170,100 180,95" stroke="#553311" stroke-width="7" fill="url(#barkTexture)" />
<!-- Smaller branches -->
<path d="M170,190 C180,185 190,190 200,185" stroke="#553311" stroke-width="6" fill="url(#barkTexture)" />
<path d="M160,125 C170,120 180,125 190,120" stroke="#553311" stroke-width="5" fill="url(#barkTexture)" />
<path d="M180,95 C190,90 195,85 205,80" stroke="#553311" stroke-width="4" fill="url(#barkTexture)" />
<!-- Tiny branches -->
<path d="M200,185 C210,183 215,186 220,182" stroke="#553311" stroke-width="3" fill="none" />
<path d="M190,120 C195,118 200,122 205,119" stroke="#553311" stroke-width="3" fill="none" />
<path d="M205,80 C210,78 212,75 217,73" stroke="#553311" stroke-width="2" fill="none" />
<!-- Floating surreal elements in background -->
<circle cx="50" cy="100" r="5" fill="#aaaaff" opacity="0.6" />
<circle cx="70" cy="80" r="3" fill="#ffaaaa" opacity="0.6" />
<circle cx="40" cy="120" r="4" fill="#aaffaa" opacity="0.6" />
<path d="M220,90 L240,70 L260,90 L240,110 Z" fill="#ffaaaa" opacity="0.3" transform="rotate(15, 240, 90)" />
<!-- Main melting clock on branch -->
<g transform="translate(170,130)">
<!-- Clock body -->
<ellipse cx="0" cy="0" rx="25" ry="25" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="3" />
<!-- Melting drips -->
<path d="M-10,20 C-15,40 -20,70 -15,95 C-10,120 0,110 5,90 C10,70 5,40 0,30"
fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="2" filter="url(#meltEffect)" />
<path d="M15,15 C25,25 35,35 40,55 C45,75 35,85 30,65 C25,45 10,35 15,25"
fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="2" filter="url(#meltEffect)" />
<!-- Clock face elements -->
<circle cx="0" cy="0" r="2" fill="#000000" />
<!-- Clock numbers -->
<text x="-4" y="-15" font-size="6" font-family="serif" font-weight="bold">12</text>
<text x="15" y="3" font-size="6" font-family="serif" font-weight="bold">3</text>
<text x="-2" y="18" font-size="6" font-family="serif" font-weight="bold">6</text>
<text x="-18" y="3" font-size="6" font-family="serif" font-weight="bold">9</text>
<!-- Hour marks -->
<line x1="0" y1="-20" x2="0" y2="-15" stroke="#000000" stroke-width="1" />
<line x1="10" y1="-17.3" x2="7.5" y2="-13" stroke="#000000" stroke-width="1" />
<line x1="17.3" y1="-10" x2="13" y2="-7.5" stroke="#000000" stroke-width="1" />
<line x1="20" y1="0" x2="15" y2="0" stroke="#000000" stroke-width="1" />
<line x1="17.3" y1="10" x2="13" y2="7.5" stroke="#000000" stroke-width="1" />
<line x1="10" y1="17.3" x2="7.5" y2="13" stroke="#000000" stroke-width="1" />
<line x1="0" y1="20" x2="0" y2="15" stroke="#000000" stroke-width="1" />
<line x1="-10" y1="17.3" x2="-7.5" y2="13" stroke="#000000" stroke-width="1" />
<line x1="-17.3" y1="10" x2="-13" y2="7.5" stroke="#000000" stroke-width="1" />
<line x1="-20" y1="0" x2="-15" y2="0" stroke="#000000" stroke-width="1" />
<line x1="-17.3" y1="-10" x2="-13" y2="-7.5" stroke="#000000" stroke-width="1" />
<line x1="-10" y1="-17.3" x2="-7.5" y2="-13" stroke="#000000" stroke-width="1" />
<!-- Melting clock hands -->
<path d="M0,0 L-5,-12 L0,-15 L5,-12 Z" fill="#000000" />
<path d="M0,0 C5,2 10,4 15,10 C20,16 15,18 10,12 C5,6 0,2 0,0 Z" fill="#333333" />
</g>
<!-- Second melting clock hanging lower -->
<g transform="translate(140,190) rotate(-20)">
<!-- Clock body (more distorted) -->
<ellipse cx="0" cy="0" rx="20" ry="15" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="2" />
<!-- Extreme melting drip -->
<path d="M-5,10 C-10,30 -15,60 -10,90 C-5,120 5,130 10,110 C15,90 10,60 5,30 C0,0 -5,5 -5,10Z"
fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="2" filter="url(#meltEffect)" />
<!-- Clock face elements -->
<circle cx="0" cy="0" r="1.5" fill="#000000" />
<!-- Distorted clock numbers -->
<text x="-3" y="-10" font-size="5" font-family="serif" font-weight="bold" transform="rotate(10)">12</text>
<text x="10" y="3" font-size="5" font-family="serif" font-weight="bold" transform="rotate(20)">3</text>
<text x="-2" y="12" font-size="5" font-family="serif" font-weight="bold" transform="rotate(-10)">6</text>
<text x="-13" y="3" font-size="5" font-family="serif" font-weight="bold" transform="rotate(-15)">9</text>
<!-- Melting clock hands -->
<path d="M0,0 C-2,-5 -3,-8 -1,-12 C1,-16 4,-13 2,-8 Z" fill="#000000" />
<path d="M0,0 C5,2 10,3 12,8 C14,13 10,15 8,10 Z" fill="#333333" />
</g>
<!-- Third tiny melting clock -->
<g transform="translate(205,85) rotate(30) scale(0.6)">
<!-- Clock body (more distorted) -->
<ellipse cx="0" cy="0" rx="15" ry="12" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="1.5" />
<!-- Extreme melting drip -->
<path d="M5,10 C10,20 15,35 10,45 C5,55 0,50 0,40 C0,30 0,20 5,10Z"
fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="1.5" />
<!-- Clock face elements -->
<circle cx="0" cy="0" r="1" fill="#000000" />
<!-- Clock hands -->
<line x1="0" y1="0" x2="-5" y2="-7" stroke="#000000" stroke-width="1" />
<line x1="0" y1="0" x2="7" y2="3" stroke="#000000" stroke-width="0.8" />
</g>
<!-- Surreal butterflies with clock-wing patterns -->
<g transform="translate(80,90) rotate(15)">
<path d="M0,0 C5,-5 10,-3 12,-10 C14,-17 10,-20 5,-15 C0,-10 -5,-17 -10,-15 C-15,-13 -10,-5 -5,-5 C0,-5 -2,0 0,0Z"
fill="#ffaaee" opacity="0.7" />
<path d="M0,0 L0,10" stroke="#000000" stroke-width="0.5" />
<circle cx="12" cy="-10" r="2" fill="#ffffff" opacity="0.8" />
<circle cx="-10" cy="-15" r="2" fill="#ffffff" opacity="0.8" />
</g>
<g transform="translate(230,120) rotate(-10) scale(0.8)">
<path d="M0,0 C5,-5 10,-3 12,-10 C14,-17 10,-20 5,-15 C0,-10 -5,-17 -10,-15 C-15,-13 -10,-5 -5,-5 C0,-5 -2,0 0,0Z"
fill="#aaeeff" opacity="0.7" />
<path d="M0,0 L0,10" stroke="#000000" stroke-width="0.5" />
<circle cx="12" cy="-10" r="2" fill="#ffffff" opacity="0.8" />
<circle cx="-10" cy="-15" r="2" fill="#ffffff" opacity="0.8" />
</g>
<!-- Reflection in a non-existent pool -->
<ellipse cx="140" cy="280" rx="120" ry="15" fill="#ffffff" opacity="0.15" />
<!-- Tiny melting pocket watches scattered on ground -->
<circle cx="90" cy="260" r="5" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="1" />
<path d="M90,260 C95,270 100,280 95,285 C90,290 85,280 90,275 Z" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="1" />
<circle cx="190" cy="255" r="4" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="1" />
<path d="M190,255 C195,260 200,270 195,275 C190,280 185,270 190,265 Z" fill="url(#clockFace)" stroke="url(#goldGradient)" stroke-width="1" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background sunset -->
<defs>
<linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF7E5F;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FEB47B;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#sunsetGradient)" />
<!-- Tree branch -->
<path d="M50,220 C30,200 70,180 50,160 L80,160 C75,180 90,180 85,200 C80,220 60,220 50,220 Z"
fill="#8B4513"
stroke="#6F4C3E"
stroke-width="2" />
<!-- Melting clock -->
<g transform="translate(70, 120)">
<ellipse cx="30" cy="50" rx="30" ry="40" fill="#FFD700" stroke="#B8860B" stroke-width="3" />
<path d="M23,30 C27,20 37,20 35,35 Q35,45 25,45 20,50 22,60"
fill="#FFD700" />
<circle cx="30" cy="50" r="3" fill="#000" />
<line x1="30" y1="50" x2="30" y2="35" stroke="#000" stroke-width="2" />
<line x1="30" y1="50" x2="37" y2="45" stroke="#000" stroke-width="2" />
<path d="M28,30 C29,35 31,36 32,33" fill="none" stroke="#8B0000" stroke-width="1.5" />
</g>
<!-- Soft clouds in the background -->
<ellipse cx="100" cy="60" rx="40" ry="20" fill="#FFFFFF" opacity="0.5" />
<ellipse cx="200" cy="80" rx="50" ry="25" fill="#FFFFFF" opacity="0.6" />
<!-- Ground with some grass -->
<rect y="250" width="300" height="50" fill="#228B22" />
<path d="M0,250 C20,240 40,260 60,250 C80,240 100,260 120,250 C140,240 160,260 180,250 C200,240 220,260 240,250 C260,240 280,260 300,250"
fill="none" stroke="#006400" stroke-width="5" />
</svg>Judge's Analysis
Player 1's image effectively captures the surreal essence of the prompt with a melting clock creatively draped over a tree branch against a striking sunset backdrop.
The composition is detailed and visually engaging, with additional abstract elements enhancing the surreal atmosphere.
In contrast, Player 2's work is simpler and lacks the same level of creativity and adherence to the prompt's 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
"A spaceship shaped like a teapot soaring through a galaxy filled with glowing donuts."
"A giraffe on roller skates juggling flamingos"
"Dancing octopus in a moonlit forest clearing"
