Creative Challenge
"Surreal snail with a city skyline spiraled into its shell."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6a00f4"/>
<stop offset="100%" stop-color="#f900ff"/>
</linearGradient>
<pattern id="cityPattern" patternUnits="userSpaceOnUse" width="50" height="50">
<rect width="50" height="50" fill="#2c003e"/>
<rect x="5" y="20" width="8" height="20" fill="#ff005a"/>
<rect x="18" y="15" width="6" height="25" fill="#00ffd0"/>
<rect x="28" y="25" width="8" height="15" fill="#ffdd00"/>
<rect x="40" y="10" width="5" height="30" fill="#00bfff"/>
</pattern>
</defs>
<!-- Snail Shell with a Surreal City Skyline -->
<g id="shell">
<path d="M200,150
A50,50 0 0,1 250,150
A70,70 0 0,0 210,210
A90,90 0 0,1 150,200
A110,110 0 0,0 200,150 Z"
fill="url(#cityPattern)"
stroke="#ffdd00"
stroke-width="2"/>
<!-- Inner spiral detail for added surreal effect -->
<path d="M200,150 C230,140 240,180 210,210"
stroke="#ffdd00" stroke-width="1.5" fill="none" opacity="0.7"/>
</g>
<!-- Snail Body and Head -->
<g id="body">
<!-- The snail's soft, undulating body -->
<ellipse cx="130" cy="245" rx="60" ry="20" fill="url(#bodyGradient)" stroke="#330066" stroke-width="2"/>
<!-- The snail's head -->
<circle cx="70" cy="230" r="15" fill="url(#bodyGradient)" stroke="#330066" stroke-width="2"/>
<!-- The snail's eyes -->
<circle cx="65" cy="220" r="2" fill="white"/>
<circle cx="75" cy="220" r="2" fill="white"/>
<!-- A delicate antenna reaching upward -->
<path d="M70,215 Q60,210, 65,200" fill="none" stroke="#330066" stroke-width="1.5"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1a0033;" />
<stop offset="50%" style="stop-color:#3c007a;" />
<stop offset="100%" style="stop-color:#6a0dad;" />
</linearGradient>
<radialGradient id="snailBodyGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#50C878;" /> <!-- Emerald Green -->
<stop offset="60%" style="stop-color:#2E8B57;" /> <!-- Sea Green -->
<stop offset="100%" style="stop-color:#006400;" /> <!-- Dark Green -->
</radialGradient>
<linearGradient id="shellGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFAC70;" /> <!-- Lighter orange-gold -->
<stop offset="30%" style="stop-color:#FF8C42;" /> <!-- Orange -->
<stop offset="70%" style="stop-color:#E07000;" /> <!-- Darker Orange -->
<stop offset="100%" style="stop-color:#A0522D;" /> <!-- Sienna -->
</linearGradient>
<linearGradient id="buildingGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#34495e;" /> <!-- Wet Asphalt -->
<stop offset="100%" style="stop-color:#2c3e50;" /> <!-- Midnight Blue -->
</linearGradient>
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feOffset dx="1" dy="1" result="offsetBlur"/>
<feFlood flood-color="#f0f0f0" flood-opacity="0.3" result="glowColor"/>
<feComposite in="glowColor" in2="offsetBlur" operator="in" result="softGlow_colored"/>
<feMerge>
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<g id="buildingCluster">
<rect x="-15" y="-70" width="10" height="70" fill="url(#buildingGradient)" stroke="#1a1a1a" stroke-width="0.5"/>
<rect x="-2" y="-80" width="12" height="80" fill="url(#buildingGradient)" stroke="#1a1a1a" stroke-width="0.5"/>
<polygon points="-2,-80 4,-90 10,-80" fill="#1c2833" stroke="#1a1a1a" stroke-width="0.5"/>
<rect x="13" y="-65" width="10" height="65" fill="url(#buildingGradient)" stroke="#1a1a1a" stroke-width="0.5"/>
<rect x="-13.5" y="-50" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
<rect x="-13.5" y="-40" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
<rect x="-0.5" y="-60" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
<rect x="-0.5" y="-50" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
<rect x="-0.5" y="-40" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
<rect x="14.5" y="-45" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
<rect x="14.5" y="-35" width="2.5" height="4" fill="#FFFACD" opacity="0.9"/>
</g>
<linearGradient id="slimeTrailGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(173, 216, 230, 0.35);" />
<stop offset="20%" style="stop-color:rgba(144, 238, 144, 0.35);" />
<stop offset="40%" style="stop-color:rgba(255, 255, 224, 0.4);" />
<stop offset="60%" style="stop-color:rgba(255, 182, 193, 0.35);" />
<stop offset="80%" style="stop-color:rgba(221, 160, 221, 0.35);" />
<stop offset="100%" style="stop-color:rgba(173, 216, 230, 0.35);" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<g opacity="0.7">
<circle cx="40" cy="50" r="0.5" fill="white"/> <circle cx="43" cy="52" r="0.8" fill="white"/>
<circle cx="100" cy="80" r="0.6" fill="white"/> <circle cx="103" cy="78" r="1" fill="white"/>
<circle cx="200" cy="30" r="0.7" fill="white"/> <circle cx="198" cy="33" r="1.2" fill="white"/>
<circle cx="250" cy="120" r="0.5" fill="white"/> <circle cx="252" cy="118" r="0.9" fill="white"/>
<circle cx="150" cy="200" r="0.8" fill="white"/> <circle cx="153" cy="202" r="1.1" fill="white"/>
<circle cx="70" cy="250" r="0.4" fill="white"/> <circle cx="68" cy="248" r="0.7" fill="white"/>
<circle cx="280" cy="180" r="0.6" fill="white"/> <circle cx="277" cy="182" r="1" fill="white"/>
</g>
<path d="M80,278 C60,283 30,293 0,293 L0,300 L110,300 L110,293 C100,288 85,283 80,278 Z" fill="url(#slimeTrailGradient)" />
<circle cx="40" cy="293.5" r="0.9" fill="rgba(255,255,255,0.75)"/>
<circle cx="70" cy="295" r="0.7" fill="rgba(255,255,255,0.65)"/>
<circle cx="20" cy="294" r="0.8" fill="rgba(255,255,255,0.7)"/>
<circle cx="95" cy="294.5" r="0.6" fill="rgba(255,255,255,0.6)"/>
<g id="snail" filter="url(#softGlow)">
<path id="snailBodyPath"
d="M60,265 Q30,255 30,225 C30,195 60,175 90,175
L100,175 C105,160 98,138 108,128 L113,123
C118,128 113,150 118,165
L123,175
C128,160 123,138 133,128 L138,123
C143,128 138,150 143,165
L148,175
C198,180 218,205 198,235 C178,265 120,285 80,280 C60,275 60,265 60,265 Z"
fill="url(#snailBodyGradient)" stroke="#004000" stroke-width="1.5" />
<g id="eyes">
<circle cx="113" cy="118" r="6.5" fill="#FFFAF0" stroke="#003333" stroke-width="0.7"/>
<circle cx="113" cy="118" r="3.5" fill="#102010"/>
<circle cx="112" cy="117" r="1.2" fill="white" opacity="0.8"/>
<circle cx="138" cy="118" r="6.5" fill="#FFFAF0" stroke="#003333" stroke-width="0.7"/>
<circle cx="138" cy="118" r="3.5" fill="#102010"/>
<circle cx="137" cy="117" r="1.2" fill="white" opacity="0.8"/>
</g>
<g id="shellWithCity" transform="translate(145, 145) scale(0.8)">
<path id="shellSpiralBase"
d="M 0 0
C 45 -55, 85 -55, 105 0
S 155 85, 85 105
S -25 155, -55 85
S -125 0, -45 -65
S 25 -125, 75 -95
S 105 -105, 95 -45
S 105 25, 55 55
S 0 85, -25 45
S -55 0, -15 -35
S 15 -55, 35 -45
S 45 -25, 25 -15 Z"
fill="url(#shellGradient)" stroke="#663300" stroke-width="2.5"/>
<g id="cityOnShell">
<use href="#buildingCluster" transform="translate(75, -95) rotate(-10) scale(0.38)" />
<use href="#buildingCluster" transform="translate(105, 0) rotate(15) scale(0.42)" />
<use href="#buildingCluster" transform="translate(85, 105) rotate(80) scale(0.40)" />
<use href="#buildingCluster" transform="translate(-55, 85) rotate(170) scale(0.36)" />
<use href="#buildingCluster" transform="translate(-45, -65) rotate(-100) scale(0.33)" />
<use href="#buildingCluster" transform="translate(35, -45) rotate(-30) scale(0.28)" />
<use href="#buildingCluster" transform="translate(25, -15) rotate(45) scale(0.20)" />
</g>
</g>
</g>
<path d="M0,280 Q150,268 300,280 L300,300 L0,300 Z" fill="#200A30" opacity="0.8"/>
</svg>Judge's Analysis
Player 2's submission demonstrates a more complete and visually creative interpretation of the prompt.
The snail shell integrates the city skyline into its spiral in a surreal and cohesive manner, and the color palette adds depth and appeal.
Player 1's submission, while creative, lacks detail and feels less polished, with the city skyline less integrated into the snail shell 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
"A snail racing a rocket to the finish line under a starry sky."
"Alien watering a garden of glowing, geometric plants under two crescent moons."
"A cactus wearing sunglasses, holding a balloon, standing in the middle of a desert."
