Creative Challenge
"Surreal clock made of melting cheese, with hands as pasta noodles"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background with gradient -->
<defs>
<radialGradient id="bgGradient" cx="150" cy="150" r="150" fx="150" fy="150">
<stop offset="0" stop-color="#FFD700" />
<stop offset="1" stop-color="#FF69B4" />
</radialGradient>
<!-- Cheese texture pattern -->
<pattern id="cheesePattern" patternUnits="userSpaceOnUse" width="40" height="40">
<circle cx="20" cy="20" r="8" fill="#FFF8DC" stroke="#8B4513" stroke-width="2"/>
<circle cx="30" cy="10" r="5" fill="#FFF8DC" stroke="#8B4513" stroke-width="1"/>
</pattern>
<!-- Pasta noodle gradient -->
<linearGradient id="pastaGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#FF9999" />
<stop offset="1" stop-color="#FF6666" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGradient)"/>
<!-- Melting cheese clock body -->
<path d="M150,50 L120,120 Q150,130 180,120 L150,50 Z"
fill="url(#cheesePattern)" stroke="#8B4513" stroke-width="2">
<animate attributeName="d" from="M150,50 L120,120 Q150,130 180,120 L150,50 Z"
to="M150,50 L110,110 Q150,140 190,110 L150,50 Z" dur="5s" repeatCount="indefinite"/>
</path>
<!-- Cheese drips -->
<path d="M150,180 c0,0 -40,-50 -40,-90" fill="#FFD700" stroke="#8B4513" stroke-width="2">
<animate attributeName="d" from="M150,180 c0,0 -40,-50 -40,-90"
to="M150,180 c0,0 -50,-60 -50,-100" dur="4s" repeatCount="indefinite"/>
</path>
<!-- Hour hand (pasta noodle) -->
<ellipse cx="150" cy="150" rx="80" ry="10" fill="url(#pastaGradient)" stroke="#FF3300" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="120s" repeatCount="indefinite"/>
</ellipse>
<!-- Minute hand -->
<rect x="140" y="140" width="20" height="60" fill="#FFA500" rx="10" stroke="#FF6600" stroke-width="3">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite"/>
</rect>
<!-- Second hand -->
<circle cx="150" cy="150" r="5" fill="url(#pastaGradient)" stroke="#FFFFFF" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
</circle>
<!-- Melting cheese effects -->
<g transform="rotate(45 150 150)">
<path d="M0,0 Q50,50 100,0" fill="#FFD700" stroke="#8B4513" stroke-width="2"/>
<path d="M100,0 Q150,50 200,0" fill="#FFD700" stroke="#8B4513" stroke-width="2"/>
</g>
<!-- Clock face smiley -->
<g transform="translate(150 150)">
<circle r="20" fill="#FFD700" stroke="#8B4513" stroke-width="2"/>
<circle cx="-10" cy="-10" r="3" fill="#000"/>
<circle cx="10" cy="-10" r="3" fill="#000"/>
<path d="M-10,-5 Q0,-15 10,-5" fill="#000"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background -->
<rect width="300" height="300" fill="#2a1e3d"/>
<!-- Surreal melting cheese clock face -->
<defs>
<radialGradient id="cheeseGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#fff6c2"/>
<stop offset="70%" stop-color="#ffd84c"/>
<stop offset="100%" stop-color="#ffb300"/>
</radialGradient>
<filter id="gooeyEffect" height="300%" width="300%" x="-100%" y="-100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="gooey"/>
</filter>
</defs>
<!-- Main cheese clock face -->
<circle cx="150" cy="150" r="85" fill="url(#cheeseGrad)"/>
<!-- Cheese holes -->
<circle cx="120" cy="110" r="15" fill="#2a1e3d" opacity="0.7"/>
<circle cx="170" cy="180" r="12" fill="#2a1e3d" opacity="0.6"/>
<circle cx="190" cy="130" r="10" fill="#2a1e3d" opacity="0.7"/>
<circle cx="140" cy="160" r="8" fill="#2a1e3d" opacity="0.8"/>
<circle cx="110" cy="170" r="7" fill="#2a1e3d" opacity="0.7"/>
<!-- Melting cheese drips (with gooey effect) -->
<g filter="url(#gooeyEffect)">
<path d="M190,210 Q220,260 240,230 T260,260" fill="url(#cheeseGrad)"/>
<path d="M100,220 Q80,270 60,240 T30,280" fill="url(#cheeseGrad)"/>
<path d="M150,230 Q160,280 180,260 T200,290" fill="url(#cheeseGrad)"/>
<path d="M70,200 Q50,250 30,220 T10,260" fill="url(#cheeseGrad)"/>
<path d="M220,180 Q250,230 270,200 T290,240" fill="url(#cheeseGrad)"/>
</g>
<!-- Clock numbers -->
<g font-family="Arial, sans-serif" font-weight="bold" text-anchor="middle" fill="#7a4012">
<text x="150" y="85" font-size="14">12</text>
<text x="195" y="105" font-size="14">1</text>
<text x="220" y="150" font-size="14">3</text>
<text x="195" y="195" font-size="14">5</text>
<text x="150" y="220" font-size="14">6</text>
<text x="105" y="195" font-size="14">7</text>
<text x="80" y="150" font-size="14">9</text>
<text x="105" y="105" font-size="14">11</text>
</g>
<!-- Hour hand (fettuccine) -->
<g transform="rotate(45, 150, 150)">
<path d="M150,150 Q155,120 160,100 T150,85" stroke="#f2e8b3" stroke-width="8" fill="none" stroke-linecap="round"/>
<path d="M150,150 Q145,120 140,100 T150,85" stroke="#f2e8b3" stroke-width="8" fill="none" stroke-linecap="round"/>
</g>
<!-- Minute hand (spaghetti) -->
<g transform="rotate(190, 150, 150)">
<path d="M150,150 C190,140 180,110 150,80" stroke="#f7e2a1" stroke-width="4" fill="none" stroke-linecap="round"/>
<path d="M150,150 C110,140 120,110 150,80" stroke="#f7e2a1" stroke-width="4" fill="none" stroke-linecap="round"/>
</g>
<!-- Second hand (thin spaghetti) -->
<g transform="rotate(290, 150, 150)">
<path d="M150,150 L150,85" stroke="#f7d980" stroke-width="2" stroke-linecap="round"/>
<path d="M150,150 C145,120 155,120 150,85" stroke="#f7d980" stroke-width="1" fill="none"/>
</g>
<!-- Clock center cap (cherry tomato) -->
<circle cx="150" cy="150" r="10" fill="#e53935"/>
<circle cx="145" cy="145" r="3" fill="#ffffff" opacity="0.7"/>
<!-- Small oregano flakes scattered -->
<g fill="#2e7d32" opacity="0.8">
<circle cx="130" cy="120" r="1.5"/>
<circle cx="170" cy="140" r="1"/>
<circle cx="160" cy="170" r="1.5"/>
<circle cx="120" cy="160" r="1"/>
<circle cx="140" cy="190" r="1.2"/>
<circle cx="180" cy="110" r="1"/>
</g>
<!-- Parmesan cheese shavings -->
<g fill="#fff9c4" opacity="0.9">
<path d="M110,140 L115,142 L113,147 L108,145 Z"/>
<path d="M180,165 L186,164 L187,170 L181,169 Z"/>
<path d="M160,120 L164,118 L167,123 L163,125 Z"/>
</g>
</svg>Judge's Analysis
Player 2's submission clearly depicts a surreal clock with a melting cheese theme and pasta noodle hands, adhering closely to the prompt.
The image is technically well-executed and visually appealing with a distinct clock face and decorative elements.
Player 1's image lacks clarity in representing the concept of a clock made of cheese with pasta hands, making Player 2 the stronger choice.
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 giraffe sky-diving with a rainbow parachute"
"Floating city above a giant dandelion in bloom"
"An umbrella that rains upward in a clear blue sky"
"Floating umbrella jellyfish in a starfield sky"
"Surreal snail skyscraper with windows and tiny elevator doors"
"Frog in a tuxedo playing the violin under a crescent moon"
