Creative Challenge
"Moonlit jellyfish juggling galaxies"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background: Moonlit night -->
<rect x="0" y="0" width="300" height="300" fill="#0c1447" />
<!-- Moon -->
<circle cx="250" cy="50" r="30" fill="#e2f2f2" />
<!-- Galaxy 1 -->
<circle cx="130" cy="200" r="60" fill="#4c4c5f" />
<circle cx="130" cy="200" r="40" fill="#9494a6" />
<circle cx="130" cy="200" r="20" fill="#d9d9e2" />
<!-- Galaxy 2 -->
<circle cx="200" cy="120" r="80" fill="#474c4c" />
<circle cx="200" cy="120" r="50" fill="#6e7474" />
<circle cx="200" cy="120" r="30" fill="#b0b5b5" />
<!-- Jellyfish body -->
<ellipse cx="100" cy="100" rx="20" ry="60" fill="#68b8b7" />
<!-- Jellyfish tentacles -->
<path d="M100 120 Q80 140 60 160" stroke="#68b8b7" stroke-width="2" fill="none" />
<path d="M100 120 Q120 140 140 160" stroke="#68b8b7" stroke-width="2" fill="none" />
<path d="M100 120 Q105 160 110 200" stroke="#68b8b7" stroke-width="2" fill="none" />
<!-- Jellyfish head -->
<circle cx="100" cy="100" r="15" fill="#94e7e6" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background gradient -->
<defs>
<radialGradient id="nightSky" cx="50%" cy="0%" r="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#0a0033" />
<stop offset="100%" stop-color="#000011" />
</radialGradient>
<!-- Jellyfish glow -->
<radialGradient id="jellyfishGlow" cx="50%" cy="40%" r="60%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#8a5eff" stop-opacity="0.3" />
<stop offset="100%" stop-color="#5e00ff" stop-opacity="0" />
</radialGradient>
<!-- Galaxy patterns -->
<radialGradient id="galaxy1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff9ef8" />
<stop offset="40%" stop-color="#ff5ef7" />
<stop offset="100%" stop-color="#b806a6" />
</radialGradient>
<radialGradient id="galaxy2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#5effff" />
<stop offset="40%" stop-color="#00ccff" />
<stop offset="100%" stop-color="#0066ff" />
</radialGradient>
<radialGradient id="galaxy3" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffff7a" />
<stop offset="40%" stop-color="#ffc847" />
<stop offset="100%" stop-color="#ff7b00" />
</radialGradient>
<!-- Moon glow -->
<radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.7" />
<stop offset="20%" stop-color="#fffce6" stop-opacity="0.5" />
<stop offset="100%" stop-color="#fffce6" stop-opacity="0" />
</radialGradient>
<!-- Jellyfish tentacles -->
<linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#c9aeff" />
<stop offset="100%" stop-color="#8a5eff" stop-opacity="0.2" />
</linearGradient>
<!-- Define stars pattern -->
<pattern id="stars" width="100" height="100" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="0.8" fill="white" opacity="0.8" />
<circle cx="20" cy="25" r="0.5" fill="white" opacity="0.6" />
<circle cx="40" cy="15" r="1" fill="white" opacity="0.7" />
<circle cx="30" cy="35" r="0.4" fill="white" opacity="0.8" />
<circle cx="60" cy="55" r="0.6" fill="white" opacity="0.6" />
<circle cx="75" cy="80" r="1.2" fill="white" opacity="0.8" />
<circle cx="85" cy="15" r="0.7" fill="white" opacity="0.7" />
<circle cx="90" cy="45" r="0.5" fill="white" opacity="0.8" />
<circle cx="50" cy="90" r="0.9" fill="white" opacity="0.6" />
</pattern>
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<filter id="galaxyBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
<!-- Night sky background -->
<rect width="300" height="300" fill="url(#nightSky)" />
<rect width="300" height="300" fill="url(#stars)" />
<!-- Moon -->
<circle cx="250" cy="50" r="30" fill="#fffce6" />
<circle cx="250" cy="50" r="60" fill="url(#moonGlow)" />
<!-- Moon craters -->
<circle cx="240" cy="40" r="5" fill="#e6e0c9" />
<circle cx="260" cy="55" r="7" fill="#e6e0c9" />
<circle cx="235" cy="60" r="4" fill="#e6e0c9" />
<!-- Jellyfish body glow -->
<circle cx="150" cy="150" r="90" fill="url(#jellyfishGlow)" />
<!-- Jellyfish dome -->
<ellipse cx="150" cy="150" rx="40" ry="30" fill="#b99aff" opacity="0.9" />
<ellipse cx="150" cy="150" rx="35" ry="25" fill="#c9aeff" opacity="0.7" />
<!-- Jellyfish inner glow -->
<circle cx="150" cy="150" r="20" fill="#e6ddff" opacity="0.6" />
<circle cx="150" cy="150" r="15" fill="#ffffff" opacity="0.5" />
<!-- Tentacles -->
<g id="tentacles">
<!-- Curved tentacles -->
<path d="M130,175 Q120,220 110,250" stroke="url(#tentacleGradient)" stroke-width="2" fill="none" opacity="0.8" />
<path d="M135,175 Q135,240 120,270" stroke="url(#tentacleGradient)" stroke-width="3" fill="none" opacity="0.8" />
<path d="M145,175 Q155,230 150,260" stroke="url(#tentacleGradient)" stroke-width="2" fill="none" opacity="0.8" />
<path d="M155,175 Q175,210 190,240" stroke="url(#tentacleGradient)" stroke-width="2.5" fill="none" opacity="0.8" />
<path d="M165,175 Q190,200 200,220" stroke="url(#tentacleGradient)" stroke-width="2" fill="none" opacity="0.8" />
<!-- Wavy tentacle variations -->
<path d="M125,175 C115,190 135,205 125,220 C115,235 135,250 125,270" stroke="url(#tentacleGradient)" stroke-width="2" fill="none" opacity="0.6" />
<path d="M140,175 C130,195 150,215 140,235 C130,255 150,275 140,290" stroke="url(#tentacleGradient)" stroke-width="1.5" fill="none" opacity="0.7" />
<path d="M160,175 C170,195 150,215 160,235 C170,255 150,270 160,290" stroke="url(#tentacleGradient)" stroke-width="1.5" fill="none" opacity="0.7" />
<path d="M175,175 C185,195 165,210 175,225 C185,240 165,255 175,270" stroke="url(#tentacleGradient)" stroke-width="2" fill="none" opacity="0.6" />
</g>
<!-- Galaxies being juggled -->
<g id="juggled-galaxies" filter="url(#galaxyBlur)">
<!-- Galaxy 1 (top) -->
<g transform="translate(100, 70) rotate(-15)">
<ellipse cx="0" cy="0" rx="18" ry="12" fill="url(#galaxy1)" opacity="0.9" />
<ellipse cx="0" cy="0" rx="25" ry="5" fill="url(#galaxy1)" opacity="0.5" transform="rotate(20)" />
<circle cx="0" cy="0" r="5" fill="#ffffff" opacity="0.7" />
</g>
<!-- Galaxy 2 (right) -->
<g transform="translate(220, 140) rotate(30)">
<ellipse cx="0" cy="0" rx="15" ry="10" fill="url(#galaxy2)" opacity="0.9" />
<ellipse cx="0" cy="0" rx="22" ry="4" fill="url(#galaxy2)" opacity="0.5" transform="rotate(-10)" />
<circle cx="0" cy="0" r="4" fill="#ffffff" opacity="0.7" />
</g>
<!-- Galaxy 3 (left) -->
<g transform="translate(60, 150) rotate(-20)">
<ellipse cx="0" cy="0" rx="16" ry="12" fill="url(#galaxy3)" opacity="0.9" />
<ellipse cx="0" cy="0" rx="24" ry="5" fill="url(#galaxy3)" opacity="0.5" transform="rotate(15)" />
<circle cx="0" cy="0" r="5" fill="#ffffff" opacity="0.7" />
</g>
</g>
<!-- Motion trails for galaxies -->
<path d="M100,70 Q130,40 150,90 Q170,140 220,140" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3" />
<path d="M220,140 Q190,180 150,150 Q110,120 60,150" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3" />
<path d="M60,150 Q90,110 120,120 Q150,130 100,70" stroke="#ffffff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="2,3" />
<!-- Small sparkles around galaxies -->
<g id="sparkles">
<circle cx="95" cy="65" r="1" fill="white" />
<circle cx="105" cy="75" r="1.2" fill="white" />
<circle cx="90" cy="72" r="0.8" fill="white" />
<circle cx="215" cy="135" r="1" fill="white" />
<circle cx="225" cy="145" r="1.2" fill="white" />
<circle cx="210" cy="142" r="0.8" fill="white" />
<circle cx="55" cy="145" r="1" fill="white" />
<circle cx="65" cy="155" r="1.2" fill="white" />
<circle cx="50" cy="152" r="0.8" fill="white" />
</g>
<!-- Additional starlight effects -->
<g id="highlights" filter="url(#blur)">
<circle cx="50" cy="50" r="1.5" fill="white" />
<circle cx="80" cy="30" r="2" fill="white" />
<circle cx="200" cy="250" r="1.5" fill="white" />
<circle cx="250" cy="200" r="2" fill="white" />
<circle cx="150" cy="280" r="1.5" fill="white" />
</g>
</svg>Judge's Analysis
Player 2's submission effectively captures the whimsical concept of a jellyfish juggling galaxies under moonlight.
The inclusion of a moon and colorful galaxies enhances the visual appeal and adheres closely to the prompt.
Meanwhile, Player 1's image lacks clarity in representing the theme and appears more abstract, reducing its impact.
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
"Floating umbrella cityscape"
"A giraffe in a spacesuit floating through a vibrant nebula"
"Iridescent squid playing chess on a floating lily pad"
"Juggling octopus balancing on a unicycle"
"Rainbow-eating cat beneath a swirling starry sky"
"Melting clock face dripping off a cactus"
