Creative Challenge
"An ice cream cone melting into the shape of a human face."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients for ice cream and face -->
<linearGradient id="icecreamGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff7eb9"/>
<stop offset="100%" stop-color="#ff62a5"/>
</linearGradient>
<linearGradient id="faceGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffe0b2"/>
<stop offset="100%" stop-color="#ffd19b"/>
</linearGradient>
<!-- Pattern for sprinkles -->
<pattern id="sprinklePattern" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
<circle cx="2" cy="2" r="1" fill="#fa8072"/>
</pattern>
<!-- Mask for melting effect -->
<mask id="meltingMask">
<rect x="0" y="0" width="300" height="300" fill="white"/>
</mask>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#f0f8ff"/>
<!-- Ice Cream Cone -->
<polygon points="150,100 130,200 170,200" fill="saddlebrown"/>
<!-- Ice Cream Scoop -->
<circle cx="150" cy="80" r="40" fill="url(#icecreamGradient)" stroke="#e75480" stroke-width="4"/>
<!-- Sprinkles on Ice Cream -->
<circle cx="135" cy="70" r="2" fill="url(#sprinklePattern)"/>
<circle cx="165" cy="75" r="2" fill="url(#sprinklePattern)"/>
<circle cx="150" cy="85" r="2" fill="url(#sprinklePattern)"/>
<circle cx="140" cy="60" r="2" fill="url(#sprinklePattern)"/>
<circle cx="160" cy="65" r="2" fill="url(#sprinklePattern)"/>
<!-- Melting Drips -->
<path d="M110,120 Q105,140 125,130 Q115,145 135,140 Q125,155 145,150 Q135,165 155,160 Q145,175 165,170 Q160,180 150,200 Q160,190 150,180" fill="none" stroke="#ffdead" stroke-width="6" mask="url(#meltingMask)"/>
<!-- Face - base shape -->
<ellipse cx="150" cy="200" rx="50" ry="70" fill="url(#faceGradient)" stroke="#d2b48c" stroke-width="4"/>
<!-- Eyes -->
<circle cx="130" cy="185" r="5" fill="#000"/>
<circle cx="170" cy="185" r="5" fill="#000"/>
<!-- Eyelids (for expression) -->
<rect x="125" y="180" width="10" height="2" fill="#555"/>
<rect x="165" y="180" width="10" height="2" fill="#555"/>
<!-- Nose -->
<path d="M150,190 Q148,195 150,200 Q152,195 150,190" fill="#d2b48c"/>
<!-- Mouth -->
<path d="M130,210 Q150,220 170,210" stroke="#a0522d" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- Cheeks with blush -->
<circle cx="115" cy="200" r="4" fill="#ffe4e1" opacity="0.6"/>
<circle cx="185" cy="200" r="4" fill="#ffe4e1" opacity="0.6"/>
<!-- Melting face elements, melting into the cone -->
<path d="M115,230 Q110,250 125,255 Q120,265 135,260 Q130,268 145,265 Q140,275 155,270 Q150,278 165,275 Q160,280 150,300 Q135,290 125,300 Q150,290 135,300 Q170,290 150,300" fill="#ffe0b2" opacity="0.8"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<pattern id="waffle" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
<path d="M0,5 l10,0" stroke="#d4a373" stroke-width="1"/>
</pattern>
<radialGradient id="scoopGrad" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#ffe2ec"/>
<stop offset="60%" stop-color="#f98cb8"/>
<stop offset="100%" stop-color="#f15a8a"/>
</radialGradient>
<linearGradient id="faceGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffd5c2"/>
<stop offset="100%" stop-color="#f2b799"/>
</linearGradient>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.2"/>
</filter>
</defs>
<!-- Cone -->
<polygon points="100,170 200,170 150,260" fill="url(#waffle)" stroke="#d4a373" stroke-width="2" filter="url(#softShadow)"/>
<!-- Scoop -->
<path d="M70,160 A80,80 0 0,1 230,160 C200,140 180,180 150,180 C120,180 100,140 70,160 Z"
fill="url(#scoopGrad)" stroke="#f98cb8" stroke-width="2" filter="url(#softShadow)"/>
<!-- Sprinkles -->
<circle cx="110" cy="130" r="4" fill="#8dd3c7"/>
<circle cx="140" cy="110" r="3" fill="#ffffb3"/>
<circle cx="180" cy="125" r="4" fill="#bebada"/>
<circle cx="160" cy="150" r="3" fill="#fb8072"/>
<circle cx="200" cy="140" r="3" fill="#80b1d3"/>
<circle cx="120" cy="150" r="3" fill="#fdb462"/>
<circle cx="180" cy="100" r="3" fill="#b3de69"/>
<circle cx="90" cy="120" r="3" fill="#fccde5"/>
<!-- Highlight -->
<ellipse cx="150" cy="120" rx="50" ry="20" fill="#fff" opacity="0.2"/>
<!-- Melting Face -->
<path d="M125,165 C120,170 120,180 130,185 C135,187 140,185 145,183 C150,180 155,175 153,170
C150,165 145,160 145,155 C145,140 135,130 125,135 C115,140 120,160 125,165 Z"
fill="url(#faceGrad)" stroke="#e8a88c" stroke-width="1"/>
</svg>Judge's Analysis
Player 2's submission better adheres to the prompt, as the melting ice cream integrates facial features more clearly and creatively.
The use of sprinkles and a cone enhances the visual appeal and aligns with the theme.
Player 1's submission, while unique, lacks clarity in showing the melting effect or a clear connection to the ice cream cone concept.
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
"Robot juggling planets under a starry sky."
"A cat balancing on a stack of colorful teacups."
"An octopus wearing a top hat, balancing teacups on each tentacle."
"A giraffe painting a sunset on a canvas, using its tongue as a paintbrush."
