Creative Challenge
"An ice cream cone melting into the shape of a city skyline."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background Gradient -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87CEFA"/>
<stop offset="100%" stop-color="#F0F8FF"/>
</linearGradient>
<linearGradient id="meltGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FFB6C1"/>
<stop offset="100%" stop-color="#FF69B4"/>
</linearGradient>
<linearGradient id="coneGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#F4A460"/>
<stop offset="100%" stop-color="#D2691E"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Cone -->
<polygon points="140,180 160,180 150,250" fill="url(#coneGradient)" />
<!-- Melting Ice Cream -->
<path d="M140,180 C120,170 120,150 130,140 Q140,130 150,140 Q160,130 170,140 C180,150 180,170 160,180 C180,190 190,210 170,230 C150,240 140,220 140,200"
fill="url(#meltGradient)" />
<!-- City Skyline in the Melting Ice Cream -->
<g fill="#A52A2A" opacity="0.8">
<rect x="135" y="160" width="10" height="20"/>
<rect x="150" y="155" width="12" height="25"/>
<rect x="165" y="165" width="8" height="15"/>
<rect x="148" y="160" width="4" height="10" fill="#FF6347"/>
<rect x="156" y="160" width="6" height="20" fill="#FF4500"/>
</g>
<!-- Drips -->
<path d="M130,200 Q132,220 140,230 Q145,235 140,250"
fill="url(#meltGradient)" />
<path d="M155,210 Q160,230 165,240 Q170,255 165,270"
fill="url(#meltGradient)" />
<path d="M170,200 Q172,220 180,230 Q185,235 180,250"
fill="url(#meltGradient)" />
<!-- Street and Details -->
<rect x="110" y="250" width="80" height="5" fill="#2F4F4F" />
<path d="M120,250 L120,300" stroke="#2F4F4F" stroke-width="2" />
<path d="M160,250 L160,300" stroke="#2F4F4F" stroke-width="2" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Cone pattern -->
<pattern id="conePattern" patternUnits="userSpaceOnUse" width="16" height="16" patternTransform="rotate(30)">
<rect width="16" height="16" fill="#e6ac6a" />
<path d="M0 8 H16" stroke="#b97b33" stroke-width="1"/>
<path d="M8 0 V16" stroke="#b97b33" stroke-width="1"/>
</pattern>
<!-- Ice cream gradient -->
<radialGradient id="iceGrad1" cx="0.5" cy="0.5" r="0.8">
<stop offset="0%" stop-color="#ffefef" />
<stop offset="65%" stop-color="#ff7eb8" />
<stop offset="100%" stop-color="#c23b71" />
</radialGradient>
<radialGradient id="iceGrad2" cx="0.6" cy="0.1" r="0.8">
<stop offset="0%" stop-color="#eafffa" />
<stop offset="60%" stop-color="#86f4ff" />
<stop offset="95%" stop-color="#188db2" />
</radialGradient>
<!-- Skyline highlight gradient -->
<linearGradient id="skylineHighlight" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fffdc5" stop-opacity="0.9"/>
<stop offset="80%" stop-color="#ffd17e" stop-opacity="0"/>
</linearGradient>
<radialGradient id="meltShadow" cx="0.5" cy="1" r="1">
<stop offset="0%" stop-color="#f2a7e6" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<!-- Sprinkles -->
<linearGradient id="sprinklesGrad1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffe346"/>
<stop offset="100%" stop-color="#ffb14c"/>
</linearGradient>
<linearGradient id="sprinklesGrad2" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#6defa9"/>
<stop offset="100%" stop-color="#358c71"/>
</linearGradient>
<linearGradient id="sprinklesGrad3" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fd689a"/>
<stop offset="100%" stop-color="#b5175c"/>
</linearGradient>
</defs>
<!-- Shadow (melting pooled ice cream) -->
<ellipse cx="153" cy="261" rx="78" ry="18" fill="url(#meltShadow)" />
<!-- Cone -->
<g>
<polygon points="120,155 180,155 150,264" fill="url(#conePattern)" stroke="#b27311" stroke-width="2"/>
<!-- Cone highlight -->
<path d="M149 170 Q155 205 143 230" fill="none" stroke="#fffbe6" stroke-width="2" opacity="0.3"/>
</g>
<!-- Melting Ice Cream Scoop (main) -->
<g>
<ellipse cx="150" cy="110" rx="54" ry="46" fill="url(#iceGrad1)" stroke="#c23b71" stroke-width="3" />
<!-- Melting drips that form the skyline silhouette -->
<path
d="M98,124
Q102,195 104,210
Q110,212 120,180
Q122,222 132,220
Q138,190 140,170
Q148,240 156,230
Q160,180 170,160
Q174,205 182,206 Q184,191 186,179
Q198,262 202,209
Q205,162 203,124 Z"
fill="url(#iceGrad2)"
stroke="#188db2"
stroke-width="2"
opacity="0.96"/>
<!-- Skyline windows (melt drops as highlights) -->
<rect x="114" y="192" width="5" height="10" rx="1" fill="url(#skylineHighlight)" opacity="0.7"/>
<rect x="132" y="210" width="5" height="8" rx="1" fill="url(#skylineHighlight)" opacity="0.6"/>
<rect x="152" y="230" width="5" height="11" rx="1" fill="url(#skylineHighlight)" opacity="0.5"/>
<rect x="172" y="180" width="4.5" height="8" rx="1" fill="url(#skylineHighlight)" opacity="0.55"/>
<rect x="191" y="210" width="5" height="7" rx="1" fill="url(#skylineHighlight)" opacity="0.45"/>
<!-- Extra scoop -->
<ellipse cx="172" cy="82" rx="27" ry="23" fill="url(#iceGrad2)" stroke="#188db2" stroke-width="1.5" opacity="0.95"/>
<ellipse cx="127" cy="90" rx="21" ry="17" fill="url(#iceGrad1)" stroke="#dd609c" stroke-width="1.3" opacity="0.92"/>
<!-- Drip details -->
<path d="M140,131 Q145,145 143,156 Q144,158 149,158 Q155,151 153,137 Q157,142 160,151 Q161,154 170,151 Q167,144 162,138 Q170,140 172,133"
fill="none" stroke="#fff" stroke-width="2" opacity="0.17"/>
<!-- Sprinkles -->
<ellipse cx="156" cy="98" rx="3" ry="1.7" fill="url(#sprinklesGrad1)" transform="rotate(-20 156 98)"/>
<ellipse cx="140" cy="76" rx="2" ry="1.1" fill="url(#sprinklesGrad2)" transform="rotate(12 140 76)"/>
<ellipse cx="175" cy="90" rx="2.7" ry="1.3" fill="url(#sprinklesGrad3)" transform="rotate(-8 175 90)"/>
<ellipse cx="157" cy="120" rx="1.6" ry="2.1" fill="#ffe765" transform="rotate(-40 157 120)"/>
<ellipse cx="133" cy="102" rx="2" ry="1" fill="#77deff" transform="rotate(15 133 102)"/>
<ellipse cx="165" cy="110" rx="1.6" ry="2" fill="#ff7ead" transform="rotate(-15 165 110)"/>
</g>
<!-- Melting puddle-form cityscape base-->
<g>
<!-- Foreground building base (as a puddle) -->
<path d="M102,235 Q124,248 130,235 Q138,248 144,230 Q155,248 166,234 Q183,252 194,233 Q210,251 222,235 Q237,253 243,233 Q250,215 124,220 Q110,218 102,235"
fill="url(#iceGrad1)" opacity="0.68"/>
<!-- Reflections -->
<rect x="116" y="241" width="6" height="9" rx="2" fill="#fff" opacity="0.13"/>
<rect x="138" y="232" width="4" height="7" rx="2" fill="#fffce7" opacity="0.09"/>
<rect x="153" y="247" width="5" height="7" rx="2" fill="#ffe3ed" opacity="0.10"/>
<rect x="191" y="240" width="3" height="6" rx="2" fill="#fff5b2" opacity="0.10"/>
</g>
<!-- Cone shadow enhancement -->
<ellipse cx="150" cy="264" rx="30" ry="12" fill="#a38151" opacity="0.14"/>
<!-- Floating city sparkle lights -->
<g>
<circle cx="127" cy="163" r="2.3" fill="#fffbf1" opacity="0.4"/>
<circle cx="165" cy="170" r="1.8" fill="#e7fde4" opacity="0.35"/>
<circle cx="148" cy="186" r="2.6" fill="#fffdf2" opacity="0.26"/>
<circle cx="172" cy="204" r="1.5" fill="#fffbe9" opacity="0.22"/>
<circle cx="134" cy="204" r="1.5" fill="#eeffd8" opacity="0.16"/>
</g>
<!-- Whimsical clouds in the background -->
<g>
<ellipse cx="80" cy="100" rx="15" ry="6" fill="#fff" opacity="0.32"/>
<ellipse cx="95" cy="107" rx="7" ry="3" fill="#eceaff" opacity="0.41"/>
<ellipse cx="220" cy="95" rx="16" ry="7" fill="#fff" opacity="0.18"/>
<ellipse cx="210" cy="106" rx="8" ry="4" fill="#e7f5fa" opacity="0.25"/>
<ellipse cx="142" cy="56" rx="11" ry="5" fill="#fff" opacity="0.09"/>
</g>
</svg>Judge's Analysis
Player 1's submission creatively integrates the melting ice cream into a city skyline, adhering closely to the prompt.
While the execution is minimalistic, the conceptual link between the melting and the skyline is clear and imaginative.
Player 2's design, though technically polished, does not effectively represent a city skyline, 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.
