Creative Challenge
"An ice cream cone melting into the shape of a famous landmark."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient for the cone -->
<linearGradient id="coneGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d2a679" />
<stop offset="100%" stop-color="#8b5e3c" />
</linearGradient>
<!-- Gradient for the melting ice cream -->
<linearGradient id="iceCreamGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff9a9e" />
<stop offset="50%" stop-color="#fad0c4" />
<stop offset="100%" stop-color="#fad0c4" />
</linearGradient>
<!-- Clip path for the melting drizzle effect -->
<clipPath id="landmarkClip">
<path d="M150 20 L185 100 L173 140 L203 220 L150 180 L97 220 L127 140 L115 100 Z" />
</clipPath>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#f0f8ff" />
<!-- The ice cream cone -->
<polygon points="140,180 160,180 190,280 110,280" fill="url(#coneGradient)" stroke="#8b5e3c" stroke-width="2"/>
<!-- The melting ice cream that transitions into a famous landmark shape (Eiffel Tower inspired outline) -->
<g clip-path="url(#landmarkClip)">
<path d="M150 20
C 180 30, 210 50, 185 100
C 190 115, 173 140, 150 130
C 127 140, 110 115, 115 100
C 90 50, 120 30, 150 20 Z"
fill="url(#iceCreamGradient)" stroke="#ff6f61" stroke-width="2"/>
<!-- Drips and melting details -->
<path d="M150 45
C 140 55, 145 75, 150 85"
fill="none" stroke="#ff6f61" stroke-width="2"/>
<path d="M160 35
C 165 55, 170 75, 165 95"
fill="none" stroke="#ff6f61" stroke-width="2"/>
<path d="M140 35
C 135 55, 130 75, 135 95"
fill="none" stroke="#ff6f61" stroke-width="2"/>
</g>
<!-- Superimpose an Eiffel Tower inspired structure emerging from the melting ice cream -->
<path d="M150 130
L150 180
M150 130
L135 155
M150 130
L165 155
M150 145
L130 170
M150 145
L170 170"
stroke="#8b5e3c" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Additional shadow to evoke melting effect -->
<ellipse cx="150" cy="185" rx="25" ry="8" fill="rgba(0,0,0,0.2)"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<pattern id="wafflePattern" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
<line x1="0" y1="5" x2="10" y2="5" stroke="#AF8057" stroke-width="1.2"/>
<line x1="5" y1="0" x2="5" y2="10" stroke="#AF8057" stroke-width="1.2"/>
</pattern>
<linearGradient id="coneGradientDef" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#F5DEB3;" /> <!-- wheat -->
<stop offset="50%" style="stop-color:#D2B48C;" /> <!-- tan -->
<stop offset="100%" style="stop-color:#F5DEB3;" />
</linearGradient>
<radialGradient id="scoopGradientDef" cx="0.5" cy="0.4" r="0.7">
<stop offset="0%" style="stop-color:#FFDAE0;" /> <!-- Lighter Pink -->
<stop offset="50%" style="stop-color:#FF69B4;" /> <!-- hotpink -->
<stop offset="100%" style="stop-color:#C71585;" /> <!-- mediumvioletred -->
</radialGradient>
<linearGradient id="meltGradientDef" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" style="stop-color:#FFB6C1;" /> <!-- lightpink -->
<stop offset="40%" style="stop-color:#FF69B4;" /> <!-- hotpink -->
<stop offset="100%" style="stop-color:#B22222;" /> <!-- firebrick (darker red for base) -->
</linearGradient>
<radialGradient id="skyBackgroundDef" cx="0.5" cy="0.2" r="0.8"> <!-- cy raised for sunnier top -->
<stop offset="0%" style="stop-color:#87CEFA;" /> <!-- lightskyblue -->
<stop offset="60%" style="stop-color:#B0E0E6;" /> <!-- powderblue -->
<stop offset="100%" style="stop-color:#F0FFFF;" /> <!-- azure -->
</radialGradient>
<filter id="gooeyMeltFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" 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 18 -7" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyBackgroundDef)" />
<!-- Melted Puddle at the base -->
<g id="puddle" filter="url(#gooeyMeltFilter)">
<ellipse cx="150" cy="280" rx="100" ry="25" fill="#FFB6C1" opacity="0.75"/>
<ellipse cx="150" cy="283" rx="80" ry="20" fill="#FF69B4" opacity="0.65"/>
<ellipse cx="115" cy="278" rx="40" ry="18" fill="#FFB6C1" opacity="0.55"/>
<ellipse cx="185" cy="278" rx="40" ry="18" fill="#FFB6C1" opacity="0.55"/>
</g>
<!-- Ice Cream Cone -->
<g id="cone">
<polygon points="130,120 170,120 150,210" fill="url(#coneGradientDef)" stroke="#A0522D" stroke-width="1.5"/>
<polygon points="130,120 170,120 150,210" fill="url(#wafflePattern)" opacity="0.7"/>
</g>
<!-- Melting Ice Cream (Eiffel Tower Shape) -->
<g id="melting-eiffel-tower" filter="url(#gooeyMeltFilter)">
<path id="eiffelMeltShape"
d="M 150 110
C 145 130, 135 150, 125 170
L 120 175
C 122 185, 115 210, 100 240
L 95 245
C 90 255, 85 265, 80 275
L 140 275
Q 150 260, 160 275
L 220 275
C 215 265, 210 255, 205 245
L 200 240
C 185 210, 178 185, 180 175
L 175 170
C 165 150, 155 130, 150 110
Z"
fill="url(#meltGradientDef)" />
<!-- Central Spire/Drip (top point of tower) -->
<path d="M150,95 Q147,103 150,110 Q153,103 150,95 Z" fill="#FF69B4" />
<!-- Internal structure / Drips suggesting Eiffel Tower levels -->
<path d="M125,170 C135,167 165,167 175,170 L173,178 C160,174 140,174 127,178 Z" fill="#C71585" opacity="0.7"/>
<path d="M100,240 C120,237 180,237 200,240 L198,248 C175,244 125,244 102,248 Z" fill="#C71585" opacity="0.6"/>
<path d="M105,180 Q103,200 105,220 T104,240" stroke="#DB7093" fill="none" stroke-width="3.5" stroke-linecap="round" opacity="0.8"/>
<path d="M195,180 Q197,200 195,220 T196,240" stroke="#DB7093" fill="none" stroke-width="3.5" stroke-linecap="round" opacity="0.8"/>
<path d="M120,175 Q118,185 122,190 T120,198" fill="#FF69B4" />
<path d="M180,175 Q182,185 178,190 T180,198" fill="#FF69B4" />
<path d="M90,250 Q88,258 92,262 T90,270" fill="#FF69B4" opacity="0.8" />
<path d="M210,250 Q212,258 208,262 T210,270" fill="#FF69B4" opacity="0.8" />
</g>
<!-- Ice Cream Scoop (Unmelted Part) -->
<g id="scoop" filter="url(#gooeyMeltFilter)">
<ellipse cx="150" cy="105" rx="38" ry="33" fill="url(#scoopGradientDef)"/>
<ellipse cx="138" cy="100" rx="28" ry="25" fill="url(#scoopGradientDef)" />
<ellipse cx="162" cy="100" rx="28" ry="25" fill="url(#scoopGradientDef)" />
<path d="M140,88 Q150,83 160,90 Q155,98 145,98 Q140,93 140,88 Z" fill="#FFFFFF" opacity="0.4"/> <!-- Highlight -->
</g>
</svg>Judge's Analysis
Player 2's submission demonstrates greater creativity and adherence to the prompt with a clear transformation of the ice cream into a recognizable landmark-like shape.
The technical execution and use of gradients add visual appeal and depth, making it more polished.
Player 1's image is simpler and less detailed, making the landmark representation less convincing.
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
"“Two fish playing chess underwater.”"
"A jellyfish-shaped hot air balloon floating above a glowing underwater city."
"A floating island with a single tree and roots dangling into the clouds."
