Creative Challenge
"A jellyfish wearing a suit and tie, floating through a city skyline at dusk."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4a90e2;stop-opacity:1" />
<stop offset="100%" style="stop-color:#a11d55;stop-opacity:1" />
</linearGradient>
<linearGradient id="jellyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff99c8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff3385;stop-opacity:1" />
</linearGradient>
<pattern id="tiePattern" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="#333" />
<line x1="0" y1="0" x2="10" y2="10" stroke="#fff" stroke-width="1" />
<line x1="10" y1="0" x2="0" y2="10" stroke="#fff" stroke-width="1" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<path fill="url(#jellyGradient)" d="M150 50C130 70 110 90 100 120C90 150 110 180 150 180C190 180 210 150 200 120C190 90 170 70 150 50Z" />
<polygon fill="url(#tiePattern)" points="145,180 155,180 155,210 145,210" />
<path fill="#000" d="M140 180C140 190 160 190 160 180C160 170 140 170 140 180Z" />
<g>
<circle cx="150" cy="40" r="15" fill="#fff" />
<circle cx="145" cy="38" r="3" fill="#000" />
<circle cx="155" cy="38" r="3" fill="#000" />
</g>
<path fill="#ff99c8" d="M150 80C160 100 170 110 180 130C180 140 175 150 160 150C145 150 140 155 140 150C140 145 145 140 145 135C125 140 100 130 90 125C80 120 80 100 90 95C100 90 130 105 150 80Z" />
<path fill="#282828" d="M180 160C190 170 200 180 210 190H60V165H130C150 165 160 155 180 160Z" />
<rect width="30" height="80" x="20" y="200" fill="#505050" />
<rect width="30" height="80" x="70" y="180" fill="#404040" />
<rect width="30" height="80" x="120" y="220" fill="#505050" />
<rect width="30" height="80" x="170" y="190" fill="#404040" />
<rect width="30" height="80" x="220" y="205" fill="#505050" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:#FF7F50;stop-opacity:1" />
<stop offset="25%" style="stop-color:#FF6347;stop-opacity:1" />
<stop offset="60%" style="stop-color:#8A2BE2;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2F2F4F;stop-opacity:1" />
</linearGradient>
<radialGradient id="jellyBellGradient" cx="50%" cy="40%" r="60%" fx="50%" fy="30%">
<stop offset="0%" style="stop-color:#E0FFFF; stop-opacity:0.7;" />
<stop offset="40%" style="stop-color:#AFEEEE; stop-opacity:0.6;" />
<stop offset="70%" style="stop-color:#FFB6C1; stop-opacity:0.5;" />
<stop offset="100%" style="stop-color:#D8BFD8; stop-opacity:0.4;" />
</radialGradient>
<linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFB6C1; stop-opacity:0.8;" />
<stop offset="50%" style="stop-color:#DB7093; stop-opacity:0.7;" />
<stop offset="100%" style="stop-color:#BA55D3; stop-opacity:0.6;" />
</linearGradient>
<linearGradient id="tieGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C00000;"/>
<stop offset="100%" style="stop-color:#800000;"/>
</linearGradient>
<filter id="jellyGlow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="pinstripe" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(15)">
<line x1="0" y1="0" x2="0" y2="6" stroke="#3C3C3C" stroke-width="0.5"/>
</pattern>
</defs>
<!-- Sky Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars">
<circle cx="25" cy="40" r="0.8" fill="#FFFACD" opacity="0.7"/>
<circle cx="70" cy="25" r="1.2" fill="white" opacity="0.9"/>
<circle cx="120" cy="60" r="0.7" fill="white" opacity="0.6"/>
<circle cx="180" cy="30" r="1.3" fill="#FFFFE0" opacity="0.8"/>
<circle cx="220" cy="55" r="0.9" fill="white" opacity="0.7"/>
<circle cx="260" cy="20" r="1.1" fill="#FFFACD" opacity="0.9"/>
<circle cx="280" cy="70" r="0.8" fill="white" opacity="0.5"/>
<circle cx="50" cy="80" r="0.6" fill="#FFFFE0" opacity="0.6"/>
<circle cx="150" cy="45" r="1.0" fill="white" opacity="0.8"/>
<circle cx="200" cy="90" r="0.7" fill="#FFFACD" opacity="0.5"/>
</g>
<!-- City Skyline -->
<g id="skyline">
<path d="M0 300 L0 220 Q 20 215, 40 220 L 50 200 L 70 210 Q 90 200, 110 205 L 120 180 L 135 190 L140 160 L150 165 L160 160 L165 190 L 180 180 Q 200 200, 220 205 L 230 210 L 250 200 Q 270 215, 300 220 L 300 300 Z" fill="#121212"/>
<rect x="15" y="170" width="25" height="130" fill="#1A1A1A"/>
<rect x="18" y="175" width="4" height="6" fill="#FFD700" opacity="0.7"/>
<rect x="28" y="190" width="4" height="6" fill="#FFD700" opacity="0.7"/>
<rect x="22" y="210" width="4" height="6" fill="#FFA500" opacity="0.6"/>
<path d="M60 300 L60 150 L65 145 L85 145 L90 150 L90 160 L80 165 L80 300 Z" fill="#202020"/>
<rect x="68" y="155" width="5" height="8" fill="#FFA500" opacity="0.6"/>
<rect x="72" y="175" width="5" height="8" fill="#FFD700" opacity="0.6"/>
<rect x="70" y="200" width="5" height="8" fill="#FFA500" opacity="0.5"/>
<path d="M130 300 L130 120 L140 100 L160 100 L170 120 L170 300 Z" fill="#0D0D0D"/>
<rect x="142" y="125" width="6" height="10" fill="#FFD700" opacity="0.8"/>
<rect x="152" y="110" width="6" height="10" fill="#FFD700" opacity="0.8"/>
<rect x="145" y="200" width="10" height="15" fill="#FFA500" opacity="0.5"/>
<line x1="150" y1="100" x2="150" y2="85" stroke="#FF3333" stroke-width="1.5" opacity="0.9"/>
<circle cx="150" cy="83" r="1.5" fill="#FF3333" opacity="0.9"/>
<rect x="200" y="160" width="30" height="140" fill="#1C1C1C"/>
<rect x="205" y="180" width="4" height="7" fill="#FFFF00" opacity="0.6"/>
<rect x="215" y="165" width="4" height="7" fill="#FFFF00" opacity="0.6"/>
<rect x="208" y="200" width="4" height="7" fill="#FFA500" opacity="0.5"/>
<path d="M250 300 L250 190 L255 185 L265 185 L270 190 L270 200 L260 205 L260 300 Z" fill="#1E1E1E"/>
<rect x="253" y="195" width="3" height="5" fill="#FFD700" opacity="0.5"/>
<rect x="263" y="210" width="3" height="5" fill="#FFA500" opacity="0.5"/>
</g>
<!-- Jellyfish in Suit -->
<g id="completeJellyfish" transform="translate(0, -20)">
<!-- Tentacles -->
<g id="tentacles">
<path d="M150 150 C140 175, 165 195, 150 220 C135 245, 160 265, 145 290"
stroke="url(#tentacleGradient)" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.85"/>
<path d="M142 152 C130 180, 155 200, 140 225 C125 250, 150 270, 135 295"
stroke="url(#tentacleGradient)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.75"/>
<path d="M158 152 C170 180, 145 200, 160 225 C175 250, 150 270, 165 295"
stroke="url(#tentacleGradient)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.75"/>
<path d="M135 150 C128 160, 142 165, 133 175 C125 185, 138 190, 130 200" stroke="#DB7093" stroke-width="2.5" fill="none" opacity="0.65" stroke-linecap="round"/>
<path d="M165 150 C172 160, 158 165, 167 175 C175 185, 162 190, 170 200" stroke="#DB7093" stroke-width="2.5" fill="none" opacity="0.65" stroke-linecap="round"/>
</g>
<!-- Jellyfish Bell -->
<path id="jellyBellActual"
d="M150,70 Q100,70 100,100 C100,130 125,150 150,150 C175,150 200,130 200,100 Q200,70 150,70 Z"
fill="url(#jellyBellGradient)" filter="url(#jellyGlow)"/>
<!-- Inner lines for bell -->
<line x1="150" y1="75" x2="150" y2="147" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
<path d="M120,145 Q150,130 180,145" stroke="rgba(255,255,255,0.3)" stroke-width="1.2" fill="none"/>
<path d="M130,80 Q150,95 170,80" stroke="rgba(255,255,255,0.3)" stroke-width="1.2" fill="none" transform="rotate(15 150 110)"/>
<path d="M130,80 Q150,95 170,80" stroke="rgba(255,255,255,0.3)" stroke-width="1.2" fill="none" transform="rotate(-15 150 110)"/>
<!-- Suit Jacket -->
<path d="M105,148 C110,140 130,138 150,138 C170,138 190,140 195,148 L190,153 C170,150 130,150 110,153 Z" fill="#2C2C2C"/>
<path d="M105,148 C110,140 130,138 150,138 C170,138 190,140 195,148 L190,153 C170,150 130,150 110,153 Z" fill="url(#pinstripe)"/>
<!-- Lapels -->
<path d="M130,139 L142,150 L148,143 Z" fill="#383838"/>
<path d="M170,139 L158,150 L152,143 Z" fill="#383838"/>
<!-- Shirt Collar -->
<path d="M140,143 L145,149 L150,145 L155,149 L160,143 Z" fill="#F0F0F0"/>
<!-- Tie -->
<polygon points="148,145 152,145 150,149" fill="url(#tieGradient)"/>
<path d="M148,149 L147,190 Q150,200 153,190 L152,149 Z" fill="url(#tieGradient)" stroke="#600000" stroke-width="0.5"/>
</g>
</svg>Judge's Analysis
Player 2's submission is more creative and better adheres to the prompt.
It features a clear jellyfish with tentacles, wearing a suit and tie, floating above a detailed city skyline at dusk.
The composition is visually appealing and technically well-executed, whereas Player 1's submission lacks clear details and does not strongly convey the concept of a jellyfish in a suit or the cityscape context.
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
"An octopus juggling planets in deep space."
"A melting clock dripping off a tree branch under a starry night sky."
"An ice-cream cone melting under a tiny sun wearing sunglasses."
