Creative Challenge
"A melting clock dripping off a tree branch under a starry night sky."
<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:#001F3F; stop-opacity:1" />
<stop offset="100%" style="stop-color:#004d99; stop-opacity:1" />
</linearGradient>
<radialGradient id="clockGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFD700; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFA500; stop-opacity:1" />
</radialGradient>
<pattern id="starPattern" patternUnits="userSpaceOnUse" width="4" height="4">
<circle cx="1" cy="1" r="0.5" fill="#ffffff" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#skyGradient)" />
<rect width="100%" height="100%" fill="url(#starPattern)" opacity="0.4" />
<line x1="100" y1="150" x2="150" y2="100" stroke="#8B4513" stroke-width="10" />
<line x1="150" y1="100" x2="170" y2="160" stroke="#8B4513" stroke-width="10" />
<line x1="170" y1="160" x2="130" y2="180" stroke="#8B4513" stroke-width="10" />
<ellipse cx="150" cy="120" rx="30" ry="50" fill="url(#clockGradient)" />
<path d="M135,120 Q140,90 170,100 Q160,140 135,120" fill="none" stroke="black" stroke-width="2" />
<path d="M140,120 Q150,150 160,145 Q165,135 150,155 Q145,150 140,120 Z" fill="#FF6347" />
<rect x="145" y="60" width="10" height="50" fill="black" />
<g fill="none" stroke="black" stroke-width="2">
<line x1="150" y1="60" x2="150" y2="70"/>
<line x1="150" y1="80" x2="150" y2="90"/>
<line x1="150" y1="100" x2="150" y2="110"/>
<line x1="150" y1="120" x2="150" y2="130"/>
</g>
<circle cx="50" cy="50" r="2" fill="#ffffff" />
<circle cx="250" cy="75" r="2" fill="#ffffff" />
<circle cx="220" cy="150" r="2" fill="#ffffff" />
<circle cx="275" cy="200" r="2" fill="#ffffff" />
<circle cx="10" cy="230" r="2" fill="#ffffff" />
<circle cx="80" cy="280" r="2" fill="#ffffff" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="30%" r="75%" fx="50%" fy="20%">
<stop offset="0%" style="stop-color:#0A1028;" /> <!-- Deep dark blue -->
<stop offset="35%" style="stop-color:#101838;" /> <!-- Dark indigo -->
<stop offset="70%" style="stop-color:#201A40;" /> <!-- Dark purple -->
<stop offset="100%" style="stop-color:#000510;" /> <!-- Near black -->
</radialGradient>
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="0.7" />
</filter>
<filter id="subtleBranchHighlightFilter" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blurAlpha"/>
<feSpecularLighting in="blurAlpha" surfaceScale="2" specularConstant="0.5" specularExponent="10" lighting-color="#8899AA" result="specOut">
<fePointLight x="150" y="100" z="200"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
<filter id="shadowBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2.5" />
</filter>
<linearGradient id="branchGradient" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" style="stop-color:#4A3B31;" /> <!-- Darker top -->
<stop offset="40%" style="stop-color:#3E2E28;" />
<stop offset="100%" style="stop-color:#30221C;" /> <!-- Darkest bottom -->
</linearGradient>
<linearGradient id="clockColorGradient" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#F8F0C0" /> <!-- Pale creamy gold -->
<stop offset="30%" stop-color="#E8D898" /> <!-- Richer gold -->
<stop offset="70%" stop-color="#D0B870" /> <!-- Deeper, slightly aged gold -->
<stop offset="100%" stop-color="#B09050" /> <!-- Shadowed gold -->
</linearGradient>
<radialGradient id="clockHighlightGradient" cx="0.45" cy="0.35" r="0.6">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.5"/>
<stop offset="60%" stop-color="#FFFDE0" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#F8F0C0" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background Sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars" fill="white">
<circle cx="25" cy="35" r="1.3" opacity="0.9" filter="url(#starGlow)"/>
<circle cx="70" cy="20" r="0.7" opacity="0.65"/>
<circle cx="50" cy="80" r="1" opacity="0.8"/>
<circle cx="110" cy="45" r="1.6" opacity="1" filter="url(#starGlow)"/>
<circle cx="140" cy="25" r="0.9" opacity="0.75"/>
<circle cx="180" cy="60" r="1.4" opacity="0.9" filter="url(#starGlow)"/>
<circle cx="210" cy="15" r="0.8" opacity="0.7"/>
<circle cx="240" cy="75" r="1.2" opacity="0.85"/>
<circle cx="270" cy="40" r="1.5" opacity="0.95" filter="url(#starGlow)"/>
<circle cx="290" cy="100" r="0.9" opacity="0.7"/>
<circle cx="40" cy="210" r="1.1" opacity="0.75"/>
<circle cx="80" cy="240" r="0.7" opacity="0.6"/>
<circle cx="120" cy="280" r="1" opacity="0.8"/>
<circle cx="160" cy="265" r="1.3" opacity="0.9" filter="url(#starGlow)"/>
<circle cx="200" cy="290" r="0.8" opacity="0.65"/>
<circle cx="230" cy="230" r="1.2" opacity="0.85"/>
<circle cx="260" cy="200" r="1.4" opacity="0.9"/>
<circle cx="15" cy="130" r="0.6" opacity="0.6" />
<circle cx="285" cy="160" r="1.1" opacity="0.8" filter="url(#starGlow)" />
<circle cx="150" cy="15" r="0.5" opacity="0.5" />
<circle cx="90" cy="120" r="0.9" opacity="0.7" />
<circle cx="200" cy="140" r="1.0" opacity="0.75" filter="url(#starGlow)" />
</g>
<!-- Tree Branch -->
<path id="branch"
d="M-15 155 Q 40 140, 90 148 C 150 158, 220 150, 305 135 L 305 152 Q 220 168, 150 175 C 90 180, 40 170, -15 172 Z"
fill="url(#branchGradient)" stroke="#281C15" stroke-width="1.5" filter="url(#subtleBranchHighlightFilter)"/>
<!-- Clock Shadow on Branch -->
<ellipse cx="150" cy="160" rx="35" ry="7" fill="black" opacity="0.35" filter="url(#shadowBlur)"/>
<!-- Melting Clock -->
<g id="meltingClock" transform="translate(0,5)"> <!-- Shift clock slightly down for better branch interaction -->
<path id="clockBody"
d="M150,65 A42,42 0 0 0 108,107 C95,130 105,148 122,153 C115,185 105,215 132,248 Q150,270 168,248 C195,215 185,185 178,153 C195,148 205,130 192,107 A42,42 0 0 0 150,65 Z"
fill="url(#clockColorGradient)" stroke="#684A23" stroke-width="2" stroke-linejoin="round"/>
<path id="clockBodyHighlight"
d="M150,65 A42,42 0 0 0 108,107 C95,130 105,148 122,153 C115,185 105,215 132,248 Q150,270 168,248 C195,215 185,185 178,153 C195,148 205,130 192,107 A42,42 0 0 0 150,65 Z"
fill="url(#clockHighlightGradient)" style="pointer-events:none;"/>
<!-- Clock Markers (distorted Roman numerals as paths for more artistic control) -->
<g id="clockNumerals" fill="#503818" stroke="none">
<!-- XII -->
<path d="M148,73 L152,73 L153,70 L155,70 L153,80 L151,80 L151,73 L149,80 L147,80 L149,70 L147,70 Z" transform="rotate(-3 150 75)"/>
<!-- III -->
<path d="M180,105 L188,105 L188,107 L180,107ZM180,109 L188,109 L188,111 L180,111ZM180,113 L188,113 L188,115 L180,115Z" transform="rotate(12 184 110) scale(0.85)"/>
<!-- VI -->
<path d="M145,180 L149,180 L149,188 L152,188 Q152,195 147,195 Q142,195 142,188 L145,188 Z M143,178 L151,178 L147,172 Z" transform="rotate(5 147 185) scale(0.8 1.2)"/>
<!-- IX -->
<path d="M112,105 L120,105 L118,107 L114,107 L114,113 L118,113 L120,115 L112,115 L114,113 L112,113 Z" transform="rotate(-12 116 110) scale(0.85)"/>
</g>
<!-- Clock center pin -->
<circle cx="150" cy="108" r="3.5" fill="#4A3018" stroke="#2A1808" stroke-width="0.7"/>
<!-- Clock Hands -->
<g id="clockHands" fill="#4A3018" stroke="#2A1808" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<!-- Hour Hand (short, thick, droopy) - pointing towards 4-5 -->
<path d="M150,108 C158,114 168,122 162,135 Q160,142 155,137 C153,128 151,118 150,108 Z" />
<!-- Minute Hand (long, slender, very droopy) - pointing towards 7-8 -->
<path d="M150,108 C140,118 128,138 135,162 Q140,170 147,160 C149,145 149.5,125 150,108 Z" />
</g>
</g>
</svg>Judge's Analysis
Player 2's submission captures the concept of a melting clock under a starry night sky more effectively with its smooth, surreal design and a clear depiction of a clock dripping off a tree branch.
The composition is visually appealing and technically polished, adhering closely to the prompt.
Player 1's submission, while creative, lacks detail and refinement in representing the melting clock and overall scene.
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 jellyfish wearing a suit and tie, floating through a city skyline at dusk."
"An octopus juggling planets in deep space."
"An ice-cream cone melting under a tiny sun wearing sunglasses."
