Creative Challenge
"Floating jellyfish over a desert, geometric style"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Gradient Definitions -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ff7b00" />
<stop offset="50%" stop-color="#ff5e62" />
<stop offset="100%" stop-color="#5e17eb" />
</linearGradient>
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f2a355" />
<stop offset="50%" stop-color="#e8873a" />
<stop offset="100%" stop-color="#c56c1d" />
</linearGradient>
<linearGradient id="jellyfishGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#9d4edd" stop-opacity="0.9" />
<stop offset="100%" stop-color="#c77dff" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="jellyfishGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00b4d8" stop-opacity="0.8" />
<stop offset="100%" stop-color="#48cae4" stop-opacity="0.6" />
</linearGradient>
<linearGradient id="jellyfishGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ef476f" stop-opacity="0.85" />
<stop offset="100%" stop-color="#f78c6b" stop-opacity="0.65" />
</linearGradient>
<pattern id="sandPattern" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,10 L20,10 M10,0 L10,20" stroke="#d69f4e" stroke-width="0.5" stroke-opacity="0.3" />
<path d="M5,5 L15,15 M15,5 L5,15" stroke="#d69f4e" stroke-width="0.5" stroke-opacity="0.3" />
</pattern>
</defs>
<!-- Background Sky -->
<rect x="0" y="0" width="300" height="220" fill="url(#skyGradient)" />
<!-- Desert Sand -->
<path d="M0,180 Q75,160 150,190 T300,170 L300,300 L0,300 Z" fill="url(#sandGradient)" />
<path d="M0,180 Q75,160 150,190 T300,170 L300,300 L0,300 Z" fill="url(#sandPattern)" />
<!-- Geometric Dunes -->
<path d="M0,230 L60,210 L120,240 L180,215 L240,245 L300,220 L300,300 L0,300 Z" fill="#e8873a" fill-opacity="0.5" />
<path d="M0,260 L50,245 L100,265 L150,240 L200,270 L250,250 L300,275 L300,300 L0,300 Z" fill="#d68230" fill-opacity="0.6" />
<!-- Cactus 1 -->
<polygon points="80,230 85,180 90,230 95,190 100,230" fill="#2b9348" />
<rect x="80" y="230" width="20" height="30" fill="#2b9348" />
<!-- Cactus 2 -->
<polygon points="220,220 225,180 230,220 235,190 240,220" fill="#2b9348" />
<rect x="220" y="220" width="20" height="35" fill="#2b9348" />
<!-- Geometric Rocks -->
<polygon points="30,260 45,255 40,270 25,275" fill="#8d6a36" />
<polygon points="250,265 270,260 275,275 255,280" fill="#8d6a36" />
<polygon points="160,250 180,245 185,260 165,265" fill="#8d6a36" />
<!-- Jellyfish 1 -->
<g transform="translate(70, 80)">
<polygon points="0,0 30,0 40,10 30,20 0,20 -10,10" fill="url(#jellyfishGradient1)" />
<line x1="5" y1="20" x2="0" y2="40" stroke="#9d4edd" stroke-width="2" stroke-opacity="0.7" />
<line x1="10" y1="20" x2="10" y2="45" stroke="#9d4edd" stroke-width="2" stroke-opacity="0.7" />
<line x1="15" y1="20" x2="20" y2="50" stroke="#9d4edd" stroke-width="2" stroke-opacity="0.7" />
<line x1="20" y1="20" x2="30" y2="42" stroke="#9d4edd" stroke-width="2" stroke-opacity="0.7" />
<line x1="25" y1="20" x2="40" y2="38" stroke="#9d4edd" stroke-width="2" stroke-opacity="0.7" />
<circle cx="15" cy="10" r="4" fill="white" fill-opacity="0.6" />
</g>
<!-- Jellyfish 2 -->
<g transform="translate(180, 50)">
<polygon points="0,0 40,0 50,15 40,30 0,30 -10,15" fill="url(#jellyfishGradient2)" />
<line x1="5" y1="30" x2="0" y2="55" stroke="#00b4d8" stroke-width="2" stroke-opacity="0.7" />
<line x1="15" y1="30" x2="10" y2="60" stroke="#00b4d8" stroke-width="2" stroke-opacity="0.7" />
<line x1="25" y1="30" x2="30" y2="65" stroke="#00b4d8" stroke-width="2" stroke-opacity="0.7" />
<line x1="35" y1="30" x2="40" y2="50" stroke="#00b4d8" stroke-width="2" stroke-opacity="0.7" />
<circle cx="20" cy="15" r="6" fill="white" fill-opacity="0.6" />
<circle cx="10" cy="10" r="3" fill="white" fill-opacity="0.4" />
<circle cx="30" cy="10" r="3" fill="white" fill-opacity="0.4" />
</g>
<!-- Jellyfish 3 -->
<g transform="translate(130, 110)">
<polygon points="0,0 25,0 35,8 25,16 0,16 -10,8" fill="url(#jellyfishGradient3)" />
<line x1="5" y1="16" x2="0" y2="36" stroke="#ef476f" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="10" y1="16" x2="8" y2="40" stroke="#ef476f" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="15" y1="16" x2="16" y2="38" stroke="#ef476f" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="20" y1="16" x2="24" y2="32" stroke="#ef476f" stroke-width="1.5" stroke-opacity="0.7" />
<circle cx="12" cy="8" r="3" fill="white" fill-opacity="0.6" />
</g>
<!-- Stars/sparkles -->
<circle cx="40" cy="30" r="1" fill="white" />
<circle cx="60" cy="50" r="0.8" fill="white" />
<circle cx="100" cy="25" r="1.2" fill="white" />
<circle cx="140" cy="40" r="1" fill="white" />
<circle cx="200" cy="20" r="1.5" fill="white" />
<circle cx="240" cy="60" r="0.7" fill="white" />
<circle cx="270" cy="30" r="1" fill="white" />
<!-- Sun -->
<circle cx="250" cy="40" r="15" fill="#ffbe0b" />
<circle cx="250" cy="40" r="12" fill="#fb8500" />
<!-- Heat waves -->
<path d="M20,140 Q30,135 40,140 Q50,145 60,140 Q70,135 80,140" fill="none" stroke="white" stroke-opacity="0.2" stroke-width="1" />
<path d="M120,130 Q130,125 140,130 Q150,135 160,130 Q170,125 180,130" fill="none" stroke="white" stroke-opacity="0.2" stroke-width="1" />
<path d="M220,150 Q230,145 240,150 Q250,155 260,150 Q270,145 280,150" fill="none" stroke="white" stroke-opacity="0.2" stroke-width="1" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b"/>
<stop offset="100%" style="stop-color:#ffd93d"/>
</linearGradient>
<pattern id="sandPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0h10v10H0z" fill="#f4a261"/>
<circle cx="5" cy="5" r="1" fill="#e76f51" opacity="0.3"/>
</pattern>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
<!-- Desert dunes -->
<path d="M0 200 Q75 150 150 200 T300 200 L300 300 L0 300 Z" fill="url(#sandPattern)"/>
<path d="M0 220 Q100 180 200 220 T300 220 L300 300 L0 300 Z" fill="#e76f51" opacity="0.3"/>
<!-- Geometric jellyfish 1 -->
<g transform="translate(80,100)">
<polygon points="0,0 30,-20 60,0 30,20" fill="#4361ee" opacity="0.8"/>
<path d="M15,0 L15,40 M30,0 L30,50 M45,0 L45,40" stroke="#4361ee" stroke-width="2"/>
</g>
<!-- Geometric jellyfish 2 -->
<g transform="translate(180,80)">
<polygon points="0,0 40,-30 80,0 40,30" fill="#3a0ca3" opacity="0.7"/>
<path d="M20,0 L20,60 M40,0 L40,70 M60,0 L60,60" stroke="#3a0ca3" stroke-width="3"/>
</g>
<!-- Geometric jellyfish 3 -->
<g transform="translate(140,150)">
<polygon points="0,0 25,-15 50,0 25,15" fill="#7209b7" opacity="0.6"/>
<path d="M12,0 L12,30 M25,0 L25,40 M38,0 L38,30" stroke="#7209b7" stroke-width="2"/>
</g>
<!-- Decorative geometric elements -->
<circle cx="50" cy="50" r="10" fill="#f72585" opacity="0.5"/>
<circle cx="250" cy="70" r="15" fill="#4cc9f0" opacity="0.4"/>
<polygon points="150,30 160,40 140,40" fill="#4361ee" opacity="0.3"/>
<rect x="200" y="40" width="20" height="20" transform="rotate(45 210 50)" fill="#7209b7" opacity="0.4"/>
<!-- Heat waves -->
<path d="M20 180 Q40 170 60 180 Q80 190 100 180" fill="none" stroke="#ff6b6b" stroke-width="2" opacity="0.3"/>
<path d="M220 170 Q240 160 260 170 Q280 180 300 170" fill="none" stroke="#ff6b6b" stroke-width="2" opacity="0.3"/>
</svg>Judge's Analysis
Player 1's submission captures the essence of the prompt with a well-defined desert landscape and geometric jellyfish that stand out against the vibrant gradient sky.
The use of multiple colors and shapes adds to the creativity and visual appeal.
Player 2's image, while also creative, lacks the same level of detail in the desert landscape and has a less contrasting color scheme, making Player 1's submission more engaging overall.
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
"Penguin wearing scuba gear under a full moon"
"Battling chess pieces on a melting ice chessboard"
"A neon jellyfish floating in a futuristic cityscape at night"
"Surreal clock with melting numbers in a candy forest"
"Moonlit octopus ballroom waltz, undersea elegance, in Art Deco style"
"Surreal clock melting over a neon cityscape"
