Creative Challenge
"An octopus wearing a top hat, juggling three glowing orbs."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Glowing orb gradients -->
<radialGradient id="orb1" cx="30%" cy="20%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="20%" stop-color="#00ffff" stop-opacity="0.9"/>
<stop offset="60%" stop-color="#0080ff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#004080" stop-opacity="0.2"/>
</radialGradient>
<radialGradient id="orb2" cx="30%" cy="20%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="20%" stop-color="#00ff80" stop-opacity="0.9"/>
<stop offset="60%" stop-color="#00cc44" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#006622" stop-opacity="0.2"/>
</radialGradient>
<radialGradient id="orb3" cx="30%" cy="20%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="20%" stop-color="#ffff00" stop-opacity="0.9"/>
<stop offset="60%" stop-color="#ff8000" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#cc4400" stop-opacity="0.2"/>
</radialGradient>
<!-- Octopus body gradient -->
<radialGradient id="octopusBody" cx="35%" cy="25%">
<stop offset="0%" stop-color="#ff99cc"/>
<stop offset="40%" stop-color="#ee4488"/>
<stop offset="70%" stop-color="#bb2266"/>
<stop offset="100%" stop-color="#881144"/>
</radialGradient>
<!-- Tentacle gradient -->
<linearGradient id="tentacle" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff77bb"/>
<stop offset="50%" stop-color="#dd3377"/>
<stop offset="100%" stop-color="#aa1155"/>
</linearGradient>
<!-- Hat gradient -->
<linearGradient id="hatGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#444444"/>
<stop offset="50%" stop-color="#222222"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<!-- Glow filter -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Strong glow for orbs -->
<filter id="strongGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="6" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Deep ocean background -->
<rect width="300" height="300" fill="#0a0a2e"/>
<!-- Ambient light rays -->
<circle cx="150" cy="50" r="80" fill="url(#orb1)" opacity="0.1"/>
<circle cx="80" cy="120" r="60" fill="url(#orb2)" opacity="0.08"/>
<circle cx="220" cy="120" r="60" fill="url(#orb3)" opacity="0.08"/>
<!-- Octopus tentacles with dynamic curves -->
<!-- Left juggling tentacle -->
<path d="M 125 180 Q 85 155 65 125 Q 55 115 50 110 Q 45 105 50 100 Q 60 105 70 120 Q 85 140 110 165 Q 120 175 125 180"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Right juggling tentacle -->
<path d="M 175 180 Q 215 155 235 125 Q 245 115 250 110 Q 255 105 250 100 Q 240 105 230 120 Q 215 140 190 165 Q 180 175 175 180"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Top reaching tentacle (left) -->
<path d="M 135 155 Q 105 125 85 85 Q 80 75 75 70 Q 70 65 75 60 Q 85 65 95 80 Q 115 120 135 155"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Top reaching tentacle (right) -->
<path d="M 165 155 Q 195 125 215 85 Q 220 75 225 70 Q 230 65 225 60 Q 215 65 205 80 Q 185 120 165 155"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Bottom tentacles -->
<path d="M 130 200 Q 105 235 85 270 Q 80 280 75 285 Q 70 290 75 295 Q 85 290 95 275 Q 115 240 135 205"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<path d="M 170 200 Q 195 235 215 270 Q 220 280 225 285 Q 230 290 225 295 Q 215 290 205 275 Q 185 240 165 205"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Side tentacles -->
<path d="M 120 175 Q 85 185 60 205 Q 50 215 45 220 Q 40 225 45 230 Q 55 225 70 210 Q 95 190 120 180"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<path d="M 180 175 Q 215 185 240 205 Q 250 215 255 220 Q 260 225 255 230 Q 245 225 230 210 Q 205 190 180 180"
fill="url(#tentacle)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Octopus body -->
<ellipse cx="150" cy="175" rx="38" ry="32" fill="url(#octopusBody)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Octopus head -->
<ellipse cx="150" cy="135" rx="42" ry="38" fill="url(#octopusBody)" stroke="#661133" stroke-width="2" filter="url(#glow)"/>
<!-- Eyes with personality -->
<ellipse cx="135" cy="130" rx="10" ry="12" fill="white" stroke="#666" stroke-width="1"/>
<ellipse cx="165" cy="130" rx="10" ry="12" fill="white" stroke="#666" stroke-width="1"/>
<ellipse cx="136" cy="132" rx="5" ry="6" fill="black"/>
<ellipse cx="164" cy="132" rx="5" ry="6" fill="black"/>
<!-- Eye highlights -->
<ellipse cx="138" cy="129" rx="2" ry="2.5" fill="white"/>
<ellipse cx="166" cy="129" rx="2" ry="2.5" fill="white"/>
<!-- Elegant top hat -->
<ellipse cx="150" cy="95" rx="48" ry="10" fill="url(#hatGrad)" stroke="black" stroke-width="2"/>
<rect x="115" y="60" width="70" height="35" fill="url(#hatGrad)" stroke="black" stroke-width="2"/>
<ellipse cx="150" cy="60" rx="35" ry="8" fill="#555555" stroke="black" stroke-width="2"/>
<!-- Hat band with sparkle -->
<rect x="115" y="78" width="70" height="8" fill="#ff1166"/>
<circle cx="130" cy="82" r="2" fill="white" opacity="0.8"/>
<circle cx="170" cy="82" r="1.5" fill="white" opacity="0.6"/>
<!-- Glowing juggling orbs -->
<circle cx="150" cy="35" r="18" fill="url(#orb1)" filter="url(#strongGlow)"/>
<circle cx="70" cy="110" r="15" fill="url(#orb2)" filter="url(#strongGlow)"/>
<circle cx="230" cy="110" r="15" fill="url(#orb3)" filter="url(#strongGlow)"/>
<!-- Motion trails -->
<path d="M 70 110 Q 105 75 150 35" stroke="#00ff80" stroke-width="3" fill="none" opacity="0.6" stroke-dasharray="8,4">
<animate attributeName="stroke-dashoffset" values="0;12" dur="0.8s" repeatCount="indefinite"/>
</path>
<path d="M 230 110 Q 195 75 150 35" stroke="#ffaa00" stroke-width="3" fill="none" opacity="0.6" stroke-dasharray="8,4">
<animate attributeName="stroke-dashoffset" values="0;12" dur="0.8s" repeatCount="indefinite"/>
</path>
<!-- Suction cups on tentacles -->
<circle cx="60" cy="120" r="4" fill="#ffaacc" opacity="0.9"/>
<circle cx="240" cy="120" r="4" fill="#ffaacc" opacity="0.9"/>
<circle cx="90" cy="80" r="3" fill="#ffaacc" opacity="0.8"/>
<circle cx="210" cy="80" r="3" fill="#ffaacc" opacity="0.8"/>
<circle cx="85" cy="275" r="3" fill="#ffaacc" opacity="0.8"/>
<circle cx="215" cy="275" r="3" fill="#ffaacc" opacity="0.8"/>
<circle cx="55" cy="215" r="3" fill="#ffaacc" opacity="0.7"/>
<circle cx="245" cy="215" r="3" fill="#ffaacc" opacity="0.7"/>
<!-- Magical sparkles around the performance -->
<circle cx="50" cy="60" r="1" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="250" cy="70" r="1.5" fill="#ffff80" opacity="0.7">
<animate attributeName="opacity" values="0.2;0.9;0.2" dur="1.5s" repeatCount="indefinite"/>
</circle>
<circle cx="40" cy="180" r="1" fill="#80ffff" opacity="0.6">
<animate attributeName="opacity" values="0.4;1;0.4" dur="1.8s" repeatCount="indefinite"/>
</circle>
<circle cx="260" cy="190" r="1" fill="#ff80ff" opacity="0.7">
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.2s" repeatCount="indefinite"/>
</circle>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="octopusGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(100,0,150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(50,0,100);stop-opacity:1" />
</radialGradient>
<radialGradient id="orbGradientYellow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,150,0);stop-opacity:0.8" />
</radialGradient>
<radialGradient id="orbGradientGreen" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(100,255,100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,200,0);stop-opacity:0.8" />
</radialGradient>
<radialGradient id="orbGradientBlue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(100,100,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,200);stop-opacity:0.8" />
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#201030"/>
<!-- Orbs -->
<circle cx="100" cy="80" r="20" fill="url(#orbGradientYellow)" filter="url(#glow)"/>
<circle cx="150" cy="60" r="20" fill="url(#orbGradientGreen)" filter="url(#glow)"/>
<circle cx="200" cy="80" r="20" fill="url(#orbGradientBlue)" filter="url(#glow)"/>
<!-- Octopus Body -->
<ellipse cx="150" cy="170" rx="80" ry="60" fill="url(#octopusGradient)"/>
<!-- Tentacles -->
<path d="M 150 220 Q 100 280 50 250 Q 70 290 100 270" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 200 280 250 250 Q 230 290 200 270" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 120 250 100 200 Q 80 240 110 210" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 180 250 200 200 Q 220 240 190 210" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 140 260 150 280 Q 160 260 150 220" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 100 150 80 120 Q 120 100 130 140" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 200 150 220 120 Q 180 100 170 140" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 130 180 110 160 Q 140 170 130 190" fill="url(#octopusGradient)"/>
<path d="M 150 220 Q 170 180 190 160 Q 160 170 170 190" fill="url(#octopusGradient)"/>
<!-- Eyes -->
<circle cx="130" cy="150" r="10" fill="white"/>
<circle cx="170" cy="150" r="10" fill="white"/>
<circle cx="130" cy="150" r="5" fill="black"/>
<circle cx="170" cy="150" r="5" fill="black"/>
<!-- Top Hat -->
<rect x="115" y="100" width="70" height="40" fill="#333"/>
<rect x="100" y="135" width="100" height="15" fill="#333"/>
</svg>Judge's Analysis
Player 2's submission better adheres to the prompt as the creature more closely resembles an octopus due to its tentacle-like appendages and overall design.
The glowing orbs are clearly emphasized and visually balanced, enhancing the composition.
While Player 1's image is colorful and playful, the creature resembles a spider more than an octopus, making it less aligned with the prompt.
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.