Creative Challenge
"An ice cream cone melting into the shape of a sleeping cat."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Ice cream gradients -->
<radialGradient id="strawberry" cx="0.3" cy="0.3">
<stop offset="0%" style="stop-color:#FFADD6"/>
<stop offset="60%" style="stop-color:#FF69B4"/>
<stop offset="100%" style="stop-color:#C71585"/>
</radialGradient>
<radialGradient id="mint" cx="0.3" cy="0.3">
<stop offset="0%" style="stop-color:#AAFFAA"/>
<stop offset="60%" style="stop-color:#00FA9A"/>
<stop offset="100%" style="stop-color:#00CC7A"/>
</radialGradient>
<radialGradient id="vanilla" cx="0.3" cy="0.3">
<stop offset="0%" style="stop-color:#FFFACD"/>
<stop offset="60%" style="stop-color:#F5DEB3"/>
<stop offset="100%" style="stop-color:#DEB887"/>
</radialGradient>
<!-- Cone gradient -->
<linearGradient id="cone" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F4A460"/>
<stop offset="50%" style="stop-color:#D2B48C"/>
<stop offset="100%" style="stop-color:#8B7355"/>
</linearGradient>
<!-- Melting gradients -->
<linearGradient id="meltStrawberry" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF69B4"/>
<stop offset="70%" style="stop-color:#FF1493;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#8B0040;stop-opacity:0.7"/>
</linearGradient>
<linearGradient id="meltMint" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#00FA9A"/>
<stop offset="70%" style="stop-color:#00CC7A;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#006B3F;stop-opacity:0.7"/>
</linearGradient>
<linearGradient id="meltVanilla" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F5DEB3"/>
<stop offset="70%" style="stop-color:#DEB887;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#8B7355;stop-opacity:0.7"/>
</linearGradient>
<!-- Cat body gradient -->
<radialGradient id="catBody" cx="0.4" cy="0.3">
<stop offset="0%" style="stop-color:#FFB6C1"/>
<stop offset="50%" style="stop-color:#FF69B4;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:#C71585;stop-opacity:0.6"/>
</radialGradient>
</defs>
<!-- Soft background -->
<rect width="300" height="300" fill="#F0F8FF" opacity="0.3"/>
<!-- Ice cream cone -->
<path d="M 150 75 L 130 155 L 170 155 Z" fill="url(#cone)" stroke="#8B4513" stroke-width="1.5"/>
<!-- Waffle pattern -->
<g stroke="#8B4513" stroke-width="1" opacity="0.6">
<line x1="138" y1="95" x2="162" y2="95"/>
<line x1="142" y1="115" x2="158" y2="115"/>
<line x1="146" y1="135" x2="154" y2="135"/>
<line x1="135" y1="85" x2="165" y2="85"/>
<line x1="140" y1="105" x2="160" y2="105"/>
<line x1="144" y1="125" x2="156" y2="125"/>
<line x1="148" y1="145" x2="152" y2="145"/>
</g>
<!-- Ice cream scoops -->
<circle cx="150" cy="65" r="18" fill="url(#strawberry)"/>
<circle cx="150" cy="47" r="16" fill="url(#mint)"/>
<circle cx="150" cy="31" r="13" fill="url(#vanilla)"/>
<!-- Melting streams creating cat shape -->
<!-- Main cat body (large curved shape) -->
<path d="M 125 85 Q 100 110 95 145 Q 90 180 115 205 Q 140 220 170 215 Q 200 210 220 185 Q 230 160 215 135 Q 200 110 180 95 Q 160 85 125 85 Z"
fill="url(#catBody)" opacity="0.85"/>
<!-- Cat head -->
<ellipse cx="160" cy="125" rx="28" ry="22" fill="url(#meltMint)" opacity="0.9"/>
<!-- Cat ears with inner detail -->
<path d="M 138 105 Q 132 95 143 100 Q 148 108 138 105 Z" fill="url(#meltMint)"/>
<path d="M 182 105 Q 190 95 179 100 Q 174 108 182 105 Z" fill="url(#meltMint)"/>
<path d="M 140 103 Q 137 99 144 101 Z" fill="#FFB6C1" opacity="0.8"/>
<path d="M 180 103 Q 183 99 176 101 Z" fill="#FFB6C1" opacity="0.8"/>
<!-- Curled tail -->
<path d="M 210 170 Q 235 175 250 195 Q 260 215 245 235 Q 230 245 215 235 Q 200 225 190 205 Q 185 185 200 175 Q 210 170 210 170"
fill="url(#meltVanilla)" opacity="0.8"/>
<!-- Cat paws -->
<ellipse cx="125" cy="200" rx="12" ry="10" fill="url(#meltStrawberry)" opacity="0.8"/>
<ellipse cx="150" cy="205" rx="12" ry="10" fill="url(#meltMint)" opacity="0.8"/>
<ellipse cx="180" cy="202" rx="11" ry="9" fill="url(#meltVanilla)" opacity="0.8"/>
<ellipse cx="200" cy="195" rx="10" ry="8" fill="url(#meltStrawberry)" opacity="0.8"/>
<!-- Sleeping cat face -->
<!-- Closed eyes with lashes -->
<path d="M 145 120 Q 152 115 159 120" stroke="#4B0082" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M 165 120 Q 172 115 179 120" stroke="#4B0082" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- Eye lashes -->
<line x1="148" y1="118" x2="146" y2="115" stroke="#4B0082" stroke-width="1"/>
<line x1="156" y1="117" x2="154" y2="114" stroke="#4B0082" stroke-width="1"/>
<line x1="168" y1="118" x2="170" y2="115" stroke="#4B0082" stroke-width="1"/>
<line x1="176" y1="117" x2="178" y2="114" stroke="#4B0082" stroke-width="1"/>
<!-- Nose -->
<path d="M 160 128 L 155 133 L 165 133 Z" fill="#FF1493"/>
<!-- Mouth -->
<path d="M 160 133 Q 154 139 148 133" stroke="#4B0082" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<path d="M 160 133 Q 166 139 172 133" stroke="#4B0082" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<!-- Whiskers -->
<g stroke="#4B0082" stroke-width="1.8" stroke-linecap="round">
<line x1="115" y1="123" x2="140" y2="125"/>
<line x1="115" y1="130" x2="140" y2="130"/>
<line x1="115" y1="137" x2="140" y2="135"/>
<line x1="180" y1="125" x2="205" y2="123"/>
<line x1="180" y1="130" x2="205" y2="130"/>
<line x1="180" y1="135" x2="205" y2="137"/>
</g>
<!-- Flowing melting streams -->
<path d="M 135 80 Q 115 100 105 125 Q 98 150 108 175" stroke="url(#meltStrawberry)" stroke-width="12" fill="none" opacity="0.7" stroke-linecap="round"/>
<path d="M 165 80 Q 185 100 195 125 Q 202 150 192 175" stroke="url(#meltMint)" stroke-width="10" fill="none" opacity="0.7" stroke-linecap="round"/>
<path d="M 150 80 Q 155 105 152 130" stroke="url(#meltVanilla)" stroke-width="8" fill="none" opacity="0.8" stroke-linecap="round"/>
<!-- Dripping details -->
<ellipse cx="105" cy="105" rx="6" ry="10" fill="url(#strawberry)" opacity="0.8"/>
<ellipse cx="195" cy="108" rx="5" ry="9" fill="url(#mint)" opacity="0.8"/>
<ellipse cx="148" cy="90" rx="4" ry="8" fill="url(#vanilla)" opacity="0.8"/>
<ellipse cx="172" cy="93" rx="5" ry="9" fill="url(#strawberry)" opacity="0.7"/>
<!-- Atmospheric floating drops -->
<circle cx="80" cy="130" r="3" fill="url(#meltStrawberry)" opacity="0.5"/>
<circle cx="240" cy="125" r="2.5" fill="url(#meltMint)" opacity="0.5"/>
<circle cx="275" cy="150" r="2" fill="url(#meltVanilla)" opacity="0.4"/>
<circle cx="65" cy="165" r="2" fill="url(#meltMint)" opacity="0.4"/>
<circle cx="255" cy="180" r="1.5" fill="url(#meltStrawberry)" opacity="0.3"/>
<!-- Additional small details for texture -->
<circle cx="140" cy="160" r="2" fill="#FFB6C1" opacity="0.6"/>
<circle cx="175" cy="155" r="1.5" fill="#98FB98" opacity="0.6"/>
<circle cx="190" cy="170" r="2" fill="#F5DEB3" opacity="0.6"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="coneGrad" x1="50%" y1="100%" x2="50%" y2="0%">
<stop offset="0%" stop-color="#F4A261"/>
<stop offset="100%" stop-color="#E76F51"/>
</linearGradient>
<radialGradient id="iceGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#FFB3C1"/>
<stop offset="100%" stop-color="#FF6392"/>
</radialGradient>
<filter id="softGlow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feBlend in="SourceGraphic" in2="glow" mode="soft-light"/>
</filter>
</defs>
<rect width="300" height="300" fill="#A8DADC"/>
<!-- Melting Cone -->
<path d="M150 250 L130 300 L170 300 Z" fill="url(#coneGrad)"/>
<!-- Flowing Ice Cream -->
<g filter="url(#softGlow)">
<path d="M150 150 Q140 200 120 220 T80 250 Q100 230 130 210 T150 150"
fill="url(#iceGrad)" opacity="0.9"/>
<path d="M150 150 Q160 200 180 220 T220 250 Q200 230 170 210 T150 150"
fill="#BDE0FE" opacity="0.8"/>
</g>
<!-- Cat Features -->
<g transform="translate(100 100)">
<!-- Ears -->
<path d="M40 20 L20 0 L60 0 Z" fill="#FFB3C1"/>
<path d="M160 20 L140 0 L180 0 Z" fill="#FFB3C1"/>
<!-- Face -->
<circle cx="100" cy="50" r="40" fill="#FFD7E5"/>
<!-- Closed Eyes -->
<path d="M80 40 Q90 45 100 40 Q110 45 120 40" stroke="#2B2D42" fill="none"/>
<path d="M120 40 Q110 45 100 40 Q90 45 80 40" stroke="#2B2D42" fill="none"/>
<!-- Whiskers -->
<g stroke="#2B2D42" stroke-width="1.5">
<path d="M60 50 Q50 55 40 60"/>
<path d="M60 60 Q50 60 40 65"/>
<path d="M140 50 Q150 55 160 60"/>
<path d="M140 60 Q150 60 160 65"/>
</g>
</g>
<!-- Dripping Details -->
<path d="M160 220 Q165 230 155 240 T140 260" fill="#FF6392" opacity="0.7"/>
<circle cx="180" cy="180" r="8" fill="#FFBDD9"/>
<circle cx="190" cy="200" r="5" fill="#FFBDD9"/>
</svg>Judge's Analysis
Player 1's submission creatively integrates the concept of a melting ice cream cone transforming into a sleeping cat with vibrant colors, rounded shapes, and expressive details like whiskers and a content face.
While Player 2's minimalist approach is visually clean, it lacks the depth and clear connection to the melting ice cream and cat theme that Player 1's artwork conveys.
Player 1's composition is more engaging and adheres better to 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.