Creative Challenge
"Surreal clock melting over a giant lily pad under a purple sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Define gradients, patterns and filters -->
<defs>
<!-- Purple sky gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a0033" />
<stop offset="40%" stop-color="#3a0068" />
<stop offset="100%" stop-color="#6441A5" />
</linearGradient>
<!-- Lily pad gradient -->
<linearGradient id="lilyPadGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2ecc71" />
<stop offset="60%" stop-color="#27ae60" />
<stop offset="100%" stop-color="#1d8348" />
</linearGradient>
<!-- Lily pad underside gradient -->
<linearGradient id="lilyPadUnderside" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#c0392b" />
<stop offset="100%" stop-color="#8e44ad" />
</linearGradient>
<!-- Clock face gradient -->
<radialGradient id="clockFaceGradient" cx="50%" cy="50%" r="60%" fx="40%" fy="40%">
<stop offset="0%" stop-color="#f9ca24" />
<stop offset="80%" stop-color="#f0932b" />
<stop offset="100%" stop-color="#eb4d4b" />
</radialGradient>
<!-- Melting drip gradient -->
<linearGradient id="dripGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f0932b" />
<stop offset="100%" stop-color="#eb4d4b" />
</linearGradient>
<!-- Water pattern -->
<pattern id="waterPattern" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M0,20 Q10,15 20,20 Q30,25 40,20" fill="none" stroke="#3b6beb" stroke-width="1" stroke-opacity="0.2" />
<path d="M0,10 Q10,5 20,10 Q30,15 40,10" fill="none" stroke="#3b6beb" stroke-width="1" stroke-opacity="0.2" />
<path d="M0,30 Q10,25 20,30 Q30,35 40,30" fill="none" stroke="#3b6beb" stroke-width="1" stroke-opacity="0.2" />
</pattern>
<!-- Clock shadow filter -->
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
<feOffset in="blur" dx="2" dy="3" result="offsetBlur" />
<feComponentTransfer in="offsetBlur" result="shadow">
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode in="shadow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- Glowing effect filter -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- Lily texture pattern -->
<pattern id="lilyTexture" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<path d="M0,0 L20,0 L20,20 L0,20 Z" fill="none" stroke="#27ae60" stroke-width="0.5" stroke-opacity="0.3" />
</pattern>
<!-- Reflection filter -->
<filter id="reflection" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.3" />
</feComponentTransfer>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Distant mountains -->
<path d="M0,150 Q50,110 100,140 Q150,100 200,130 Q250,90 300,140 L300,200 L0,200 Z" fill="#34104b" opacity="0.4" />
<!-- Moon -->
<circle cx="250" cy="50" r="20" fill="#fffdf0" opacity="0.9" filter="url(#glow)" />
<circle cx="242" cy="45" r="7" fill="#34104b" opacity="0.2" />
<circle cx="256" cy="55" r="5" fill="#34104b" opacity="0.1" />
<!-- Stars in the sky -->
<g id="stars" filter="url(#glow)">
<circle cx="30" cy="40" r="1" fill="white" opacity="0.8" />
<circle cx="70" cy="20" r="1.5" fill="white" opacity="0.7" />
<circle cx="120" cy="30" r="1" fill="white" opacity="0.9" />
<circle cx="180" cy="15" r="1.2" fill="white" opacity="0.8" />
<circle cx="220" cy="45" r="1" fill="white" opacity="0.7" />
<circle cx="260" cy="25" r="1.3" fill="white" opacity="0.9" />
<circle cx="40" cy="80" r="1" fill="white" opacity="0.6" />
<circle cx="280" cy="60" r="1.1" fill="white" opacity="0.8" />
<circle cx="150" cy="55" r="1.4" fill="white" opacity="0.9" />
<circle cx="95" cy="65" r="1" fill="white" opacity="0.7" />
<circle cx="35" cy="110" r="1.2" fill="white" opacity="0.6" />
<circle cx="190" cy="75" r="1" fill="white" opacity="0.8" />
<circle cx="270" cy="90" r="1.3" fill="white" opacity="0.7" />
</g>
<!-- Water surface -->
<rect x="0" y="200" width="300" height="100" fill="#250e3b" />
<rect x="0" y="200" width="300" height="100" fill="url(#waterPattern)" />
<!-- Distant lily pads -->
<ellipse cx="50" cy="220" rx="20" ry="10" fill="#1d8348" opacity="0.6" />
<ellipse cx="250" cy="230" rx="25" ry="12" fill="#1d8348" opacity="0.5" />
<!-- Reflections in water (added before the main objects) -->
<g transform="translate(0,400) scale(1,-0.3) translate(0,300)" opacity="0.4" filter="url(#reflection)">
<!-- Simplified lily pad reflection -->
<path d="M60,200 Q150,130 240,200 Q190,240 150,250 Q110,240 60,200 Z" fill="#27ae60" opacity="0.5" />
<!-- Simplified clock reflection -->
<path d="M180,130 Q200,140 210,160 Q225,190 200,210 Q160,220 130,210 Q110,190 115,160 Q125,135 150,130 Q165,128 180,130 Z" fill="#f0932b" opacity="0.5" />
<path d="M200,210 Q205,235 195,260" fill="#f0932b" opacity="0.5" />
<path d="M175,215 Q170,245 180,270" fill="#f0932b" opacity="0.5" />
<path d="M150,215 Q145,240 155,255" fill="#f0932b" opacity="0.5" />
<path d="M130,210 Q120,230 125,250" fill="#f0932b" opacity="0.5" />
</g>
<!-- Main lily pad -->
<g>
<!-- Underside edge -->
<path d="M70,200 Q150,240 230,200 Q180,250 150,255 Q120,250 70,200 Z" fill="url(#lilyPadUnderside)" opacity="0.6" />
<!-- Main pad -->
<path d="M60,200 Q150,130 240,200 Q190,240 150,250 Q110,240 60,200 Z" fill="url(#lilyPadGradient)" />
<!-- Texture overlay -->
<path d="M60,200 Q150,130 240,200 Q190,240 150,250 Q110,240 60,200 Z" fill="url(#lilyTexture)" />
<!-- Veins -->
<path d="M150,250 L150,130" fill="none" stroke="#1d8348" stroke-width="1.5" />
<path d="M150,130 Q100,170 70,200" fill="none" stroke="#1d8348" stroke-width="1" />
<path d="M150,130 Q200,170 230,200" fill="none" stroke="#1d8348" stroke-width="1" />
<path d="M150,130 Q120,180 100,220" fill="none" stroke="#1d8348" stroke-width="0.8" />
<path d="M150,130 Q180,180 200,220" fill="none" stroke="#1d8348" stroke-width="0.8" />
<!-- Water droplets on pad -->
<circle cx="120" cy="180" r="2" fill="#a2d9f5" opacity="0.8" />
<circle cx="180" cy="170" r="3" fill="#a2d9f5" opacity="0.9" />
<circle cx="140" cy="160" r="1.5" fill="#a2d9f5" opacity="0.7" />
<circle cx="200" cy="190" r="2.5" fill="#a2d9f5" opacity="0.8" />
<circle cx="90" cy="190" r="2" fill="#a2d9f5" opacity="0.7" />
</g>
<!-- Lily flower -->
<g transform="translate(150,135)">
<!-- Petals -->
<path d="M0,0 Q5,-10 0,-15 Q-5,-10 0,0 Z" fill="#f8c291" stroke="#e55039" stroke-width="0.5" transform="rotate(0)" />
<path d="M0,0 Q5,-10 0,-15 Q-5,-10 0,0 Z" fill="#f8c291" stroke="#e55039" stroke-width="0.5" transform="rotate(60)" />
<path d="M0,0 Q5,-10 0,-15 Q-5,-10 0,0 Z" fill="#f8c291" stroke="#e55039" stroke-width="0.5" transform="rotate(120)" />
<path d="M0,0 Q5,-10 0,-15 Q-5,-10 0,0 Z" fill="#f8c291" stroke="#e55039" stroke-width="0.5" transform="rotate(180)" />
<path d="M0,0 Q5,-10 0,-15 Q-5,-10 0,0 Z" fill="#f8c291" stroke="#e55039" stroke-width="0.5" transform="rotate(240)" />
<path d="M0,0 Q5,-10 0,-15 Q-5,-10 0,0 Z" fill="#f8c291" stroke="#e55039" stroke-width="0.5" transform="rotate(300)" />
<!-- Center -->
<circle cx="0" cy="0" r="5" fill="#fad390" />
<circle cx="0" cy="0" r="3" fill="#fa983a" />
</g>
<!-- Melting clock - main element -->
<g filter="url(#dropShadow)">
<!-- Distorted clock body -->
<path d="M180,130 Q200,140 210,160 Q225,190 200,210 Q160,220 130,210 Q110,190 115,160 Q125,135 150,130 Q165,128 180,130 Z" fill="url(#clockFaceGradient)" />
<!-- Melting drips with gradient -->
<path d="M200,210 Q205,235 195,260" fill="url(#dripGradient)" />
<path d="M175,215 Q170,245 180,270" fill="url(#dripGradient)" />
<path d="M150,215 Q145,240 155,255" fill="url(#dripGradient)" />
<path d="M130,210 Q120,230 125,250" fill="url(#dripGradient)" />
<!-- Melting over the edge -->
<path d="M195,260 Q190,270 185,275 Q180,280 175,276" fill="url(#dripGradient)" />
<!-- Clock face details -->
<ellipse cx="160" cy="170" rx="45" ry="40" fill="none" stroke="#fff" stroke-width="1" stroke-opacity="0.6" />
<!-- Clock numbers (distorted) -->
<g transform="translate(160,170)">
<text x="0" y="-35" font-family="serif" font-size="10" fill="#7f8c8d" text-anchor="middle">12</text>
<text x="38" y="0" font-family="serif" font-size="10" fill="#7f8c8d" text-anchor="middle" transform="rotate(10, 38, 0)">3</text>
<text x="0" y="38" font-family="serif" font-size="10" fill="#7f8c8d" text-anchor="middle" transform="rotate(-5, 0, 38)">6</text>
<text x="-35" y="5" font-family="serif" font-size="10" fill="#7f8c8d" text-anchor="middle" transform="rotate(-15, -35, 5)">9</text>
<text x="19" y="-30" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle">1</text>
<text x="30" y="-19" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle">2</text>
<text x="28" y="19" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle" transform="rotate(5, 28, 19)">4</text>
<text x="19" y="32" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle" transform="rotate(0, 19, 32)">5</text>
<text x="-19" y="30" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle" transform="rotate(-8, -19, 30)">7</text>
<text x="-32" y="19" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle" transform="rotate(-12, -32, 19)">8</text>
<text x="-30" y="-19" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle">10</text>
<text x="-19" y="-30" font-family="serif" font-size="8" fill="#7f8c8d" text-anchor="middle">11</text>
</g>
<!-- Clock hands (melting/warped) -->
<path d="M160,170 C180,145 185,130 170,125" fill="none" stroke="#34495e" stroke-width="2" />
<path d="M160,170 Q130,180 125,165" fill="none" stroke="#34495e" stroke-width="2.5" />
<path d="M160,170 Q168,185 175,195" fill="none" stroke="#34495e" stroke-width="1.5" />
<!-- Clock center -->
<circle cx="160" cy="170" r="4" fill="#34495e" />
<circle cx="160" cy="170" r="2" fill="#2c3e50" />
</g>
<!-- Small insects/fireflies -->
<circle cx="90" cy="150" r="1.5" fill="#f9ca24" filter="url(#glow)" />
<circle cx="210" cy="130" r="1" fill="#f9ca24" filter="url(#glow)" />
<circle cx="70" cy="180" r="1" fill="#f9ca24" filter="url(#glow)" />
<circle cx="180" cy="95" r="1.2" fill="#f9ca24" filter="url(#glow)" />
<!-- Surreal butterfly with clock hands for wings -->
<g transform="translate(230,120) scale(0.7)">
<path d="M0,0 Q-5,-5 -10,-15 Q-20,-25 -30,-5 Q-25,10 -10,15 Q-5,5 0,0 Z" fill="#9b59b6" stroke="#8e44ad" stroke-width="0.5" />
<path d="M0,0 Q5,-5 10,-15 Q20,-25 30,-5 Q25,10 10,15 Q5,5 0,0 Z" fill="#9b59b6" stroke="#8e44ad" stroke-width="0.5" />
<path d="M-15,-5 L-25,5 M-15,0 L-25,-10" stroke="#ecf0f1" stroke-width="0.5" />
<path d="M15,-5 L25,5 M15,0 L25,-10" stroke="#ecf0f1" stroke-width="0.5" />
<ellipse cx="0" cy="0" rx="3" ry="10" fill="#eb4d4b" />
<circle cx="0" cy="-7" r="2" fill="#2c3e50" />
</g>
<!-- Surreal floating watch hands -->
<g transform="translate(50,100) rotate(15)">
<path d="M0,0 L15,15" stroke="#34495e" stroke-width="1.5" />
<path d="M0,0 L-10,5" stroke="#34495e" stroke-width="2" />
<circle cx="0" cy="0" r="2" fill="#34495e" />
</g>
<!-- Water ripples around lily pad -->
<path d="M40,210 Q70,208 100,210 Q130,212 160,210 Q190,208 220,210 Q250,212 280,210" fill="none" stroke="#3498db" stroke-width="1" stroke-opacity="0.4" />
<path d="M30,220 Q65,217 100,220 Q135,223 170,220 Q205,217 240,220 Q275,223 290,220" fill="none" stroke="#3498db" stroke-width="1" stroke-opacity="0.3" />
<path d="M20,230 Q60,226 100,230 Q140,234 180,230 Q220,226 260,230 Q300,234 290,230" fill="none" stroke="#3498db" stroke-width="1" stroke-opacity="0.2" />
<!-- Another small melting timepiece on the lily pad -->
<g transform="translate(80,170) scale(0.3) rotate(-15)" filter="url(#dropShadow)">
<circle cx="0" cy="0" r="20" fill="#e67e22" stroke="#d35400" stroke-width="2" />
<path d="M0,20 Q10,30 5,40" fill="#e67e22" stroke="#d35400" stroke-width="1" />
<path d="M-10,15 Q-20,20 -25,30" fill="#e67e22" stroke="#d35400" stroke-width="1" />
<line x1="0" y1="0" x2="0" y2="-15" stroke="#34495e" stroke-width="2" />
<line x1="0" y1="0" x2="10" y2="10" stroke="#34495e" stroke-width="1.5" />
<circle cx="0" cy="0" r="2" fill="#34495e" />
</g>
<!-- Floating pocket watch chain -->
<path d="M88,165 Q95,155 100,140 Q105,125 110,110 Q115,95 110,80" fill="none" stroke="#f39c12" stroke-width="0.5" />
<!-- Flower petals falling from the sky -->
<path d="M40,140 Q45,145 40,150 Q35,145 40,140 Z" fill="#e84393" opacity="0.7" transform="rotate(30, 40, 140)" />
<path d="M220,90 Q225,95 220,100 Q215,95 220,90 Z" fill="#e84393" opacity="0.6" transform="rotate(60, 220, 90)" />
<path d="M260,130 Q265,135 260,140 Q255,135 260,130 Z" fill="#e84393" opacity="0.8" transform="rotate(15, 260, 130)" />
<path d="M120,80 Q125,85 120,90 Q115,85 120,80 Z" fill="#e84393" opacity="0.5" transform="rotate(45, 120, 80)" />
<!-- Small fish in water -->
<path d="M40,260 Q45,265 50,260 L55,265 L50,260 Q55,255 50,250 Z" fill="#e74c3c" transform="rotate(10, 40, 260)" opacity="0.7" />
<path d="M240,250 Q245,255 250,250 L255,255 L250,250 Q255,245 250,240 Z" fill="#3498db" transform="rotate(-5, 240, 250)" opacity="0.7" />
<!-- Surreal floating number -->
<text x="200" y="80" font-family="serif" font-size="12" fill="#ecf0f1" text-anchor="middle" filter="url(#glow)" transform="rotate(-10, 200, 80)">∞</text>
</svg>
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6c5ce7"/>
<stop offset="100%" stop-color="#c75ae6"/>
</linearGradient>
<linearGradient id="clockGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffcc00"/>
<stop offset="100%" stop-color="#ff6600"/>
</linearGradient>
<radialGradient id="lilyPadGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8fbc8f"/>
<stop offset="100%" stop-color="#4682b4"/>
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#skyGradient)"/>
<g transform="translate(100, 150)">
<path d="M-50,0 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0 z" fill="url(#clockGradient)" transform="rotate(30) scale(1.5, 0.5)"/>
<path d="M-40,0 a40,40 0 0,1 80,0 a40,40 0 0,1 -80,0 z" fill="url(#clockGradient)" transform="rotate(60) scale(1.3, 0.4)"/>
</g>
<circle cx="150" cy="200" r="80" fill="url(#lilyPadGradient)"/>
<path d="M110,220 Q150,260 190,220" stroke="#663300" stroke-width="8" fill="none"/>
<path d="M140,230 Q150,250 160,230" stroke="#663300" stroke-width="4" fill="none"/>
</svg>
Judge's Analysis
Player 1's submission effectively captures the surreal theme with a detailed representation of a melting clock over a lily pad, set against a purple sky.
The composition includes additional elements like stars and the moon, enhancing the visual appeal and adherence to the prompt.
In contrast, Player 2's image lacks specificity and recognizable elements that align with the given 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
"Floating city above a surreal ocean of clouds"
"A snail with a city skyline shell, in geometric style"
"A clockwork octopus juggling planets in a starry void"
"A cat riding a surfboard on a rainbow wave"
"Rainbow jellyfish in a cyberpunk cityscape"
"Moonlit owl wearing a crown of stars"