Creative Challenge
"A clock melting over a tree branch at sunset."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF5F6D"/>
<stop offset="100%" stop-color="#FFC371"/>
</linearGradient>
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#FFD700" stop-opacity="0.5"/>
</radialGradient>
<radialGradient id="clockGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF9C4"/>
<stop offset="100%" stop-color="#FFD54F"/>
</radialGradient>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.4"/>
</filter>
</defs>
<rect width="300" height="300" fill="url(#bgGrad)"/>
<circle cx="150" cy="200" r="50" fill="url(#sunGrad)"/>
<path d="M20,100 C80,90 140,110 280,80" stroke="#5C3A21" stroke-width="8" fill="none" stroke-linecap="round"/>
<ellipse cx="50" cy="95" rx="8" ry="15" fill="#2E8B57" transform="rotate(-20 50 95)"/>
<ellipse cx="100" cy="85" rx="8" ry="15" fill="#2E8B57" transform="rotate(-30 100 85)"/>
<ellipse cx="220" cy="75" rx="8" ry="15" fill="#2E8B57" transform="rotate(10 220 75)"/>
<g transform="translate(200,100) rotate(20)">
<path d="M-30,-30 A30,30 0 0,1 30,-30 Q35,-10 40,10 Q42,30 30,40 Q10,45 -10,40 Q-30,35 -32,10 Q-35,-10 -30,-30 Z"
fill="url(#clockGrad)" stroke="#FFC107" stroke-width="2" filter="url(#softShadow)"/>
<line x1="0" y1="0" x2="0" y2="-20" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<line x1="0" y1="0" x2="15" y2="-15" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<path d="M-15,40 Q-8,50 -10,60 Q-20,55 -15,40 Z" fill="url(#clockGrad)" filter="url(#softShadow)"/>
<path d="M0,42 Q5,52 2,62 Q-5,58 0,42 Z" fill="url(#clockGrad)" filter="url(#softShadow)"/>
<path d="M20,38 Q25,48 23,58 Q15,54 20,38 Z" fill="url(#clockGrad)" filter="url(#softShadow)"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Sunset Sky Gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#051937" />
<stop offset="30%" stop-color="#004d7a" />
<stop offset="60%" stop-color="#af4261" />
<stop offset="85%" stop-color="#e36956" />
<stop offset="100%" stop-color="#f7ce68" />
</linearGradient>
<!-- Sun Glow -->
<radialGradient id="sunGlow" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#fff7d6" />
<stop offset="20%" stop-color="#ffdb7a" />
<stop offset="100%" stop-color="#ff7700" stop-opacity="0" />
</radialGradient>
<!-- Clock Face Gradient -->
<linearGradient id="clockFace" x1="20%" y1="20%" x2="80%" y2="80%">
<stop offset="0%" stop-color="#f8f8f8" />
<stop offset="70%" stop-color="#e0e0e0" />
<stop offset="100%" stop-color="#d0d0d0" />
</linearGradient>
<!-- Clock Border Gradient -->
<linearGradient id="clockBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8a6642" />
<stop offset="100%" stop-color="#4a2c12" />
</linearGradient>
<!-- Drip Fill Gradient -->
<linearGradient id="dripGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0f0f0" />
<stop offset="100%" stop-color="#d8d8d8" />
</linearGradient>
<!-- Clock Shadow -->
<filter id="clockShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2" dy="4" result="offsetBlur"/>
<feComponentTransfer in="offsetBlur" result="shadow">
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Melting Filter -->
<filter id="melting" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="1" seed="5" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<!-- Tree Bark Texture -->
<pattern id="barkPattern" patternUnits="userSpaceOnUse" width="30" height="30">
<rect width="30" height="30" fill="#5d4037"/>
<path d="M0,0 L15,30 L30,0 Z" fill="#4e342e" fill-opacity="0.3"/>
<path d="M15,0 L0,30 L30,30 Z" fill="#4e342e" fill-opacity="0.3"/>
<path d="M0,15 C10,10 20,20 30,15" stroke="#3e2723" stroke-width="0.5" fill="none"/>
<path d="M15,0 C10,10 20,20 15,30" stroke="#3e2723" stroke-width="0.5" fill="none"/>
</pattern>
<!-- Cloud Pattern -->
<filter id="cloudEffect">
<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="5" seed="2" result="noise"/>
<feComponentTransfer in="noise" result="cloudNoise">
<feFuncA type="table" tableValues="0 0 0 0 .5 .9 1"/>
</feComponentTransfer>
<feComposite operator="in" in="cloudNoise" in2="SourceGraphic"/>
</filter>
</defs>
<!-- Background Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
<!-- Clouds in sky -->
<g opacity="0.8" filter="url(#cloudEffect)">
<ellipse cx="80" cy="50" rx="40" ry="20" fill="#ffb28f" opacity="0.4"/>
<ellipse cx="150" cy="30" rx="50" ry="15" fill="#ffb28f" opacity="0.3"/>
<ellipse cx="230" cy="60" rx="30" ry="10" fill="#ffb28f" opacity="0.5"/>
</g>
<!-- Sun -->
<circle cx="240" cy="80" r="80" fill="url(#sunGlow)" opacity="0.9"/>
<circle cx="240" cy="80" r="25" fill="#ffcc33"/>
<!-- Distant mountains -->
<path d="M0,190 Q30,160 60,180 Q90,160 120,175 Q150,155 180,170 Q210,150 240,165 Q270,145 300,170 L300,300 L0,300 Z"
fill="#2a1a35" opacity="0.7"/>
<!-- Middle ground -->
<path d="M0,230 Q40,215 80,225 Q120,215 160,225 Q200,215 240,225 Q280,215 300,220 L300,300 L0,300 Z"
fill="#3f2b48" opacity="0.6"/>
<!-- Tree Trunk -->
<path d="M100,300 C100,260 105,220 110,200 C115,180 120,160 140,130 C145,120 150,115 155,120 C160,125 155,140 170,130 C180,125 185,130 180,140 C175,150 170,160 180,170 C190,180 195,200 190,220 C185,240 180,270 170,300 Z"
fill="url(#barkPattern)"/>
<!-- Tree Trunk Detail Lines -->
<path d="M110,200 C105,220 100,260 100,300 M155,120 C150,115 145,120 140,130 M155,140 C160,135 165,130 170,130 M180,140 C185,130 180,125 170,130 M180,170 C170,160 175,150 180,140 M190,220 C195,200 190,180 180,170 M170,300 C180,270 185,240 190,220"
stroke="#3e2723" stroke-width="1" fill="none" stroke-opacity="0.6"/>
<!-- Main Branch -->
<path d="M140,130 C160,125 180,120 200,125 C220,130 240,140 270,155"
stroke="#5d4037" stroke-width="15" stroke-linecap="round" fill="none"/>
<!-- Branch Texture -->
<path d="M140,130 C160,125 180,120 200,125 C220,130 240,140 270,155"
stroke="#3e2723" stroke-width="1" stroke-linecap="round" stroke-opacity="0.6" fill="none"/>
<!-- Small Upper Branch -->
<path d="M160,125 C165,115 170,105 180,95"
stroke="#5d4037" stroke-width="7" stroke-linecap="round" fill="none"/>
<!-- Small Lower Branch -->
<path d="M220,130 C225,125 230,115 235,105"
stroke="#5d4037" stroke-width="5" stroke-linecap="round" fill="none"/>
<!-- Branch Shadow -->
<path d="M140,130 C160,125 180,120 200,125 C220,130 240,140 270,155"
stroke="#000000" stroke-width="15" stroke-linecap="round" fill="none" opacity="0.15" transform="translate(3,3)"/>
<!-- Melting Clock - Main Body -->
<path d="M150,90 C170,80 195,90 200,110 C205,130 195,150 190,170 C185,190 170,195 155,190 C140,185 125,175 120,155 C115,135 130,100 150,90 Z"
fill="url(#clockFace)" stroke="url(#clockBorder)" stroke-width="3" filter="url(#clockShadow)"/>
<!-- Large Clock Drip -->
<path d="M190,170 Q195,200 192,230 T185,285"
fill="url(#dripGradient)" stroke="url(#clockBorder)" stroke-width="2.5" filter="url(#melting)"/>
<!-- Middle Clock Drip -->
<path d="M155,190 Q145,215 148,245 T152,300"
fill="url(#dripGradient)" stroke="url(#clockBorder)" stroke-width="2" filter="url(#melting)"/>
<!-- Small Clock Drip -->
<path d="M170,190 Q175,210 172,235 T168,260"
fill="url(#dripGradient)" stroke="url(#clockBorder)" stroke-width="1.5" filter="url(#melting)"/>
<!-- Clock Face Circle -->
<circle cx="160" cy="140" r="40" fill="none" stroke="#333" stroke-width="1.5"/>
<!-- Clock Hour Marks -->
<g stroke="#333" stroke-width="1">
<line x1="160" y1="105" x2="160" y2="110" stroke-width="2"/>
<line x1="195" y1="140" x2="190" y2="140" stroke-width="2"/>
<line x1="160" y1="175" x2="160" y2="170" stroke-width="2"/>
<line x1="125" y1="140" x2="130" y2="140" stroke-width="2"/>
<!-- Hour markers at angles -->
<line x1="177" y1="113" x2="174" y2="117" />
<line x1="187" y1="123" x2="183" y2="126" />
<line x1="187" y1="157" x2="183" y2="154" />
<line x1="177" y1="167" x2="174" y2="163" />
<line x1="143" y1="167" x2="146" y2="163" />
<line x1="133" y1="157" x2="137" y2="154" />
<line x1="133" y1="123" x2="137" y2="126" />
<line x1="143" y1="113" x2="146" y2="117" />
</g>
<!-- Clock Numbers -->
<g font-family="Arial" font-size="10" fill="#333" font-weight="bold">
<text x="160" y="118" text-anchor="middle">12</text>
<text x="182" y="144" text-anchor="middle">3</text>
<text x="160" y="170" text-anchor="middle">6</text>
<text x="138" y="144" text-anchor="middle">9</text>
</g>
<!-- Melting Clock Hands -->
<path d="M160,140 Q160,125 155,110 T162,122"
fill="none" stroke="#333" stroke-width="2.5" stroke-linecap="round" filter="url(#melting)"/>
<path d="M160,140 Q172,142 185,138 T170,138"
fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" filter="url(#melting)"/>
<!-- Clock Center Pin -->
<circle cx="160" cy="140" r="4" fill="#333"/>
<circle cx="160" cy="140" r="1" fill="#666"/>
<!-- Light Reflections on Clock -->
<ellipse cx="140" cy="120" rx="20" ry="15" fill="white" opacity="0.15" transform="rotate(-15, 140, 120)"/>
<ellipse cx="180" cy="160" rx="10" ry="8" fill="white" opacity="0.1" transform="rotate(-15, 180, 160)"/>
<!-- Cast Shadow under the Clock -->
<ellipse cx="160" cy="155" rx="35" ry="5" fill="black" opacity="0.25" transform="rotate(-10, 160, 155)"/>
</svg>Judge's Analysis
Player 2's submission demonstrates greater creativity, technical quality, and visual appeal.
The intricate details of the melting clock, realistic textures on the tree branch, and the atmospheric sunset background create a more immersive interpretation of the prompt.
While Player 1's submission is charming, it lacks the complexity and depth of Player 2's work.
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
"An astronaut fishing for stars in a galaxy-filled lake."
"An octopus juggling glowing lanterns underwater."
"A snail racing a cheetah on a futuristic neon-lit track."
"A snail racing a turtle under a disco ball."
