Creative Challenge
"An octopus juggling flaming torches under the sea."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#003f5c"/>
<stop offset="100%" stop-color="#2f4b7c"/>
</linearGradient>
<radialGradient id="bodyGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff6f91"/>
<stop offset="100%" stop-color="#d45087"/>
</radialGradient>
<radialGradient id="flameGrad" cx="50%" cy="0%" r="100%">
<stop offset="0%" stop-color="#fff700"/>
<stop offset="50%" stop-color="#ff5f1f"/>
<stop offset="100%" stop-color="#d72638"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#bgGrad)"/>
<g fill="white" opacity="0.3">
<circle cx="40" cy="60" r="8"/>
<circle cx="80" cy="40" r="5"/>
<circle cx="200" cy="50" r="7"/>
<circle cx="250" cy="80" r="6"/>
<circle cx="120" cy="100" r="4"/>
</g>
<g fill="none" stroke="#2a8f67" stroke-width="3">
<path d="M10 300 C20 250 30 200 25 150 C20 100 15 70 20 30"/>
<path d="M50 300 C60 240 70 190 65 140 C60 90 55 60 60 20"/>
<path d="M280 300 C270 240 260 190 255 140 C250 90 245 60 250 20"/>
<path d="M240 300 C230 250 220 200 215 150 C210 100 205 70 210 30"/>
</g>
<g id="octopus">
<ellipse cx="150" cy="170" rx="30" ry="25" fill="url(#bodyGrad)" stroke="#a63a7e" stroke-width="2"/>
<circle cx="140" cy="165" r="5" fill="#fff"/>
<circle cx="160" cy="165" r="5" fill="#fff"/>
<circle cx="140" cy="165" r="2" fill="#000"/>
<circle cx="160" cy="165" r="2" fill="#000"/>
</g>
<g id="arms" fill="none" stroke="#d45087" stroke-width="12" stroke-linecap="round">
<path d="M150 185 C140 225 120 260 100 290"/>
<path d="M150 185 C160 225 180 260 200 290"/>
<path d="M150 180 C130 210 110 240 90 260"/>
<path d="M150 180 C170 210 190 240 210 260"/>
<path d="M150 175 C120 200 100 220 80 240"/>
<path d="M150 175 C180 200 200 220 220 240"/>
<path d="M150 170 C135 195 120 215 105 235"/>
<path d="M150 170 C165 195 180 215 195 235"/>
</g>
<g id="torches" filter="url(#glow)">
<g transform="translate(100 80) rotate(-20)">
<rect x="-2" y="0" width="4" height="40" fill="#8b5a2b"/>
<ellipse cx="0" cy="2" rx="3" ry="2" fill="#ccc"/>
<path d="M0,2 C-5,-10 5,-10 0,2" fill="url(#flameGrad)"/>
</g>
<g transform="translate(200 60) rotate(10)">
<rect x="-2" y="0" width="4" height="40" fill="#8b5a2b"/>
<ellipse cx="0" cy="2" rx="3" ry="2" fill="#ccc"/>
<path d="M0,2 C-5,-10 5,-10 0,2" fill="url(#flameGrad)"/>
</g>
<g transform="translate(180 120) rotate(40)">
<rect x="-2" y="0" width="4" height="40" fill="#8b5a2b"/>
<ellipse cx="0" cy="2" rx="3" ry="2" fill="#ccc"/>
<path d="M0,2 C-5,-10 5,-10 0,2" fill="url(#flameGrad)"/>
</g>
<g transform="translate(120 110) rotate(-50)">
<rect x="-2" y="0" width="4" height="40" fill="#8b5a2b"/>
<ellipse cx="0" cy="2" rx="3" ry="2" fill="#ccc"/>
<path d="M0,2 C-5,-10 5,-10 0,2" fill="url(#flameGrad)"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- underwater background -->
<rect x="0" y="0" width="300" height="300" fill="#87CEEB" />
<!-- octopus body -->
<circle cx="150" cy="150" r="80" fill="#FF6347" />
<!-- octopus eyes -->
<circle cx="130" cy="130" r="7" fill="#fff" />
<circle cx="170" cy="130" r="7" fill="#fff" />
<!-- octopus tentacles -->
<path d="M150,150 Q100,250 80,220 Q80,280 110,270 Q140,280 140,250 Q120,240 140,220 Q160,240 160,270 Q190,280 220,270 Q220,280 220,220 Q200,250 150,150 Z" fill="#FF6347" />
<path d="M150,150 Q200,250 220,220 Q220,280 190,270 Q160,280 160,250 Q180,240 160,220 Q140,240 140,270 Q120,280 90,270 Q90,280 80,220 Q100,250 150,150 Z" fill="#FF6347" />
<!-- torches -->
<path d="M85,120 Q95,100 105,120 L95,130 L85,120 Z" fill="#FFD700">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#path1" />
</animateMotion>
</path>
<path d="M115,120 Q125,100 135,120 L125,130 L115,120 Z" fill="#FFD700">
<animateMotion dur="2.2s" repeatCount="indefinite">
<mpath href="#path2" />
</animateMotion>
</path>
<path id="path1" d="M50,250 Q90,150 130,250" visibility="hidden" />
<path id="path2" d="M70,250 Q110,150 150,250" visibility="hidden" />
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt by depicting an octopus juggling flaming torches under the sea, with clear underwater elements like bubbles and seaweed.
The inclusion of the torches being juggled is well-executed and adds to the creativity.
Player 2's submission lacks the juggling element and flaming torches, making it less aligned with the prompt despite its simplicity.
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
"A flamingo holding an umbrella in the rain."
"A snail wearing a jetpack, zooming over tiny skyscrapers."
"Two giraffes tangled in fairy lights under a crescent moon."
"A robot juggling planets in outer space."
