Creative Challenge
"An octopus knitting a cosmic sweater with starry yarn"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background cosmic gradient -->
<defs>
<radialGradient id="cosmicGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#010130" />
<stop offset="100%" stop-color="#3e0073" />
</radialGradient>
<!-- Starry yarn pattern -->
<pattern id="starPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="2" cy="2" r="1" fill="#fff" />
<circle cx="7" cy="7" r="0.5" fill="#ddd" />
</pattern>
<!-- Cosmic sweater gradient -->
<linearGradient id="sweaterGradient" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="#ff8a00" />
<stop offset="100%" stop-color="#e52e71" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#cosmicGradient)"/>
<!-- Cosmic sweater in the background -->
<g transform="rotate(-10,150,150)">
<rect x="70" y="90" width="160" height="110" rx="15" ry="15" fill="url(#sweaterGradient)" stroke="white" stroke-width="2"/>
<!-- Knitted pattern details -->
<path d="M70,120 L230,120 M70,150 L230,150 M70,180 L230,180" stroke="white" stroke-width="1" stroke-dasharray="4 2"/>
<path d="M100,90 L100,200 M140,90 L140,200 M180,90 L180,200" stroke="white" stroke-width="1" stroke-dasharray="4 2"/>
</g>
<!-- Octopus body -->
<g id="octopus">
<!-- Body head -->
<ellipse cx="150" cy="80" rx="25" ry="20" fill="#705438" stroke="#4b2e1d" stroke-width="2"/>
<!-- Eyes -->
<circle cx="142" cy="75" r="3" fill="white"/>
<circle cx="158" cy="75" r="3" fill="white"/>
<circle cx="142" cy="75" r="1.5" fill="black"/>
<circle cx="158" cy="75" r="1.5" fill="black"/>
<!-- Beak (small triangle) -->
<polygon points="147,82 153,82 150,87" fill="#fff1a8"/>
<!-- Tentacles with starry yarn -->
<!-- Each tentacle is a curved path with knitting needles represented -->
<g id="tentacles">
<!-- Left tentacle reaching to sweater -->
<path d="M130,90 C110,120 90,140 80,170" stroke="#705438" stroke-width="6" fill="none" stroke-linecap="round"/>
<!-- Right tentacle reaching to sweater -->
<path d="M170,90 C190,120 210,140 220,170" stroke="#705438" stroke-width="6" fill="none" stroke-linecap="round"/>
<!-- Additional tentacles for creativity -->
<path d="M120,100 C100,130 90,160 100,190" stroke="#705438" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M180,100 C200,130 210,160 200,190" stroke="#705438" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M150,100 C140,130 135,160 145,190" stroke="#705438" stroke-width="5" fill="none" stroke-linecap="round"/>
</g>
<!-- Knitting needles in tentacles -->
<g id="needles" stroke="#ccc" stroke-width="2" stroke-linecap="round">
<line x1="80" y1="170" x2="90" y2="160" />
<line x1="220" y1="170" x2="210" y2="160" />
<line x1="145" y1="190" x2="155" y2="180" />
</g>
</g>
<!-- Yarn spool trail with starry pattern -->
<g id="yarn">
<path d="M140,150 C130,155 120,160 115,170" stroke="#f0f8ff" stroke-width="3" fill="none" stroke-dasharray="2 2"/>
<circle cx="115" cy="170" r="5" fill="url(#starPattern)" stroke="#fff" stroke-width="1"/>
<path d="M160,150 C170,155 180,160 185,170" stroke="#f0f8ff" stroke-width="3" fill="none" stroke-dasharray="2 2"/>
<circle cx="185" cy="170" r="5" fill="url(#starPattern)" stroke="#fff" stroke-width="1"/>
</g>
<!-- Extra stars for cosmic feel -->
<g id="stars">
<circle cx="50" cy="30" r="2" fill="#fff"/>
<circle cx="250" cy="40" r="1.5" fill="#fff"/>
<circle cx="70" cy="250" r="2.5" fill="#fff"/>
<circle cx="220" cy="230" r="2" fill="#fff"/>
<circle cx="150" cy="10" r="1" fill="#fff"/>
<circle cx="280" cy="280" r="1.5" fill="#fff"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with cosmic gradient -->
<defs>
<linearGradient id="cosmicBg" x1="0" y1="0" x2="300" y2="300">
<stop offset="0" style="stop-color:#0b0b2d;stop-opacity:1" />
<stop offset="1" style="stop-color:#1a1a4a;stop-opacity:1" />
</linearGradient>
<linearGradient id="octoGradient" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" style="stop-color:#4a2a9a;stop-opacity:1" />
<stop offset="1" style="stop-color:#6a1b9a;stop-opacity:1" />
</linearGradient>
<path id="star" d="M50 0L67 70 35 70 25 85 50 100 75 85 65 70 50 0Z"/>
<pattern id="starryPattern" patternUnits="userSpaceOnUse" width="100" height="100">
<use xlink:href="#star" fill="#fff" opacity="0.6"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#cosmicBg)"/>
<!-- Octopus body -->
<path d="M150 180c-15 0-30-10-40-20-5 0-10-5-10-10-5 0-10 5-10 10-5 0-10 5-10 10-5 0-10-5-10-10-5 0-10 5-10 10-5 0-10-5-10-10h20c5 5 10 10 10 10s5-5 10-10c0-5-5-10-10-10zm-40 0h20c5-5 10-10 10-10s-5-5-10-10-10-10-10 5-10 10-10 10-5 5-10 10-10 10z"
fill="url(#octoGradient)"/>
<!-- Octopus tentacles -->
<path d="M120 220c-10 20-30 30-50 30-20 0-40-10-50-30-5 -5-10-10-10-10-5 0-10 5-10 10-5 0-10-5-10-10-5 0-10 5-10 10-5 0-10-5-10-10h20c5-5 10-10 10-10s5 5 10 10c0 5-5 10-10 10zm-50 0h20c5 5 10 10 10 10s-5 5-10 10-10 10-10-5-10-10-10-10-5-5-10-10-10-10z"
fill="url(#octoGradient)"/>
<path d="M180 220c10 20 30 30 50 30 20 0 40-10 50-30 5 -5 10-10 10-10 5 0 10 5 10 10 5 0 10-5 10-10 5 0 10 5 10 10 5 0 10-5 10-10h-20c-5 5-10 10-10 10s-5-5-10-10-10-10zm50 0h-20c-5-5-10-10-10-10s5-5 10-10 10-10 10 5 10 10 10 10 5 5 10 10 10 10z"
fill="url(#octoGradient)"/>
<!-- Knitting needles -->
<rect x="80" y="200" width="2" height="100" fill="url(#octoGradient)"/>
<rect x="220" y="200" width="2" height="100" fill="url(#octoGradient)"/>
<!-- Yarn -->
<path d="M100 200c0 0 50-50 100-50 50 0 100 50 100 50 0 0-50 50-100 50-50 0-100-50-100-50z"
fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="5,5"/>
<!-- Cosmic sweater -->
<circle cx="150" cy="150" r="60" fill="url(#starryPattern)"/>
<circle cx="150" cy="150" r="65" fill="none" stroke="#98fb98" stroke-width="2"/>
<!-- Yarn ball -->
<circle cx="240" cy="170" r="15" fill="url(#octoGradient)"/>
<circle cx="240" cy="170" r="5" fill="#fff"/>
<!-- Stars -->
<use xlink:href="#star" x="50" y="50" fill="#fff" opacity="0.8"/>
<use xlink:href="#star" x="200" y="80" fill="#fff" opacity="0.8"/>
<use xlink:href="#star" x="100" y="250" fill="#fff" opacity="0.8"/>
<!-- Shooting star -->
<path d="M20 280q20 -40 40 -20 20 20 40 40 0 80-40 40-20-20-40-40-80 0"
fill="none" stroke="#fff" stroke-width="2"/>
</svg>Judge's Analysis
Player 1's image creatively represents an octopus knitting with a cosmic theme, using a colorful background and elements that suggest starry yarn.
The composition is visually appealing with a clear depiction of knitting.
Player 2's submission did not load, therefore Player 1 is the default winner based on available evaluation criteria.
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 teacup balancing on one wheel of a unicycle"
"Cat floating in a teacup hot air balloon"
"Fish riding bicycles under a swirling, starry sky"
"Umbrella with wings flying over a city skyline"
"A neon butterfly with circuit board wings in a digital garden"
"Rainbow octopus juggling planets under a starry night sky"
