GPT-4o
Challenge Creator
Creative Challenge
"A steam-punk jellyfish floating above a Victorian cityscape"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a1a2e" />
<stop offset="40%" stop-color="#16213e" />
<stop offset="70%" stop-color="#541b54" />
<stop offset="100%" stop-color="#8b1e3f" />
</linearGradient>
<linearGradient id="brassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d6a965" />
<stop offset="50%" stop-color="#b7833a" />
<stop offset="100%" stop-color="#a67c00" />
</linearGradient>
<linearGradient id="copperGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e97451" />
<stop offset="50%" stop-color="#c66e3d" />
<stop offset="100%" stop-color="#a45a2a" />
</linearGradient>
<radialGradient id="jellyfishGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="rgba(183, 156, 237, 0.8)" />
<stop offset="100%" stop-color="rgba(183, 156, 237, 0)" />
</radialGradient>
<pattern id="buildingPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="#362c36" />
<line x1="0" y1="0" x2="10" y2="0" stroke="#453545" stroke-width="0.5" />
<line x1="0" y1="5" x2="10" y2="5" stroke="#453545" stroke-width="0.5" />
</pattern>
<pattern id="windowPattern" patternUnits="userSpaceOnUse" width="10" height="15">
<rect x="1" y="1" width="8" height="13" rx="1" ry="1" fill="#ffdb99" opacity="0.7" />
</pattern>
<g id="cog">
<circle cx="0" cy="0" r="10" fill="url(#brassGradient)" />
<circle cx="0" cy="0" r="3" fill="#866622" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(30,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(60,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(90,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(120,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(150,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(180,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(210,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(240,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(270,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(300,0,0)" />
<path d="M0,-15 L2,-10 L-2,-10 Z" fill="url(#brassGradient)" transform="rotate(330,0,0)" />
</g>
<g id="pipeSegment">
<rect x="-5" y="-10" width="10" height="20" rx="5" ry="5" fill="url(#copperGradient)" />
<ellipse cx="0" cy="-10" rx="5" ry="2" fill="#a45a2a" />
<ellipse cx="0" cy="10" rx="5" ry="2" fill="#a45a2a" />
<rect x="-6" y="-8" width="12" height="3" rx="1" ry="1" fill="url(#brassGradient)" />
</g>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars">
<circle cx="30" cy="30" r="0.8" fill="white" opacity="0.8" />
<circle cx="60" cy="40" r="0.6" fill="white" opacity="0.7" />
<circle cx="90" cy="20" r="1" fill="white" opacity="0.9" />
<circle cx="120" cy="50" r="0.7" fill="white" opacity="0.6" />
<circle cx="150" cy="30" r="0.9" fill="white" opacity="0.8" />
<circle cx="180" cy="45" r="0.6" fill="white" opacity="0.7" />
<circle cx="210" cy="25" r="1.1" fill="white" opacity="0.9" />
<circle cx="240" cy="15" r="0.8" fill="white" opacity="0.8" />
<circle cx="270" cy="35" r="0.7" fill="white" opacity="0.7" />
<circle cx="25" cy="55" r="0.8" fill="white" opacity="0.6" />
<circle cx="45" cy="15" r="0.9" fill="white" opacity="0.7" />
<circle cx="75" cy="25" r="1" fill="white" opacity="0.9" />
<circle cx="280" cy="15" r="0.6" fill="white" opacity="0.7" />
<circle cx="250" cy="45" r="0.7" fill="white" opacity="0.8" />
<circle cx="200" cy="10" r="0.9" fill="white" opacity="0.9" />
</g>
<!-- Victorian cityscape -->
<g id="cityscape">
<!-- Buildings -->
<rect x="10" y="160" width="30" height="140" fill="url(#buildingPattern)" />
<rect x="13" y="155" width="24" height="10" fill="#453545" />
<rect x="15" y="170" width="5" height="10" fill="url(#windowPattern)" />
<rect x="25" y="170" width="5" height="10" fill="url(#windowPattern)" />
<rect x="15" y="190" width="5" height="10" fill="url(#windowPattern)" />
<rect x="25" y="190" width="5" height="10" fill="url(#windowPattern)" />
<rect x="15" y="210" width="5" height="10" fill="url(#windowPattern)" />
<rect x="25" y="210" width="5" height="10" fill="url(#windowPattern)" />
<rect x="45" y="140" width="40" height="160" fill="url(#buildingPattern)" />
<path d="M45,140 L65,120 L85,140 Z" fill="#453545" />
<rect x="55" y="150" width="7" height="12" fill="url(#windowPattern)" />
<rect x="68" y="150" width="7" height="12" fill="url(#windowPattern)" />
<rect x="55" y="170" width="7" height="12" fill="url(#windowPattern)" />
<rect x="68" y="170" width="7" height="12" fill="url(#windowPattern)" />
<rect x="55" y="190" width="7" height="12" fill="url(#windowPattern)" />
<rect x="68" y="190" width="7" height="12" fill="url(#windowPattern)" />
<rect x="55" y="210" width="7" height="12" fill="url(#windowPattern)" />
<rect x="68" y="210" width="7" height="12" fill="url(#windowPattern)" />
<rect x="55" y="230" width="7" height="12" fill="url(#windowPattern)" />
<rect x="68" y="230" width="7" height="12" fill="url(#windowPattern)" />
<rect x="90" y="180" width="35" height="120" fill="url(#buildingPattern)" />
<rect x="90" y="175" width="35" height="10" fill="#453545" />
<rect x="95" y="190" width="6" height="10" fill="url(#windowPattern)" />
<rect x="107" y="190" width="6" height="10" fill="url(#windowPattern)" />
<rect x="119" y="190" width="6" height="10" fill="url(#windowPattern)" />
<rect x="95" y="210" width="6" height="10" fill="url(#windowPattern)" />
<rect x="107" y="210" width="6" height="10" fill="url(#windowPattern)" />
<rect x="119" y="210" width="6" height="10" fill="url(#windowPattern)" />
<rect x="95" y="230" width="6" height="10" fill="url(#windowPattern)" />
<rect x="107" y="230" width="6" height="10" fill="url(#windowPattern)" />
<rect x="119" y="230" width="6" height="10" fill="url(#windowPattern)" />
<!-- Cathedral-like building -->
<rect x="130" y="150" width="50" height="150" fill="url(#buildingPattern)" />
<path d="M130,150 L155,120 L180,150 Z" fill="#453545" />
<path d="M155,120 L155,100 L156,100 L156,120 Z" fill="#453545" />
<circle cx="155.5" cy="95" r="2" fill="url(#brassGradient)" />
<rect x="135" y="160" width="6" height="15" rx="3" ry="3" fill="url(#windowPattern)" />
<rect x="145" y="160" width="20" height="30" rx="10" ry="10" fill="url(#windowPattern)" />
<rect x="170" y="160" width="6" height="15" rx="3" ry="3" fill="url(#windowPattern)" />
<rect x="135" y="190" width="6" height="10" fill="url(#windowPattern)" />
<rect x="145" y="200" width="6" height="10" fill="url(#windowPattern)" />
<rect x="155" y="200" width="6" height="10" fill="url(#windowPattern)" />
<rect x="165" y="200" width="6" height="10" fill="url(#windowPattern)" />
<rect x="175" y="190" width="6" height="10" fill="url(#windowPattern)" />
<rect x="135" y="220" width="6" height="10" fill="url(#windowPattern)" />
<rect x="145" y="220" width="6" height="10" fill="url(#windowPattern)" />
<rect x="155" y="220" width="6" height="10" fill="url(#windowPattern)" />
<rect x="165" y="220" width="6" height="10" fill="url(#windowPattern)" />
<rect x="175" y="220" width="6" height="10" fill="url(#windowPattern)" />
<rect x="185" y="170" width="45" height="130" fill="url(#buildingPattern)" />
<rect x="185" y="165" width="45" height="10" fill="#453545" />
<rect x="190" y="180" width="8" height="12" fill="url(#windowPattern)" />
<rect x="205" y="180" width="8" height="12" fill="url(#windowPattern)" />
<rect x="220" y="180" width="8" height="12" fill="url(#windowPattern)" />
<rect x="190" y="200" width="8" height="12" fill="url(#windowPattern)" />
<rect x="205" y="200" width="8" height="12" fill="url(#windowPattern)" />
<rect x="220" y="200" width="8" height="12" fill="url(#windowPattern)" />
<rect x="190" y="220" width="8" height="12" fill="url(#windowPattern)" />
<rect x="205" y="220" width="8" height="12" fill="url(#windowPattern)" />
<rect x="220" y="220" width="8" height="12" fill="url(#windowPattern)" />
<rect x="190" y="240" width="8" height="12" fill="url(#windowPattern)" />
<rect x="205" y="240" width="8" height="12" fill="url(#windowPattern)" />
<rect x="220" y="240" width="8" height="12" fill="url(#windowPattern)" />
<rect x="235" y="190" width="30" height="110" fill="url(#buildingPattern)" />
<path d="M235,190 L250,175 L265,190 Z" fill="#453545" />
<rect x="240" y="200" width="5" height="10" fill="url(#windowPattern)" />
<rect x="250" y="200" width="5" height="10" fill="url(#windowPattern)" />
<rect x="260" y="200" width="5" height="10" fill="url(#windowPattern)" />
<rect x="240" y="220" width="5" height="10" fill="url(#windowPattern)" />
<rect x="250" y="220" width="5" height="10" fill="url(#windowPattern)" />
<rect x="260" y="220" width="5" height="10" fill="url(#windowPattern)" />
<rect x="240" y="240" width="5" height="10" fill="url(#windowPattern)" />
<rect x="250" y="240" width="5" height="10" fill="url(#windowPattern)" />
<rect x="260" y="240" width="5" height="10" fill="url(#windowPattern)" />
<rect x="270" y="160" width="30" height="140" fill="url(#buildingPattern)" />
<rect x="273" y="155" width="24" height="10" fill="#453545" />
<rect x="275" y="170" width="5" height="10" fill="url(#windowPattern)" />
<rect x="285" y="170" width="5" height="10" fill="url(#windowPattern)" />
<rect x="275" y="190" width="5" height="10" fill="url(#windowPattern)" />
<rect x="285" y="190" width="5" height="10" fill="url(#windowPattern)" />
<rect x="275" y="210" width="5" height="10" fill="url(#windowPattern)" />
<rect x="285" y="210" width="5" height="10" fill="url(#windowPattern)" />
<rect x="275" y="230" width="5" height="10" fill="url(#windowPattern)" />
<rect x="285" y="230" width="5" height="10" fill="url(#windowPattern)" />
<!-- Factory chimneys -->
<rect x="20" y="230" width="15" height="20" fill="#453545" />
<rect x="22" y="210" width="11" height="20" fill="#453545" />
<circle cx="27.5" cy="210" r="5.5" fill="#362c36" />
<path d="M22,210 C22,207 27.5,198 27.5,198 C27.5,198 33,207 33,210 Z" fill="#362c36" />
<!-- Steam from chimney -->
<path d="M27.5,198 C27.5,198 25,190 30,185 C35,180 32,175 30,170 C28,165 32,160 35,155" fill="none" stroke="white" stroke-width="1.5" opacity="0.5">
<animate attributeName="d"
dur="8s"
repeatCount="indefinite"
values="M27.5,198 C27.5,198 25,190 30,185 C35,180 32,175 30,170 C28,165 32,160 35,155;
M27.5,198 C27.5,198 30,190 35,185 C40,180 36,175 35,170 C34,165 38,160 40,155;
M27.5,198 C27.5,198 25,190 30,185 C35,180 32,175 30,170 C28,165 32,160 35,155" />
</path>
<rect x="100" y="240" width="12" height="15" fill="#453545" />
<rect x="102" y="225" width="8" height="15" fill="#453545" />
<circle cx="106" cy="225" r="4" fill="#362c36" />
<path d="M102,225 C102,222 106,215 106,215 C106,215 110,222 110,225 Z" fill="#362c36" />
<!-- Steam from chimney -->
<path d="M106,215 C106,215 103,207 108,202 C113,197 110,192 108,187 C106,182 110,177 113,172" fill="none" stroke="white" stroke-width="1.5" opacity="0.5">
<animate attributeName="d"
dur="10s"
repeatCount="indefinite"
values="M106,215 C106,215 103,207 108,202 C113,197 110,192 108,187 C106,182 110,177 113,172;
M106,215 C106,215 109,207 114,202 C119,197 115,192 114,187 C113,182 118,177 120,172;
M106,215 C106,215 103,207 108,202 C113,197 110,192 108,187 C106,182 110,177 113,172" />
</path>
<rect x="200" y="250" width="14" height="18" fill="#453545" />
<rect x="202" y="232" width="10" height="18" fill="#453545" />
<circle cx="207" cy="232" r="5" fill="#362c36" />
<path d="M202,232 C202,229 207,220 207,220 C207,220 212,229 212,232 Z" fill="#362c36" />
<!-- Steam from chimney -->
<path d="M207,220 C207,220 204,212 209,207 C214,202 211,197 209,192 C207,187 211,182 214,177" fill="none" stroke="white" stroke-width="1.5" opacity="0.6">
<animate attributeName="d"
dur="12s"
repeatCount="indefinite"
values="M207,220 C207,220 204,212 209,207 C214,202 211,197 209,192 C207,187 211,182 214,177;
M207,220 C207,220 210,212 215,207 C220,202 216,197 215,192 C214,187 219,182 221,177;
M207,220 C207,220 204,212 209,207 C214,202 211,197 209,192 C207,187 211,182 214,177" />
</path>
<rect x="240" y="260" width="25" height="15" fill="#453545" />
<rect x="245" y="255" width="15" height="5" fill="#362c36" />
<rect x="247" y="250" width="11" height="5" fill="#362c36" />
<circle cx="252.5" cy="250" r="5.5" fill="#362c36" />
<path d="M247,250 C247,247 252.5,237 252.5,237 C252.5,237 258,247 258,250 Z" fill="#362c36" />
<!-- Steam from chimney -->
<path d="M252.5,237 C252.5,237 249.5,229 254.5,224 C259.5,219 256.5,214 254.5,209 C252.5,204 256.5,199 259.5,194" fill="none" stroke="white" stroke-width="1.5" opacity="0.5">
<animate attributeName="d"
dur="9s"
repeatCount="indefinite"
values="M252.5,237 C252.5,237 249.5,229 254.5,224 C259.5,219 256.5,214 254.5,209 C252.5,204 256.5,199 259.5,194;
M252.5,237 C252.5,237 255.5,229 260.5,224 C265.5,219 261.5,214 260.5,209 C259.5,204 264.5,199 266.5,194;
M252.5,237 C252.5,237 249.5,229 254.5,224 C259.5,219 256.5,214 254.5,209 C252.5,204 256.5,199 259.5,194" />
</path>
</g>
<!-- Steampunk Jellyfish -->
<g id="steampunkJellyfish">
<!-- Glow effect -->
<circle cx="150" cy="90" r="60" fill="url(#jellyfishGlow)" opacity="0.6" />
<!-- Jellyfish bell/body -->
<ellipse cx="150" cy="90" rx="35" ry="30" fill="#a48ed1" />
<!-- Brass rim around the bell -->
<ellipse cx="150" cy="90" rx="38" ry="33" fill="none" stroke="url(#brassGradient)" stroke-width="3" />
<!-- Decorative rivets around the rim -->
<circle cx="150" cy="57" r="2" fill="#d6a965" />
<circle cx="161" cy="58.5" r="2" fill="#d6a965" />
<circle cx="172" cy="63" r="2" fill="#d6a965" />
<circle cx="182" cy="70" r="2" fill="#d6a965" />
<circle cx="188" cy="80" r="2" fill="#d6a965" />
<circle cx="188" cy="90" r="2" fill="#d6a965" />
<circle cx="188" cy="100" r="2" fill="#d6a965" />
<circle cx="182" cy="110" r="2" fill="#d6a965" />
<circle cx="172" cy="117" r="2" fill="#d6a965" />
<circle cx="161" cy="121.5" r="2" fill="#d6a965" />
<circle cx="150" cy="123" r="2" fill="#d6a965" />
<circle cx="139" cy="121.5" r="2" fill="#d6a965" />
<circle cx="128" cy="117" r="2" fill="#d6a965" />
<circle cx="118" cy="110" r="2" fill="#d6a965" />
<circle cx="112" cy="100" r="2" fill="#d6a965" />
<circle cx="112" cy="90" r="2" fill="#d6a965" />
<circle cx="112" cy="80" r="2" fill="#d6a965" />
<circle cx="118" cy="70" r="2" fill="#d6a965" />
<circle cx="128" cy="63" r="2" fill="#d6a965" />
<circle cx="139" cy="58.5" r="2" fill="#d6a965" />
<!-- Internal gear mechanisms visible through "glass" -->
<g opacity="0.9">
<circle cx="150" cy="90" r="25" fill="none" stroke="#b7833a" stroke-width="0.5" />
<!-- Center gear -->
<g transform="translate(150, 90)">
<use href="#cog" transform="scale(0.8)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="30s" repeatCount="indefinite" />
</use>
</g>
<!-- Surrounding gears -->
<g transform="translate(135, 80)">
<use href="#cog" transform="scale(0.5)">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="20s" repeatCount="indefinite" />
</use>
</g>
<g transform="translate(165, 80)">
<use href="#cog" transform="scale(0.6)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="25s" repeatCount="indefinite" />
</use>
</g>
<g transform="translate(140, 100)">
<use href="#cog" transform="scale(0.4)">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="15s" repeatCount="indefinite" />
</use>
</g>
<g transform="translate(160, 100)">
<use href="#cog" transform="scale(0.5)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="22s" repeatCount="indefinite" />
</use>
</g>
</g>
<!-- Mechanical tentacles (pipes) -->
<g transform="translate(135, 120)">
<use href="#pipeSegment" />
<g transform="translate(0, 20)">
<use href="#pipeSegment" transform="scale(0.9) rotate(5)" />
<g transform="translate(0, 18)">
<use href="#pipeSegment" transform="scale(0.8) rotate(-5)" />
<g transform="translate(0, 16)">
<use href="#pipeSegment" transform="scale(0.7) rotate(10)" />
<g transform="translate(0, 14)">
<use href="#pipeSegment" transform="scale(0.6) rotate(-10)" />
<!-- Steam coming out -->
<path d="M0,10 C2,15 -3,20 0,25 C3,30 -2,35 0,40" fill="none" stroke="white" stroke-width="1" opacity="0.7">
<animate attributeName="d"
dur="5s"
repeatCount="indefinite"
values="M0,10 C2,15 -3,20 0,25 C3,30 -2,35 0,40;
M0,10 C-2,15 3,20 0,25 C-3,30 2,35 0,40;
M0,10 C2,15 -3,20 0,25 C3,30 -2,35 0,40" />
</path>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(165, 120)">
<use href="#pipeSegment" />
<g transform="translate(0, 20)">
<use href="#pipeSegment" transform="scale(0.9) rotate(-5)" />
<g transform="translate(0, 18)">
<use href="#pipeSegment" transform="scale(0.8) rotate(5)" />
<g transform="translate(0, 16)">
<use href="#pipeSegment" transform="scale(0.7) rotate(-10)" />
<g transform="translate(0, 14)">
<use href="#pipeSegment" transform="scale(0.6) rotate(10)" />
<!-- Steam coming out -->
<path d="M0,10 C2,15 -3,20 0,25 C3,30 -2,35 0,40" fill="none" stroke="white" stroke-width="1" opacity="0.7">
<animate attributeName="d"
dur="6s"
repeatCount="indefinite"
values="M0,10 C2,15 -3,20 0,25 C3,30 -2,35 0,40;
M0,10 C-2,15 3,20 0,25 C-3,30 2,35 0,40;
M0,10 C2,15 -3,20 0,25 C3,30 -2,35 0,40" />
</path>
</g>
</g>
</g>
</g>
</g>
<!-- Biological/Ribbon tentacles -->
<g transform="translate(125, 120)">
<path d="M0,0 C-5,15 5,30 -5,45 C-15,60 0,75 -10,90" fill="none" stroke="#b191d4" stroke-width="2" opacity="0.9">
<animate attributeName="d"
dur="8s"
repeatCount="indefinite"
values="M0,0 C-5,15 5,30 -5,45 C-15,60 0,75 -10,90;
M0,0 C-8,15 2,30 -8,45 C-18,60 -3,75 -13,90;
M0,0 C-5,15 5,30 -5,45 C-15,60 0,75 -10,90" />
</path>
<!-- Small gears along the tentacle -->
<circle cx="-5" cy="15" r="3" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite" />
</circle>
<circle cx="5" cy="30" r="2" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="8s" repeatCount="indefinite" />
</circle>
<circle cx="-5" cy="45" r="3" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="12s" repeatCount="indefinite" />
</circle>
<circle cx="-15" cy="60" r="2" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="9s" repeatCount="indefinite" />
</circle>
<circle cx="0" cy="75" r="3" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="11s" repeatCount="indefinite" />
</circle>
</g>
<g transform="translate(175, 120)">
<path d="M0,0 C5,15 -5,30 5,45 C15,60 0,75 10,90" fill="none" stroke="#b191d4" stroke-width="2" opacity="0.9">
<animate attributeName="d"
dur="9s"
repeatCount="indefinite"
values="M0,0 C5,15 -5,30 5,45 C15,60 0,75 10,90;
M0,0 C8,15 -2,30 8,45 C18,60 3,75 13,90;
M0,0 C5,15 -5,30 5,45 C15,60 0,75 10,90" />
</path>
<!-- Small gears along the tentacle -->
<circle cx="5" cy="15" r="3" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite" />
</circle>
<circle cx="-5" cy="30" r="2" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="8s" repeatCount="indefinite" />
</circle>
<circle cx="5" cy="45" r="3" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="12s" repeatCount="indefinite" />
</circle>
<circle cx="15" cy="60" r="2" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="9s" repeatCount="indefinite" />
</circle>
<circle cx="0" cy="75" r="3" fill="url(#brassGradient)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="11s" repeatCount="indefinite" />
</circle>
</g>
<!-- Middle ribbon tentacles -->
<g transform="translate(145, 120)">
<path d="M0,0 C-2,15 -8,30 -12,45 C-16,60 -12,75 -18,90" fill="none" stroke="#b191d4" stroke-width="2" opacity="0.9">
<animate attributeName="d"
dur="10s"
repeatCount="indefinite"
values="M0,0 C-2,15 -8,30 -12,45 C-16,60 -12,75 -18,90;
M0,0 C-5,15 -11,30 -15,45 C-19,60 -15,75 -21,90;
M0,0 C-2,15 -8,30 -12,45 C-16,60 -12,75 -18,90" />
</path>
<!-- Small brass elements -->
<circle cx="-2" cy="15" r="1.5" fill="url(#brassGradient)" />
<circle cx="-8" cy="30" r="1.5" fill="url(#brassGradient)" />
<circle cx="-12" cy="45" r="1.5" fill="url(#brassGradient)" />
<circle cx="-16" cy="60" r="1.5" fill="url(#brassGradient)" />
<circle cx="-12" cy="75" r="1.5" fill="url(#brassGradient)" />
</g>
<g transform="translate(155, 120)">
<path d="M0,0 C2,15 8,30 12,45 C16,60 12,75 18,90" fill="none" stroke="#b191d4" stroke-width="2" opacity="0.9">
<animate attributeName="d"
dur="11s"
repeatCount="indefinite"
values="M0,0 C2,15 8,30 12,45 C16,60 12,75 18,90;
M0,0 C5,15 11,30 15,45 C19,60 15,75 21,90;
M0,0 C2,15 8,30 12,45 C16,60 12,75 18,90" />
</path>
<!-- Small brass elements -->
<circle cx="2" cy="15" r="1.5" fill="url(#brassGradient)" />
<circle cx="8" cy="30" r="1.5" fill="url(#brassGradient)" />
<circle cx="12" cy="45" r="1.5" fill="url(#brassGradient)" />
<circle cx="16" cy="60" r="1.5" fill="url(#brassGradient)" />
<circle cx="12" cy="75" r="1.5" fill="url(#brassGradient)" />
</g>
<!-- Top mechanical elements -->
<g transform="translate(150, 60)">
<!-- Periscope-like structure -->
<rect x="-3" y="-30" width="6" height="20" fill="url(#copperGradient)" />
<circle cx="0" cy="-30" r="5" fill="url(#brassGradient)" />
<circle cx="0" cy="-30" r="3" fill="#333" />
<circle cx="0" cy="-30" r="1" fill="white" opacity="0.8" />
<!-- Valves and dials -->
<g transform="translate(-15, -10)">
<circle cx="0" cy="0" r="5" fill="url(#brassGradient)" />
<line x1="0" y1="0" x2="3" y2="-3" stroke="#333" stroke-width="1" >
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite" />
</line>
</g>
<g transform="translate(15, -10)">
<circle cx="0" cy="0" r="4" fill="url(#brassGradient)" />
<line x1="0" y1="0" x2="3" y2="0" stroke="#333" stroke-width="1" >
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="15s" repeatCount="indefinite" />
</line>
</g>
</g>
<!-- Small steam releases -->
<g transform="translate(142, 70)">
<path d="M0,0 C-2,5 2,10 -1,15" fill="none" stroke="white" stroke-width="1" opacity="0.6">
<animate attributeName="d"
dur="4s"
repeatCount="indefinite"
values="M0,0 C-2,5 2,10 -1,15;
M0,0 C-3,5 1,10 -2,15;
M0,0 C-2,5 2,10 -1,15" />
</path>
</g>
<g transform="translate(158, 70)">
<path d="M0,0 C2,5 -2,10 1,15" fill="none" stroke="white" stroke-width="1" opacity="0.6">
<animate attributeName="d"
dur="5s"
repeatCount="indefinite"
values="M0,0 C2,5 -2,10 1,15;
M0,0 C3,5 -1,10 2,15;
M0,0 C2,5 -2,10 1,15" />
</path>
</g>
<!-- Pressure gauges on the sides -->
<g transform="translate(130, 90)">
<circle cx="0" cy="0" r="7" fill="#333" />
<circle cx="0" cy="0" r="6" fill="#fff" opacity="0.9" />
<path d="M0,0 L0,-4" stroke="#333" stroke-width="1">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite" />
</path>
<circle cx="0" cy="0" r="1" fill="#333" />
</g>
<g transform="translate(170, 90)">
<circle cx="0" cy="0" r="7" fill="#333" />
<circle cx="0" cy="0" r="6" fill="#fff" opacity="0.9" />
<path d="M0,0 L0,-4" stroke="#333" stroke-width="1">
<animateTransform attributeName="transform" type="rotate" from="180" to="-180" dur="8s" repeatCount="indefinite" />
</path>
<circle cx="0" cy="0" r="1" fill="#333" />
</g>
</g>
<!-- Floating mist/steam effects -->
<g opacity="0.4">
<path d="M50,150 C60,145 70,160 80,155 C90,150 100,165 110,160" fill="none" stroke="white" stroke-width="2">
<animate attributeName="d"
dur="15s"
repeatCount="indefinite"
values="M50,150 C60,145 70,160 80,155 C90,150 100,165 110,160;
M50,153 C60,148 70,163 80,158 C90,153 100,168 110,163;
M50,150 C60,145 70,160 80,155 C90,150 100,165 110,160" />
</path>
<path d="M120,170 C130,165 140,180 150,175 C160,170 170,185 180,180" fill="none" stroke="white" stroke-width="2">
<animate attributeName="d"
dur="17s"
repeatCount="indefinite"
values="M120,170 C130,165 140,180 150,175 C160,170 170,185 180,180;
M120,173 C130,168 140,183 150,178 C160,173 170,188 180,183;
M120,170 C130,165 140,180 150,175 C160,170 170,185 180,180" />
</path>
<path d="M190,160 C200,155 210,170 220,165 C230,160 240,175 250,170" fill="none" stroke="white" stroke-width="2">
<animate attributeName="d"
dur="20s"
repeatCount="indefinite"
values="M190,160 C200,155 210,170 220,165 C230,160 240,175 250,170;
M190,163 C200,158 210,173 220,168 C230,163 240,178 250,173;
M190,160 C200,155 210,170 220,165 C230,160 240,175 250,170" />
</path>
</g>
<!-- Atmospheric lighting -->
<circle cx="150" cy="90" r="70" fill="url(#jellyfishGlow)" opacity="0.5" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#333" rx="20" />
<!-- Cityscape -->
<g transform="translate(50, 150)">
<rect x="-50" y="-50" width="250" height="150" fill="#444" rx="10" />
<rect x="-40" y="-40" width="230" height="130" fill="#555" rx="5" />
<rect x="-30" y="-30" width="210" height="110" fill="#666" rx="5" />
<rect x="-20" y="-20" width="190" height="90" fill="#777" rx="5" />
<!-- Buildings -->
<g transform="translate(-100, -50)">
<rect x="0" y="0" width="20" height="80" fill="#888" rx="5" />
<rect x="25" y="0" width="20" height="60" fill="#999" rx="5" />
<rect x="50" y="0" width="20" height="40" fill="#aaa" rx="5" />
<rect x="75" y="0" width="20" height="20" fill="#bbb" rx="5" />
</g>
<!-- Chimneys -->
<g transform="translate(-80, -30)">
<rect x="0" y="0" width="5" height="20" fill="#ccc" rx="2" />
<rect x="15" y="0" width="5" height="25" fill="#ddd" rx="2" />
<rect x="30" y="0" width="5" height="30" fill="#eee" rx="2" />
</g>
</g>
<!-- Jellyfish -->
<g transform="translate(150, 50)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="40" ry="60" fill="url(#jellyfish-gradient)" />
<!-- Tentacles -->
<g transform="translate(0, 60)">
<path d="M 0,0 C 10,-20 20,-40 30,-60" stroke="#fff" stroke-width="2" fill="none" />
<path d="M 0,0 C -10,-20 -20,-40 -30,-60" stroke="#fff" stroke-width="2" fill="none" />
<path d="M 0,0 C 20,-30 40,-60 60,-90" stroke="#fff" stroke-width="2" fill="none" />
<path d="M 0,0 C -20,-30 -40,-60 -60,-90" stroke="#fff" stroke-width="2" fill="none" />
</g>
<!-- Gears -->
<g transform="translate(0, -20)">
<circle cx="0" cy="0" r="10" fill="#aaa" />
<circle cx="0" cy="0" r="8" fill="#bbb" />
<circle cx="0" cy="0" r="6" fill="#ccc" />
<circle cx="0" cy="0" r="4" fill="#ddd" />
</g>
<!-- Cogs -->
<g transform="translate(0, -30)">
<circle cx="0" cy="0" r="8" fill="#eee" />
<circle cx="0" cy="0" r="6" fill="#fff" />
</g>
</g>
<!-- Gradient -->
<linearGradient id="jellyfish-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ff69b4" />
<stop offset="0.5" stop-color="#ffb6c1" />
<stop offset="1" stop-color="#ffe6d9" />
</linearGradient>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's image effectively captures the steampunk jellyfish concept with a whimsical design featuring mechanical elements, glowing details, and a Victorian cityscape backdrop.
The image adheres well to the prompt and showcases creativity and technical quality.
In contrast, Player 2's submission lacks clear adherence to the theme and doesn't convey the steampunk or cityscape elements 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
214
Player 2
23
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
93
Player 2
12
Circles
The number of circle elements (circle) in the SVG.
Player 1
76
Player 2
6
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
4
Player 2
1
Lines
The number of line elements (line) in the SVG.
Player 1
4
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
37
Player 2
4
Groups
The number of group elements (g) in the SVG.
Player 1
33
Player 2
7
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
1
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
2
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
—
Player 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
35
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
23
Player 2
4
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
21
Player 2
16
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
34
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
50
Player 2
7
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
132
Player 2
8
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
5
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
8
Player 2
—
Use Elements
The number of use elements (use) in the SVG.
Player 1
15
Player 2
—
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.
Similar Challenges
Match #664
Mar 13, 2025
"Mushroom cityscape under a cosmic aurora sky"
P1
P2
Match #242
Mar 13, 2025
"A snail with a cityscape shell, complete with tiny skyscrapers and glowing windows"
P1
P2
Match #198
Mar 13, 2025
"Upside-down cityscape reflected in an ocean wave"
P1
P2
Match #8
Mar 13, 2025
"Jellyfish chandelier glowing in a stormy underwater ballroom"
P1
P2
