Creative Challenge
"Melting clock tangled in vines with gears blooming as flowers"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFD700; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFAA00; stop-opacity:1" />
</linearGradient>
<radialGradient id="vineGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3D7025; stop-opacity:1" />
<stop offset="100%" style="stop-color:#A5D08D; stop-opacity:1" />
</radialGradient>
<linearGradient id="flowerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF4D4D; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFC0CB; stop-opacity:1" />
</linearGradient>
</defs>
<g transform="translate(150, 150)">
<path d="M-30,-40 C-50,-90 -100,-60 -70,-20 C-70,10 -80,20 -70,40 C-60,60 -30,60 -20,30 C-10,0 -20,-10 -15,-40 Z"
fill="url(#goldGradient)" stroke="black" stroke-width="2" />
<circle cx="-20" cy="-30" r="5" fill="black"/>
<text x="-25" y="-50" font-family="Arial" font-size="14" fill="black">12</text>
<text x="-45" y="-20" font-family="Arial" font-size="14" fill="black">3</text>
<text x="-25" y="10" font-family="Arial" font-size="14" fill="black">6</text>
<text x="10" y="-20" font-family="Arial" font-size="14" fill="black">9</text>
<g transform="scale(0.5)">
<path d="M40,10 C70,40 70,60 40,90 C10,120 -20,130 -40,90 C-60,50 -50,10 -40,-10 C-30,-30 0,-40 10,-10 Z"
fill="url(#vineGradient)" />
<path d="M10,100 C10,120 30,120 30,100 C30,80 10,80 10,100 Z" fill="url(#flowerGradient)" />
<path d="M90,40 C80,50 80,70 90,80 C100,90 120,90 130,80 C140,70 140,50 130,40 C120,30 100,30 90,40 Z"
fill="url(#flowerGradient)" />
<path d="M160,120 C150,130 150,150 160,160 C170,170 190,170 200,160 C210,150 210,130 200,120 C190,110 170,110 160,120 Z"
fill="url(#flowerGradient)" />
</g>
<g fill="black">
<circle cx="-10" cy="10" r="8" />
<circle cx="30" cy="-30" r="8" />
<circle cx="20" cy="40" r="8" />
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="clockGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#FF8C00"/>
</linearGradient>
<radialGradient id="gearGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#A9A9A9"/>
<stop offset="100%" stop-color="#2F4F4F"/>
</radialGradient>
<pattern id="vinePattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M10 0 Q15 10 10 20 T10 40" stroke="#228B22" stroke-width="3" fill="none"/>
</pattern>
</defs>
<rect width="300" height="300" fill="#F0F8FF"/>
<path d="M150,100 C180,70 220,80 250,120 C280,160 260,200 230,220 C200,240 120,240 90,200 C60,160 70,90 120,70 C130,80 140,90 150,100 Z" fill="url(#clockGradient)" stroke="#000" stroke-width="3"/>
<path d="M150,100 Q180,130 150,160 Q120,130 150,100 Z" fill="#FF4500" stroke="#000" stroke-width="3"/>
<path d="M150,100 Q180,130 150,160 Q120,130 150,100 Z" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="5,5"/>
<circle cx="150" cy="130" r="5" fill="#000"/>
<path d="M150,130 L150,100" stroke="#000" stroke-width="3"/>
<path d="M150,130 L180,150" stroke="#000" stroke-width="3"/>
<g transform="translate(100, 200) scale(0.8)">
<circle cx="50" cy="50" r="40" fill="url(#gearGradient)" stroke="#000" stroke-width="3"/>
<path d="M50,10 L50,90 M10,50 L90,50 M25,25 L75,75 M25,75 L75,25" stroke="#000" stroke-width="3"/>
</g>
<g transform="translate(200, 150) scale(0.6)">
<circle cx="50" cy="50" r="40" fill="url(#gearGradient)" stroke="#000" stroke-width="3"/>
<path d="M50,10 L50,90 M10,50 L90,50 M25,25 L75,75 M25,75 L75,25" stroke="#000" stroke-width="3"/>
</g>
<g transform="translate(50, 100) scale(0.5)">
<circle cx="50" cy="50" r="40" fill="url(#gearGradient)" stroke="#000" stroke-width="3"/>
<path d="M50,10 L50,90 M10,50 L90,50 M25,25 L75,75 M25,75 L75,25" stroke="#000" stroke-width="3"/>
</g>
<rect x="0" y="0" width="300" height="300" fill="url(#vinePattern)" opacity="0.5"/>
<path d="M0,150 Q75,100 150,150 T300,150" stroke="#228B22" stroke-width="5" fill="none"/>
<path d="M0,200 Q75,250 150,200 T300,200" stroke="#228B22" stroke-width="5" fill="none"/>
<path d="M0,100 Q75,50 150,100 T300,100" stroke="#228B22" stroke-width="5" fill="none"/>
<circle cx="150" cy="150" r="10" fill="#FFD700" stroke="#000" stroke-width="2"/>
<path d="M150,150 Q175,175 200,200 T250,250" stroke="#FF4500" stroke-width="3" fill="none" stroke-dasharray="5,5"/>
<path d="M150,150 Q125,125 100,100 T50,50" stroke="#FF4500" stroke-width="3" fill="none" stroke-dasharray="5,5"/>
<path d="M150,150 Q175,125 200,100 T250,50" stroke="#FF4500" stroke-width="3" fill="none" stroke-dasharray="5,5"/>
<path d="M150,150 Q125,175 100,200 T50,250" stroke="#FF4500" stroke-width="3" fill="none" stroke-dasharray="5,5"/>
</svg>Judge's Analysis
Player 2's image clearly depicts a melting clock entangled in vines with gears that resemble blooming flowers, adhering closely to the prompt.
The use of wavy patterns and intersecting elements adds visual interest and creativity.
Player 1's image is abstract and lacks clear elements of a melting clock or gears, making it less aligned with the prompt.
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 cat floating in space, wearing an astronaut helmet, chasing a glowing alien fish"
"Rainbow-colored iceberg floating in lemonade sea"
"A clock melting over an iceberg"
"Cat wearing a cape, flying over a cityscape at night, with stars and moon"
"A jellyfish skyscraper with city lights glowing through tentacles"
"Butterfly wings made of stained glass, catching sunlight through them"
