Creative Challenge
"A snail with a city skyline on its shell at sunset"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Sunset sky gradient -->
<linearGradient id="sunsetSky" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1A237E" />
<stop offset="20%" stop-color="#4A148C" />
<stop offset="40%" stop-color="#880E4F" />
<stop offset="60%" stop-color="#E65100" />
<stop offset="80%" stop-color="#FFB300" />
<stop offset="100%" stop-color="#FFF176" />
</linearGradient>
<!-- Ground gradient -->
<linearGradient id="ground" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#5D4037" />
<stop offset="100%" stop-color="#3E2723" />
</linearGradient>
<!-- Snail body gradient -->
<linearGradient id="snailBody" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ECEFF1" />
<stop offset="50%" stop-color="#CFD8DC" />
<stop offset="100%" stop-color="#B0BEC5" />
</linearGradient>
<!-- Shell base gradient -->
<linearGradient id="shellBase" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFA726" />
<stop offset="50%" stop-color="#F57C00" />
<stop offset="100%" stop-color="#E65100" />
</linearGradient>
<!-- City window lights gradient -->
<linearGradient id="cityLights" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFEB3B" />
<stop offset="100%" stop-color="#FFC107" />
</linearGradient>
<!-- Slime trail gradient -->
<linearGradient id="slimeTrail" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#B0BEC5" stop-opacity="0.8" />
<stop offset="100%" stop-color="#B0BEC5" stop-opacity="0" />
</linearGradient>
<!-- Filter for glow effect -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="220" fill="url(#sunsetSky)" />
<!-- Sun -->
<circle cx="240" cy="50" r="25" fill="#FFEB3B" filter="url(#glow)" />
<!-- Stars in the sky -->
<g fill="white">
<circle cx="20" cy="30" r="1" />
<circle cx="50" cy="20" r="1" />
<circle cx="80" cy="40" r="1" />
<circle cx="110" cy="25" r="1" />
<circle cx="140" cy="35" r="1" />
<circle cx="170" cy="20" r="1" />
<circle cx="200" cy="30" r="1" />
<circle cx="270" cy="35" r="1" />
<circle cx="290" cy="20" r="1" />
<circle cx="40" cy="50" r="1" />
<circle cx="95" cy="55" r="1" />
<circle cx="185" cy="45" r="1" />
<circle cx="245" cy="25" r="1" />
</g>
<!-- Clouds -->
<g opacity="0.7">
<path d="M30,80 C35,75 45,75 50,80 C55,70 65,70 70,75 C75,65 85,65 90,70 C90,60 100,60 105,65 L105,90 L30,90 Z" fill="white" />
<path d="M180,70 C190,65 200,65 210,70 C215,60 225,60 230,65 C235,55 245,55 250,60 C250,50 260,50 265,55 L265,80 L180,80 Z" fill="white" />
</g>
<!-- Far mountains -->
<path d="M0,150 L30,120 L60,140 L100,90 L140,130 L180,110 L220,140 L260,120 L300,150 L300,220 L0,220 Z" fill="#5D4037" opacity="0.5" />
<!-- Ground -->
<path d="M0,220 C50,215 100,225 150,220 C200,215 250,225 300,220 L300,300 L0,300 Z" fill="url(#ground)" />
<!-- Grass tufts -->
<g fill="#2E7D32">
<path d="M20,230 C22,220 24,215 26,225 C28,215 30,220 32,230" />
<path d="M80,235 C82,225 84,220 86,230 C88,220 90,225 92,235" />
<path d="M140,230 C142,220 144,215 146,225 C148,215 150,220 152,230" />
<path d="M200,235 C202,225 204,220 206,230 C208,220 210,225 212,235" />
<path d="M260,230 C262,220 264,215 266,225 C268,215 270,220 272,230" />
</g>
<!-- Slime trail -->
<path d="M0,245 C20,240 40,235 60,230" fill="none" stroke="url(#slimeTrail)" stroke-width="5" stroke-linecap="round" />
<!-- Snail body -->
<g id="snail">
<!-- Main body -->
<path d="M60,225 C70,215 85,210 100,210 C115,210 130,215 145,215 C160,215 175,220 175,230 C175,240 160,245 145,245 C130,245 115,240 100,240 C85,240 70,235 60,225 Z" fill="url(#snailBody)" />
<!-- Head and tentacles -->
<path d="M60,225 C50,223 45,220 40,215 C35,210 35,205 40,203" fill="url(#snailBody)" stroke="#90A4AE" stroke-width="1" />
<path d="M40,203 C45,200 50,205 48,210 C46,215 45,220 45,225" fill="url(#snailBody)" stroke="#90A4AE" stroke-width="1" />
<circle cx="40" cy="203" r="2" fill="#37474F" />
<path d="M60,225 C48,220 43,215 38,210 C33,205 33,200 38,198" fill="url(#snailBody)" stroke="#90A4AE" stroke-width="1" />
<path d="M38,198 C43,195 48,200 46,205 C44,210 43,215 43,220" fill="url(#snailBody)" stroke="#90A4AE" stroke-width="1" />
<circle cx="38" cy="198" r="2" fill="#37474F" />
<!-- Shell -->
<g id="shell">
<!-- Base spiral shell -->
<path d="M155,225 C185,220 205,205 215,185 C225,165 220,140 205,120 C190,100 165,90 140,100 C115,110 105,135 115,160 C125,185 145,220 155,225 Z" fill="url(#shellBase)" stroke="#5D4037" stroke-width="2" />
<!-- Shell spiral details -->
<path d="M155,225 C175,217 190,200 195,180 C200,160 190,140 175,125 C160,110 140,105 125,115 C110,125 105,145 115,165 C125,185 145,220 155,225 Z" fill="none" stroke="#5D4037" stroke-width="1" stroke-opacity="0.6" />
<!-- City skyline on shell -->
<g transform="translate(130, 120) scale(0.5) rotate(-20)">
<!-- Skyline background silhouette -->
<path d="M0,70 L10,70 L10,50 L20,50 L20,60 L30,60 L30,40 L35,40 L35,55 L45,55 L45,35 L55,35 L55,45 L65,45 L65,15 L70,15 L70,5 L80,5 L80,30 L85,30 L85,20 L95,20 L95,30 L100,30 L100,10 L110,10 L110,40 L115,40 L115,50 L125,50 L125,30 L130,30 L130,60 L140,60 L140,35 L150,35 L150,40 L155,40 L155,25 L165,25 L165,45 L175,45 L175,70 L180,70 L180,50 L190,50 L190,70 L200,70 L200,45 L210,45 L210,70 L220,70 L220,55 L230,55 L230,70 L240,70 L240,50 L250,50 L250,70 L0,70 Z" fill="#263238" />
<!-- Special building details -->
<rect x="65" y="15" width="15" height="30" fill="#37474F" />
<path d="M65,15 L72.5,5 L80,15" fill="#37474F" />
<rect x="95" y="20" width="10" height="10" fill="#37474F" />
<circle cx="100" cy="20" r="5" fill="#455A64" />
<rect x="100" y="10" width="10" height="20" fill="#37474F" />
<rect x="105" y="5" width="2" height="5" fill="#455A64" />
<!-- Radio tower -->
<rect x="150" y="35" width="5" height="5" fill="#455A64" />
<path d="M152.5,35 L152.5,20" stroke="#B0BEC5" stroke-width="1" />
<path d="M152.5,20 L148,25" stroke="#B0BEC5" stroke-width="1" />
<path d="M152.5,20 L157,25" stroke="#B0BEC5" stroke-width="1" />
<!-- Building windows (city lights) -->
<g fill="url(#cityLights)" opacity="0.8">
<rect x="15" y="55" width="3" height="3" />
<rect x="15" y="62" width="3" height="3" />
<rect x="25" y="62" width="3" height="3" />
<rect x="25" y="55" width="3" height="3" />
<rect x="25" y="48" width="3" height="3" />
<rect x="32" y="45" width="3" height="3" />
<rect x="32" y="52" width="3" height="3" />
<rect x="32" y="59" width="3" height="3" />
<rect x="40" y="58" width="3" height="3" />
<rect x="40" y="50" width="3" height="3" />
<rect x="40" y="42" width="3" height="3" />
<rect x="48" y="38" width="3" height="3" />
<rect x="48" y="45" width="3" height="3" />
<rect x="48" y="52" width="3" height="3" />
<rect x="58" y="48" width="3" height="3" />
<rect x="58" y="40" width="3" height="3" />
<rect x="58" y="32" width="3" height="3" />
<rect x="58" y="24" width="3" height="3" />
<rect x="67" y="20" width="3" height="3" />
<rect x="67" y="30" width="3" height="3" />
<rect x="67" y="40" width="3" height="3" />
<rect x="75" y="10" width="3" height="3" />
<rect x="75" y="18" width="3" height="3" />
<rect x="75" y="26" width="3" height="3" />
<rect x="82" y="25" width="3" height="3" />
<rect x="82" y="35" width="3" height="3" />
<rect x="90" y="25" width="3" height="3" />
<rect x="90" y="35" width="3" height="3" />
<rect x="97" y="15" width="3" height="3" />
<rect x="97" y="25" width="3" height="3" />
<rect x="105" y="15" width="3" height="3" />
<rect x="105" y="25" width="3" height="3" />
<rect x="105" y="35" width="3" height="3" />
<rect x="112" y="45" width="3" height="3" />
<rect x="112" y="55" width="3" height="3" />
<rect x="120" y="35" width="3" height="3" />
<rect x="120" y="45" width="3" height="3" />
<rect x="127" y="35" width="3" height="3" />
<rect x="127" y="45" width="3" height="3" />
<rect x="127" y="55" width="3" height="3" />
<rect x="135" y="40" width="3" height="3" />
<rect x="135" y="50" width="3" height="3" />
<rect x="135" y="60" width="3" height="3" />
<rect x="145" y="40" width="3" height="3" />
<rect x="145" y="48" width="3" height="3" />
<rect x="145" y="56" width="3" height="3" />
<rect x="152" y="30" width="3" height="3" />
<rect x="152" y="38" width="3" height="3" />
<rect x="160" y="30" width="3" height="3" />
<rect x="160" y="40" width="3" height="3" />
<rect x="160" y="50" width="3" height="3" />
<rect x="160" y="60" width="3" height="3" />
<rect x="170" y="50" width="3" height="3" />
<rect x="170" y="60" width="3" height="3" />
<rect x="185" y="55" width="3" height="3" />
<rect x="185" y="63" width="3" height="3" />
<rect x="195" y="50" width="3" height="3" />
<rect x="195" y="58" width="3" height="3" />
<rect x="195" y="66" width="3" height="3" />
<rect x="205" y="50" width="3" height="3" />
<rect x="205" y="58" width="3" height="3" />
<rect x="205" y="66" width="3" height="3" />
<rect x="215" y="58" width="3" height="3" />
<rect x="215" y="65" width="3" height="3" />
<rect x="225" y="60" width="3" height="3" />
<rect x="225" y="67" width="3" height="3" />
<rect x="235" y="55" width="3" height="3" />
<rect x="235" y="62" width="3" height="3" />
<rect x="245" y="55" width="3" height="3" />
<rect x="245" y="62" width="3" height="3" />
</g>
</g>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<radialGradient id="sky" cx="150" cy="350" r="250" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FF9966" />
<stop offset="50%" stop-color="#FF5E62" />
<stop offset="100%" stop-color="#CC2B5E" />
</radialGradient>
<rect width="300" height="300" fill="url(#sky)" />
<path d="M100 200 c 20 -40, 80 -60, 120 -30 s 40 80, 20 70" fill="#A0522D" stroke="#654321" stroke-width="3"/>
<ellipse cx="100" cy="220" rx="25" ry="15" fill="#A0522D" stroke="#654321" stroke-width="2"/>
<ellipse cx="130" cy="210" rx="20" ry="12" fill="#A0522D" stroke="#654321" stroke-width="2"/>
<circle cx="80" cy="210" r="5" fill="white"/>
<circle cx="95" cy="205" r="3" fill="black"/>
<g transform="translate(150 120) scale(0.4)">
<rect x="0" y="0" width="30" height="80" fill="#13131C"/>
<rect x="40" y="15" width="20" height="90" fill="#343741"/>
<rect x="70" y="0" width="40" height="100" fill="#4E54C8"/>
<rect x="120" y="25" width="30" height="75" fill="#13131C"/>
<rect x="160" y="10" width="10" height="110" fill="#FFD700"/>
<rect x="180" y="40" width="50" height="60" fill="#A0522D"/>
<rect x="240" y="0" width="20" height="120" fill="#343741"/>
</g>
<path id="spiral" d="M 150 150
a 40 40, 0, 0, 1, 40 1
a 35 35, 0, 0, 1, 30 25
a 30 30, 0, 0, 1, 15 20
a 25 25, 0, 0, 1, 20 2"
stroke="#654321" stroke-width="2" fill="none"/>
<path d="M 150 120 L 170 110 , 180 120 Z" fill="#FFD700"/>
<ellipse cx="190" cy="125" rx="8" ry="5" fill="#FFD700"/>
</svg>Judge's Analysis
Player 1's image creatively combines a snail with a city skyline on its shell, set against a vivid sunset backdrop, effectively capturing the prompt.
The use of colors and the detailed skyline silhouette add to the visual appeal and technical quality.
Player 2's submission lacks clarity in the skyline depiction, and the overall composition is less engaging.
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 giraffes tangled in a spaghetti fight under a disco ball."
"A snail racing a cheetah on a winding desert road."
"Two penguins jousting on icebergs with candy canes under a twilight sky."
"A cat made of clouds napping on a crescent moon"
