GPT-4o
Challenge Creator
Creative Challenge
"A surreal snail with a spiraling city on its shell gliding through a starry night sky."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Night sky gradient -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0a0033"/>
<stop offset="50%" stop-color="#050522"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<!-- Snail shell gradient -->
<radialGradient id="shellGrad" cx="0.5" cy="0.45" r="0.6">
<stop offset="0%" stop-color="#ffe59a"/>
<stop offset="40%" stop-color="#f5a35c"/>
<stop offset="100%" stop-color="#703c12"/>
</radialGradient>
<!-- Snail body gradient -->
<linearGradient id="bodyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6bd3c7"/>
<stop offset="100%" stop-color="#267b75"/>
</linearGradient>
<!-- Building façade gradient -->
<linearGradient id="buildingGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5764c9"/>
<stop offset="100%" stop-color="#22296e"/>
</linearGradient>
<!-- Star glow -->
<radialGradient id="starGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<!-- Soft glow filter -->
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Twinkling stars -->
<g id="stars" opacity="0.9">
<circle cx="20" cy="30" r="1.5" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="4s" repeatCount="indefinite" begin="0s"/>
</circle>
<circle cx="50" cy="60" r="1.2" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="5s" repeatCount="indefinite" begin="1s"/>
</circle>
<circle cx="90" cy="25" r="1.8" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="3.5s" repeatCount="indefinite" begin="0.5s"/>
</circle>
<circle cx="120" cy="50" r="1.1" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="4.5s" repeatCount="indefinite" begin="2s"/>
</circle>
<circle cx="160" cy="30" r="1.4" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="6s" repeatCount="indefinite" begin="1.7s"/>
</circle>
<circle cx="200" cy="70" r="1.3" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="5.2s" repeatCount="indefinite" begin="0.3s"/>
</circle>
<circle cx="250" cy="45" r="1.6" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="4s" repeatCount="indefinite" begin="2.4s"/>
</circle>
<circle cx="270" cy="90" r="1.4" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="3.8s" repeatCount="indefinite" begin="1.2s"/>
</circle>
<circle cx="220" cy="120" r="1.5" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="5.6s" repeatCount="indefinite" begin="0.8s"/>
</circle>
<circle cx="180" cy="95" r="1" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="4.1s" repeatCount="indefinite" begin="2.2s"/>
</circle>
<circle cx="140" cy="80" r="1.3" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="3.9s" repeatCount="indefinite" begin="0.6s"/>
</circle>
<circle cx="100" cy="120" r="1.7" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="5.1s" repeatCount="indefinite" begin="1.1s"/>
</circle>
<circle cx="60" cy="150" r="1.2" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="4.3s" repeatCount="indefinite" begin="2.6s"/>
</circle>
<circle cx="130" cy="150" r="1.4" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="6s" repeatCount="indefinite" begin="0.9s"/>
</circle>
<circle cx="190" cy="155" r="1.3" fill="url(#starGlow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="5.5s" repeatCount="indefinite" begin="1.8s"/>
</circle>
</g>
<!-- Luminous glide trail -->
<path d="M0 240 Q150 220 300 240" stroke="#00cfff" stroke-width="3" opacity="0.35" fill="none" filter="url(#softGlow)"/>
<!-- Snail -->
<g id="snail">
<!-- Body -->
<path d="M50 210 C80 240 220 240 250 210 Q260 200 250 180 C200 190 120 200 90 180 Q60 180 50 190 Z"
fill="url(#bodyGrad)" filter="url(#softGlow)"/>
<!-- Head -->
<circle cx="240" cy="175" r="18" fill="url(#bodyGrad)" filter="url(#softGlow)"/>
<!-- Eye stalks -->
<g stroke="#6bd3c7" stroke-width="3" stroke-linecap="round" filter="url(#softGlow)">
<line x1="235" y1="160" x2="220" y2="130"/>
<line x1="245" y1="160" x2="260" y2="130"/>
<circle cx="220" cy="130" r="4" fill="#ffffff"/>
<circle cx="260" cy="130" r="4" fill="#ffffff"/>
</g>
<!-- Shell with city -->
<g id="shell" transform="translate(140 150)">
<!-- Shell base -->
<circle cx="0" cy="0" r="60" fill="url(#shellGrad)" filter="url(#softGlow)"/>
<!-- Spiral -->
<path d="M0 -60
a60 60 0 1 0 -10 0
a50 50 0 1 1 10 0
a40 40 0 1 0 -10 0
a30 30 0 1 1 10 0
a20 20 0 1 0 -10 0
a10 10 0 1 1 10 0"
fill="none" stroke="#fbecc2" stroke-width="10" stroke-linecap="round" opacity="0.4"/>
<!-- Buildings spiraling the shell -->
<g fill="url(#buildingGrad)" stroke="#101030" stroke-width="1">
<rect x="-8" y="-85" width="16" height="28"/>
<rect x="-48" y="-48" width="14" height="22"/>
<rect x="-20" y="-18" width="12" height="20"/>
<rect x="18" y="4" width="14" height="24"/>
<rect x="38" y="38" width="12" height="18"/>
<rect x="18" y="55" width="10" height="16"/>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Gradients -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a2a" />
<stop offset="50%" stop-color="#191970" />
<stop offset="100%" stop-color="#483d8b" />
</linearGradient>
<linearGradient id="snailBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a084dc" />
<stop offset="50%" stop-color="#8b5cf6" />
<stop offset="100%" stop-color="#645cbb" />
</linearGradient>
<linearGradient id="shellGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ebcb8b" />
<stop offset="50%" stop-color="#e6b980" />
<stop offset="100%" stop-color="#d08770" />
</linearGradient>
<!-- Filters -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="windowGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="0.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Patterns -->
<pattern id="starPattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="0.8" fill="white" />
<circle cx="25" cy="30" r="0.6" fill="white" />
<circle cx="40" cy="15" r="1" fill="white" />
<circle cx="70" cy="55" r="0.7" fill="white" />
<circle cx="85" cy="30" r="0.9" fill="white" />
<circle cx="60" cy="10" r="0.5" fill="white" />
<circle cx="20" cy="60" r="0.8" fill="white" />
<circle cx="90" cy="90" r="1.2" fill="white" />
<circle cx="45" cy="75" r="0.6" fill="white" />
<circle cx="55" cy="45" r="0.7" fill="white" />
<circle cx="75" cy="25" r="0.5" fill="white" />
<circle cx="30" cy="85" r="0.9" fill="white" />
<circle cx="15" cy="45" r="0.7" fill="white" />
</pattern>
<radialGradient id="buildingGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#fff9c4" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ffd54f" stop-opacity="0" />
</radialGradient>
<!-- Building Symbols -->
<symbol id="building1" viewBox="0 0 10 20">
<rect x="0" y="0" width="10" height="20" fill="#34495e" />
<rect x="2" y="3" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="6" y="3" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="2" y="8" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="6" y="8" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="2" y="13" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="6" y="13" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
</symbol>
<symbol id="building2" viewBox="0 0 8 30">
<rect x="0" y="0" width="8" height="30" fill="#2c3e50" />
<rect x="2" y="3" width="4" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="2" y="8" width="4" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="2" y="13" width="4" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="2" y="18" width="4" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="2" y="23" width="4" height="2" fill="#f39c12" filter="url(#windowGlow)" />
</symbol>
<symbol id="tower" viewBox="0 0 12 40">
<rect x="2" y="10" width="8" height="30" fill="#34495e" />
<polygon points="2,10 10,10 6,0" fill="#7f8c8d" />
<rect x="4" y="15" width="4" height="4" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="4" y="22" width="4" height="4" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="4" y="29" width="4" height="4" fill="#f1c40f" filter="url(#windowGlow)" />
</symbol>
<symbol id="building3" viewBox="0 0 10 20">
<rect x="0" y="0" width="10" height="15" rx="2" fill="#2c3e50" />
<rect x="1" y="15" width="8" height="5" fill="#34495e" />
<rect x="2" y="3" width="2" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="6" y="3" width="2" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="2" y="8" width="2" height="2" fill="#f39c12" filter="url(#windowGlow)" />
<rect x="6" y="8" width="2" height="2" fill="#f39c12" filter="url(#windowGlow)" />
</symbol>
<symbol id="building4" viewBox="0 0 12 15">
<rect x="2" y="5" width="8" height="10" fill="#34495e" />
<ellipse cx="6" cy="5" rx="6" ry="5" fill="#7f8c8d" />
<rect x="4" y="7" width="4" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="4" y="11" width="4" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
</symbol>
</defs>
<!-- Night sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" opacity="0.8" />
<!-- Large stars with glow -->
<circle cx="50" cy="40" r="1.5" fill="white" filter="url(#glow)" />
<circle cx="270" cy="60" r="1.8" fill="white" filter="url(#glow)" />
<circle cx="150" cy="30" r="2" fill="white" filter="url(#glow)" />
<circle cx="200" cy="80" r="1.6" fill="white" filter="url(#glow)" />
<circle cx="100" cy="70" r="1.7" fill="white" filter="url(#glow)" />
<circle cx="230" cy="120" r="1.9" fill="white" filter="url(#glow)" />
<circle cx="40" cy="110" r="1.8" fill="white" filter="url(#glow)" />
<circle cx="80" cy="20" r="1.5" fill="white" filter="url(#glow)" />
<!-- Shooting star -->
<g>
<line x1="280" y1="20" x2="240" y2="60" stroke="white" stroke-width="1.5" stroke-linecap="round">
<animate attributeName="x1" values="280;240" dur="3s" repeatCount="indefinite" />
<animate attributeName="y1" values="20;60" dur="3s" repeatCount="indefinite" />
<animate attributeName="x2" values="240;200" dur="3s" repeatCount="indefinite" />
<animate attributeName="y2" values="60;100" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" />
</line>
<circle cx="280" cy="20" r="2" fill="white" filter="url(#glow)">
<animate attributeName="cx" values="280;240" dur="3s" repeatCount="indefinite" />
<animate attributeName="cy" values="20;60" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" />
</circle>
</g>
<!-- Moon -->
<circle cx="250" cy="50" r="20" fill="#FFFDE7" opacity="0.9" />
<circle cx="240" cy="45" r="16" fill="#0a0a2a" opacity="0.9" />
<!-- Cosmic cloud elements -->
<path d="M220,30 C230,40 240,35 245,25 C250,15 245,5 235,10 C225,15 210,20 220,30 Z" fill="#9c88ff" opacity="0.4" />
<path d="M80,40 C85,45 95,43 100,35 C105,27 100,20 95,25 C90,30 75,35 80,40 Z" fill="#9c88ff" opacity="0.3" />
<path d="M180,260 C190,265 200,260 205,250 C210,240 205,235 195,237 C185,239 170,255 180,260 Z" fill="#9c88ff" opacity="0.3" />
<!-- Glow around the snail -->
<ellipse cx="140" cy="180" rx="100" ry="40" fill="url(#buildingGlow)" opacity="0.3" />
<!-- Snail trail (slime) -->
<path d="M60,200 C40,210 20,215 0,220" stroke="#a084dc" stroke-width="2" fill="none" opacity="0.5">
<animate attributeName="d" values="M60,200 C40,210 20,215 0,220; M60,200 C40,212 20,217 0,222; M60,200 C40,210 20,215 0,220" dur="10s" repeatCount="indefinite" />
</path>
<!-- Snail body -->
<path d="M60,200 C60,240 100,250 130,230 S150,190 140,180 Q120,150 90,170 Q70,185 60,200 Z" fill="url(#snailBodyGradient)" />
<!-- Snail texture/patterns -->
<path d="M70,195 Q80,185 90,180 Q100,175 110,177 Q120,180 130,185" fill="none" stroke="#8b5cf6" stroke-width="1" stroke-opacity="0.5" />
<path d="M75,205 Q90,195 105,190 Q120,185 130,190" fill="none" stroke="#8b5cf6" stroke-width="1" stroke-opacity="0.5" />
<path d="M80,215 Q95,205 110,200 Q125,195 135,200" fill="none" stroke="#8b5cf6" stroke-width="1" stroke-opacity="0.5" />
<!-- Snail head and antennae -->
<path d="M60,200 C50,190 45,185 40,190 C35,195 40,205 45,205 Z" fill="#a084dc" />
<path d="M40,190 C35,180 30,170 25,175 C20,180 25,185 30,185 Z" fill="#a084dc">
<animate attributeName="d" values="M40,190 C35,180 30,170 25,175 C20,180 25,185 30,185; M40,190 C35,178 30,168 25,173 C20,178 25,183 30,183; M40,190 C35,180 30,170 25,175 C20,180 25,185 30,185" dur="4s" repeatCount="indefinite" />
</path>
<circle cx="25" cy="175" r="2" fill="#fff">
<animate attributeName="cy" values="175;173;175" dur="4s" repeatCount="indefinite" />
</circle>
<path d="M40,190 C38,180 42,165 48,160 C52,157 55,165 52,168 Z" fill="#a084dc">
<animate attributeName="d" values="M40,190 C38,180 42,165 48,160 C52,157 55,165 52,168; M40,190 C38,178 42,163 48,158 C52,155 55,163 52,166; M40,190 C38,180 42,165 48,160 C52,157 55,165 52,168" dur="3s" repeatCount="indefinite" />
</path>
<circle cx="48" cy="160" r="2" fill="#fff">
<animate attributeName="cy" values="160;158;160" dur="3s" repeatCount="indefinite" />
</circle>
<!-- Snail shell base - spiral path -->
<path d="M140,180 C180,170 200,150 210,130 C220,110 215,90 195,80 C175,70 150,80 140,100 C130,120 140,140 160,150 C180,160 200,150 210,130"
fill="url(#shellGradient)" stroke="#d08770" stroke-width="1.5" />
<!-- Shell texture/accent lines -->
<path d="M140,180 C180,170 200,150 210,130" fill="none" stroke="#bf616a" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M210,130 C220,110 215,90 195,80" fill="none" stroke="#bf616a" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M195,80 C175,70 150,80 140,100" fill="none" stroke="#bf616a" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M140,100 C130,120 140,140 160,150" fill="none" stroke="#bf616a" stroke-width="0.5" stroke-opacity="0.5" />
<!-- City roads/paths -->
<path d="M140,180 C180,170 200,150 210,130 C220,110 215,90 195,80 C175,70 150,80 140,100 C130,120 140,140 160,150"
fill="none" stroke="#f1c40f" stroke-width="0.5" stroke-opacity="0.7" stroke-dasharray="2,1" />
<!-- Primary paths through city -->
<path d="M140,180 C160,175 180,165 195,150" fill="none" stroke="#f1c40f" stroke-width="0.5" stroke-opacity="0.7" />
<path d="M195,80 C185,90 175,100 170,110" fill="none" stroke="#f1c40f" stroke-width="0.5" stroke-opacity="0.7" />
<path d="M160,150 C170,125 175,100 170,80" fill="none" stroke="#f1c40f" stroke-width="0.5" stroke-opacity="0.7" />
<!-- Buildings along the outer spiral -->
<path d="M140,180 C180,170 200,150 210,130" fill="none" id="outerPath" />
<use href="#building1" width="10" height="20" x="-5" y="-20">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M150,175 C170,170 190,160 200,145" />
</use>
<use href="#building2" width="8" height="30" x="-4" y="-30">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M160,172 C180,167 195,155 205,140" />
</use>
<use href="#building3" width="6" height="12" x="-3" y="-12">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M170,169 C185,164 200,150 208,135" />
</use>
<use href="#tower" width="12" height="40" x="-6" y="-40">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M180,166 C190,161 200,145 206,132" />
</use>
<use href="#building4" width="8" height="16" x="-4" y="-16">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M190,163 C195,158 200,140 204,130" />
</use>
<use href="#building2" width="6" height="24" x="-3" y="-24">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M200,160 C205,155 207,135 209,128" />
</use>
<!-- Buildings along the middle spiral -->
<path d="M210,130 C220,110 215,90 195,80" fill="none" id="middlePath" />
<use href="#building3" width="8" height="16" x="-4" y="-16">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M210,130 C215,120 216,110 215,100" />
</use>
<use href="#tower" width="10" height="32" x="-5" y="-32">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M215,120 C218,110 217,100 212,90" />
</use>
<use href="#building2" width="7" height="24" x="-3.5" y="-24">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M217,110 C219,100 216,90 208,85" />
</use>
<use href="#building4" width="6" height="14" x="-3" y="-14">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M216,100 C217,95 215,85 205,80" />
</use>
<use href="#building1" width="5" height="18" x="-2.5" y="-18">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M214,90 C212,85 206,82 200,80" />
</use>
<!-- Buildings along the inner spiral -->
<path d="M195,80 C175,70 150,80 140,100" fill="none" id="innerPath" />
<use href="#building4" width="6" height="12" x="-3" y="-12">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M195,80 C185,75 175,75 165,80" />
</use>
<use href="#building2" width="5" height="16" x="-2.5" y="-16">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M185,78 C175,73 165,75 155,82" />
</use>
<use href="#tower" width="8" height="24" x="-4" y="-24">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M175,77 C165,75 155,78 147,85" />
</use>
<use href="#building3" width="4" height="10" x="-2" y="-10">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M165,77 C155,77 147,82 142,90" />
</use>
<use href="#building1" width="4" height="14" x="-2" y="-14">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M155,79 C147,81 140,88 138,95" />
</use>
<!-- Buildings along the core spiral -->
<path d="M140,100 C130,120 140,140 160,150" fill="none" id="corePath" />
<use href="#building4" width="4" height="8" x="-2" y="-8">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M140,100 C136,110 135,120 138,130" />
</use>
<use href="#building1" width="3" height="12" x="-1.5" y="-12">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M138,110 C135,120 137,130 142,135" />
</use>
<use href="#tower" width="6" height="20" x="-3" y="-20">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M135,120 C134,130 140,140 148,145" />
</use>
<use href="#building3" width="3" height="6" x="-1.5" y="-6">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M138,130 C140,135 145,140 150,145" />
</use>
<use href="#building2" width="3" height="10" x="-1.5" y="-10">
<animateMotion dur="0.01s" repeatCount="1" fill="freeze" path="M142,135 C145,140 150,145 155,148" />
</use>
<!-- Central tower at the heart of the spiral -->
<circle cx="160" cy="150" r="15" fill="url(#buildingGlow)" opacity="0.4" />
<rect x="155" y="135" width="10" height="25" fill="#34495e" />
<polygon points="155,135 165,135 160,125" fill="#7f8c8d" />
<circle cx="160" cy="132" r="5" fill="#f39c12" opacity="0.8" filter="url(#glow)">
<animate attributeName="opacity" values="0.8;0.9;0.8" dur="3s" repeatCount="indefinite" />
</circle>
<rect x="159" y="126" width="2" height="6" fill="#2c3e50" />
<!-- Building windows on central tower -->
<rect x="157" y="138" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="161" y="138" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="157" y="143" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="161" y="143" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="157" y="148" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="161" y="148" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="157" y="153" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<rect x="161" y="153" width="2" height="2" fill="#f1c40f" filter="url(#windowGlow)" />
<!-- Small vehicles/floating elements around the city -->
<circle cx="170" cy="165" r="1" fill="#e74c3c">
<animate attributeName="cy" values="165;163;165" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="200" cy="140" r="1" fill="#e74c3c">
<animate attributeName="cy" values="140;138;140" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="180" cy="120" r="1" fill="#e74c3c">
<animate attributeName="cy" values="120;118;120" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="150" cy="100" r="1" fill="#e74c3c">
<animate attributeName="cy" values="100;98;100" dur="3.5s" repeatCount="indefinite" />
</circle>
<!-- Flying vehicle with light trail -->
<g>
<ellipse cx="190" cy="110" rx="2" ry="1" fill="#3498db">
<animate attributeName="cx" values="190;210;190" dur="8s" repeatCount="indefinite" />
<animate attributeName="cy" values="110;95;110" dur="8s" repeatCount="indefinite" />
</ellipse>
<path d="M190,110 L185,112" stroke="#3498db" stroke-width="0.5" opacity="0.6">
<animate attributeName="d" values="M190,110 L185,112; M210,95 L205,97; M190,110 L185,112" dur="8s" repeatCount="indefinite" />
</path>
</g>
<!-- Additional decorative elements -->
<path d="M130,230 Q140,220 150,225 Q160,230 170,225" fill="none" stroke="#a084dc" stroke-width="1.5" stroke-opacity="0.6" />
<!-- Snail eye reflection -->
<circle cx="25" cy="174" r="0.6" fill="white" opacity="0.9">
<animate attributeName="cy" values="174;172;174" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="48" cy="159" r="0.6" fill="white" opacity="0.9">
<animate attributeName="cy" values="159;157;159" dur="3s" repeatCount="indefinite" />
</circle>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
O3 high (2025-04-16)
Player 1
Judge's Analysis
Player 1's submission showcases a clear interpretation of a surreal snail with a spiraling city on its shell, with distinct geometric forms and glowing elements that enhance its technical quality and visual appeal.
Player 2's image, while creative, lacks the clarity and cohesive compositional strength found in Player 1's depiction and does not represent the city on the shell as effectively.
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
Total Shapes
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
Player 1
31
Player 2
104
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
7
Player 2
38
Circles
The number of circle elements (circle) in the SVG.
Player 1
19
Player 2
34
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
—
Player 2
3
Lines
The number of line elements (line) in the SVG.
Player 1
2
Player 2
1
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
2
Paths
The number of path elements (path) in the SVG.
Player 1
3
Player 2
26
Groups
The number of group elements (g) in the SVG.
Player 1
5
Player 2
2
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
4
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
—
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
1
Player 2
2
Masks
The number of mask definitions (mask) in the SVG.
Player 1
—
Player 2
—
Clip Paths
The number of clipping path definitions (clipPath) in the SVG.
Player 1
—
Player 2
—
Elements with Opacity
The number of elements with opacity attributes in the SVG.
Player 1
3
Player 2
13
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
4
Player 2
16
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
14
Player 2
24
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
15
Player 2
44
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
1
Player 2
—
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
15
Player 2
83
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
6
Player 2
12
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
21
Text Metrics
Text Elements
The number of text elements (text) in the SVG.
Player 1
—
Player 2
—
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.
