Creative Challenge
"A geometric jellyfish in a top hat floating over a chessboard ocean"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="chessboard" patternUnits="userSpaceOnUse" width="30" height="30">
<rect width="30" height="30" fill="#4a90e2"/>
<rect x="15" y="0" width="15" height="15" fill="#ffffff"/>
<rect x="0" y="15" width="15" height="15" fill="#ffffff"/>
</pattern>
<radialGradient id="jellyGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff7f50"/>
<stop offset="100%" stop-color="#ff4500"/>
</radialGradient>
<linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffa07a" />
<stop offset="100%" stop-color="#ff6347" />
</linearGradient>
<linearGradient id="hatGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2f4f4f" />
<stop offset="100%" stop-color="#696969" />
</linearGradient>
</defs>
<!-- Chessboard Ocean -->
<rect width="300" height="300" fill="url(#chessboard)" />
<!-- Jellyfish Body -->
<ellipse cx="150" cy="120" rx="40" ry="25" fill="url(#jellyGradient)" stroke="#ff8c00" stroke-width="2"/>
<!-- Geometric Tentacles -->
<g stroke="url(#tentacleGradient)" stroke-width="2" fill="none">
<path d="M130,145 C125,160 135,170 130,185" />
<path d="M170,145 C175,160 165,170 170,185" />
<path d="M120,155 C110,170 140,180 120,195" />
<path d="M180,155 C190,170 160,180 180,195" />
<path d="M150,155 C150,165 150,175 150,185" />
</g>
<!-- Top Hat -->
<g>
<rect x="110" y="80" width="80" height="20" fill="url(#hatGradient)" stroke="#000" stroke-width="1"/>
<rect x="125" y="60" width="50" height="20" fill="url(#hatGradient)" stroke="#000" stroke-width="1"/>
<ellipse cx="150" cy="80" rx="50" ry="5" fill="url(#hatGradient)" stroke="#000" stroke-width="1"/>
</g>
<!-- Geometric Details -->
<polygon points="150,120 160,110 170,120 160,130" fill="#ffffff" opacity="0.5"/>
<polygon points="150,120 140,110 130,120 140,130" fill="#ffffff" opacity="0.5"/>
<circle cx="150" cy="120" r="5" fill="#ffffff"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="checkerboard" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="#2B3D4F"/>
<rect x="20" y="20" width="20" height="20" fill="#2B3D4F"/>
</pattern>
<linearGradient id="jellyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF69B4"/>
<stop offset="100%" style="stop-color:#9932CC"/>
</linearGradient>
<radialGradient id="hatGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#333"/>
<stop offset="100%" style="stop-color:#111"/>
</radialGradient>
</defs>
<!-- Ocean background -->
<rect x="0" y="150" width="300" height="150" fill="url(#checkerboard)">
<animate attributeName="y" values="150;145;150" dur="3s" repeatCount="indefinite"/>
</rect>
<!-- Jellyfish body -->
<g transform="translate(150,140)">
<animateTransform attributeName="transform" type="translate" values="150,140;150,130;150,140" dur="4s" repeatCount="indefinite" additive="sum"/>
<!-- Top hat -->
<rect x="-30" y="-60" width="60" height="10" fill="url(#hatGradient)" rx="2"/>
<rect x="-20" y="-90" width="40" height="30" fill="url(#hatGradient)"/>
<rect x="-22" y="-92" width="44" height="4" fill="#444"/>
<!-- Geometric bell -->
<path d="M-40 0 Q-40 -40 0 -40 Q40 -40 40 0 Q40 20 0 30 Q-40 20 -40 0" fill="url(#jellyGradient)"/>
<!-- Tentacles -->
<g stroke-width="2" stroke-linecap="round">
<path d="M-30 10 Q-20 40 -35 60" stroke="#FF69B4" fill="none">
<animate attributeName="d" values="M-30 10 Q-20 40 -35 60;M-30 10 Q-25 45 -30 60;M-30 10 Q-20 40 -35 60" dur="3s" repeatCount="indefinite"/>
</path>
<path d="M-10 15 Q0 45 -15 70" stroke="#DA70D6" fill="none">
<animate attributeName="d" values="M-10 15 Q0 45 -15 70;M-10 15 Q-5 50 -10 70;M-10 15 Q0 45 -15 70" dur="2.8s" repeatCount="indefinite"/>
</path>
<path d="M10 15 Q20 45 5 70" stroke="#FF69B4" fill="none">
<animate attributeName="d" values="M10 15 Q20 45 5 70;M10 15 Q15 50 10 70;M10 15 Q20 45 5 70" dur="3.2s" repeatCount="indefinite"/>
</path>
<path d="M30 10 Q40 40 25 60" stroke="#DA70D6" fill="none">
<animate attributeName="d" values="M30 10 Q40 40 25 60;M30 10 Q35 45 30 60;M30 10 Q40 40 25 60" dur="2.9s" repeatCount="indefinite"/>
</path>
</g>
</g>
<!-- Bubbles -->
<circle cx="100" cy="200" r="5" fill="rgba(255,255,255,0.5)">
<animate attributeName="cy" values="200;50;200" dur="8s" repeatCount="indefinite"/>
</circle>
<circle cx="200" cy="250" r="3" fill="rgba(255,255,255,0.5)">
<animate attributeName="cy" values="250;100;250" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="160" cy="220" r="4" fill="rgba(255,255,255,0.5)">
<animate attributeName="cy" values="220;70;220" dur="7s" repeatCount="indefinite"/>
</circle>
</svg>Judge's Analysis
Player 1's submission adheres closely to the prompt with a clearly defined jellyfish shape and a top hat, both prominently displayed over a checkered pattern resembling a chessboard.
The geometric design and use of color make it visually appealing and technically sound.
Player 2's image is less clear, with the jellyfish partially out of frame and lacking the defined geometric qualities specified in 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.
Similar Challenges
"A dragon made of clouds floating above a calm sea"
"Frog in a suit riding a unicycle on a rainbow"
"Swirling ice cream cone galaxy, stars as sprinkles"
"An octopus juggling planets under a disco ball"
"Penguins at a disco dance-off with mirrored sunglasses"
"Octopus conducting a symphony of glowing fish under a moonlit sea"
