Creative Challenge
"Alien juggling planets under a neon galaxy sky."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for gradients, patterns and filters -->
<defs>
<!-- Cosmic background gradient -->
<radialGradient id="galaxyBackground" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#0c0240" />
<stop offset="50%" stop-color="#1e0060" />
<stop offset="100%" stop-color="#000020" />
</radialGradient>
<!-- Neon glow filters -->
<filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feFlood flood-color="#ff00ff" flood-opacity="0.7" result="glowColor" />
<feComposite in="glowColor" in2="blur" operator="in" result="softGlow" />
<feComposite in="softGlow" in2="SourceGraphic" operator="over" />
</filter>
<filter id="cyanGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feFlood flood-color="#00ffff" flood-opacity="0.7" result="glowColor" />
<feComposite in="glowColor" in2="blur" operator="in" result="softGlow" />
<feComposite in="softGlow" in2="SourceGraphic" operator="over" />
</filter>
<!-- Planet textures -->
<radialGradient id="planet1Gradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#ff7700" />
<stop offset="90%" stop-color="#993300" />
</radialGradient>
<radialGradient id="planet2Gradient" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#00ddff" />
<stop offset="80%" stop-color="#0044aa" />
</radialGradient>
<radialGradient id="planet3Gradient" cx="50%" cy="30%" r="70%">
<stop offset="0%" stop-color="#aaff00" />
<stop offset="90%" stop-color="#449900" />
</radialGradient>
<!-- Alien skin gradient -->
<linearGradient id="alienSkin" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#99ff66" />
<stop offset="100%" stop-color="#33cc33" />
</linearGradient>
<!-- Star pattern -->
<pattern id="starPattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="0.5" fill="white" />
<circle cx="20" cy="30" r="0.7" fill="white" />
<circle cx="30" cy="15" r="0.4" fill="white" />
<circle cx="40" cy="40" r="0.6" fill="white" />
<circle cx="25" cy="5" r="0.3" fill="white" />
<circle cx="15" cy="25" r="0.8" fill="white" />
<circle cx="5" cy="35" r="0.5" fill="white" />
<circle cx="35" cy="45" r="0.4" fill="white" />
</pattern>
<!-- Nebula effect -->
<filter id="nebulaEffect">
<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" seed="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 1 0 0 0 0.7 0" />
<feGaussianBlur stdDeviation="5" />
</filter>
<!-- Planet rings gradient -->
<linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffcc00" stop-opacity="0.6" />
<stop offset="50%" stop-color="#ff9900" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ffcc00" stop-opacity="0.6" />
</linearGradient>
<!-- Alien eye glow -->
<radialGradient id="eyeGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="20%" stop-color="#ff00ff" />
<stop offset="100%" stop-color="#aa00aa" />
</radialGradient>
<!-- UFO gradient -->
<linearGradient id="ufoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#cccccc" />
<stop offset="100%" stop-color="#777777" />
</linearGradient>
<!-- Cosmic dust particles -->
<filter id="cosmicDust">
<feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" seed="5" />
<feDisplacementMap in="SourceGraphic" scale="5" />
</filter>
<!-- Twinkling star filter -->
<filter id="twinkleFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
<!-- Galaxy background -->
<rect x="0" y="0" width="300" height="300" fill="url(#galaxyBackground)" />
<!-- Stars in the background -->
<rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" />
<!-- Cosmic dust particles -->
<rect x="0" y="0" width="300" height="300" fill="#ffffff" opacity="0.05" filter="url(#cosmicDust)" />
<!-- Nebula clouds -->
<ellipse cx="150" cy="80" rx="200" ry="70" fill="#5000aa" opacity="0.3" filter="url(#nebulaEffect)" />
<ellipse cx="100" cy="200" rx="150" ry="50" fill="#aa0077" opacity="0.2" filter="url(#nebulaEffect)" />
<ellipse cx="200" cy="150" rx="100" ry="60" fill="#0077aa" opacity="0.2" filter="url(#nebulaEffect)" />
<!-- Distant planets -->
<circle cx="40" cy="40" r="15" fill="#ffaa00" opacity="0.7" />
<circle cx="260" cy="70" r="10" fill="#00ffcc" opacity="0.7" />
<circle cx="280" cy="230" r="12" fill="#ff44aa" opacity="0.5" />
<!-- Flying UFOs in background -->
<g transform="translate(220,50) rotate(15)">
<ellipse cx="0" cy="0" rx="10" ry="3" fill="url(#ufoGradient)" />
<circle cx="0" cy="-1" r="4" fill="#aaccff" opacity="0.7" />
<circle cx="0" cy="0" r="1" fill="#00ffff" filter="url(#cyanGlow)" />
</g>
<g transform="translate(60,170) rotate(-10)">
<ellipse cx="0" cy="0" rx="7" ry="2" fill="url(#ufoGradient)" />
<circle cx="0" cy="-1" r="3" fill="#aaccff" opacity="0.7" />
<circle cx="0" cy="0" r="0.8" fill="#00ffff" filter="url(#cyanGlow)" />
</g>
<!-- Juggling planets -->
<!-- Planet 1 (with ring) -->
<g>
<ellipse cx="80" cy="120" rx="30" ry="5" fill="url(#ringGradient)" transform="rotate(-20 80 120)" />
<circle cx="80" cy="120" r="15" fill="url(#planet1Gradient)" />
<path d="M72,112 Q80,105 88,112" stroke="#ffaa33" stroke-width="1" fill="none" />
<circle cx="75" cy="115" r="3" fill="#ff5500" opacity="0.7" />
<circle cx="85" cy="125" r="4" fill="#ff5500" opacity="0.6" />
<!-- Volcano -->
<circle cx="78" cy="112" r="2" fill="#ff3300" />
<circle cx="78" cy="112" r="1" fill="#ffcc00" />
</g>
<!-- Planet 2 (ice/water planet) -->
<g>
<circle cx="150" cy="90" r="20" fill="url(#planet2Gradient)" />
<!-- Ice caps -->
<path d="M140,73 Q150,70 160,73 Q157,80 143,80 Z" fill="white" opacity="0.8" />
<path d="M140,107 Q150,110 160,107 Q157,100 143,100 Z" fill="white" opacity="0.8" />
<!-- Cloud patterns -->
<path d="M135,85 Q145,88 155,85" stroke="white" stroke-width="1" opacity="0.6" fill="none" />
<path d="M140,95 Q150,92 160,95" stroke="white" stroke-width="1" opacity="0.6" fill="none" />
<!-- Water movement -->
<path d="M145,90 Q150,93 155,90" stroke="#aaeeff" stroke-width="0.5" opacity="0.7" fill="none" />
<path d="M148,85 Q150,82 152,85" stroke="#aaeeff" stroke-width="0.5" opacity="0.7" fill="none" />
</g>
<!-- Planet 3 (forest/green planet) -->
<g>
<circle cx="220" cy="120" r="18" fill="url(#planet3Gradient)" />
<!-- Land masses -->
<path d="M210,110 Q220,105 230,110 Q235,120 225,125 Q215,122 210,110 Z" fill="#77aa00" />
<path d="M205,120 Q215,125 225,123 Q230,130 220,135 Q208,132 205,120 Z" fill="#77aa00" />
<!-- Little forest dots -->
<circle cx="215" cy="112" r="1" fill="#006600" />
<circle cx="222" cy="109" r="1" fill="#006600" />
<circle cx="229" cy="114" r="1" fill="#006600" />
<circle cx="225" cy="127" r="1" fill="#006600" />
<circle cx="211" cy="130" r="1" fill="#006600" />
<circle cx="217" cy="120" r="1.2" fill="#006600" />
<circle cx="228" cy="122" r="1" fill="#006600" />
<!-- Rivers -->
<path d="M214,118 Q218,122 216,128" stroke="#0099ff" stroke-width="0.5" opacity="0.8" fill="none" />
</g>
<!-- Motion lines to indicate juggling -->
<path d="M100,150 Q130,120 160,150 Q190,180 220,150" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.6" />
<path d="M220,150 Q190,120 160,150 Q130,180 100,150" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.6" />
<!-- Neon stream trails behind planets -->
<path d="M80,120 Q70,130 65,150" stroke="#ff9900" stroke-width="1" stroke-dasharray="1,2" fill="none" opacity="0.6" filter="url(#neonGlow)" />
<path d="M150,90 Q155,110 160,140" stroke="#00ffff" stroke-width="1" stroke-dasharray="1,2" fill="none" opacity="0.6" filter="url(#cyanGlow)" />
<path d="M220,120 Q225,130 230,150" stroke="#aaff00" stroke-width="1" stroke-dasharray="1,2" fill="none" opacity="0.6" filter="url(#neonGlow)" />
<!-- Alien body -->
<g id="alien">
<!-- Alien head -->
<ellipse cx="150" cy="200" rx="25" ry="30" fill="url(#alienSkin)" />
<!-- Alien eyes -->
<ellipse cx="140" cy="190" rx="7" ry="10" fill="black" />
<ellipse cx="160" cy="190" rx="7" ry="10" fill="black" />
<circle cx="140" cy="188" r="3" fill="url(#eyeGlow)" filter="url(#neonGlow)" />
<circle cx="160" cy="188" r="3" fill="url(#eyeGlow)" filter="url(#neonGlow)" />
<!-- Alien antennae -->
<path d="M140,175 Q130,160 135,145" stroke="#33cc33" stroke-width="2" fill="none" />
<path d="M160,175 Q170,160 165,145" stroke="#33cc33" stroke-width="2" fill="none" />
<circle cx="135" cy="145" r="3" fill="#ff00ff" filter="url(#neonGlow)" />
<circle cx="165" cy="145" r="3" fill="#ff00ff" filter="url(#neonGlow)" />
<!-- Alien mouth -->
<path d="M140,210 Q150,215 160,210" stroke="#196619" stroke-width="2" fill="none" />
<!-- Alien freckles/spots -->
<circle cx="135" cy="200" r="1" fill="#196619" />
<circle cx="165" cy="200" r="1" fill="#196619" />
<circle cx="145" cy="197" r="0.8" fill="#196619" />
<!-- Alien body (just the top showing) -->
<path d="M130,230 Q150,235 170,230 V240 H130 Z" fill="url(#alienSkin)" />
<!-- Alien neck lines -->
<path d="M140,230 V225" stroke="#196619" stroke-width="1" fill="none" />
<path d="M150,232 V227" stroke="#196619" stroke-width="1" fill="none" />
<path d="M160,230 V225" stroke="#196619" stroke-width="1" fill="none" />
<!-- Alien arms juggling -->
<path d="M130,235 Q110,220 100,200" stroke="#33cc33" stroke-width="3" fill="none" />
<path d="M170,235 Q190,220 200,200" stroke="#33cc33" stroke-width="3" fill="none" />
<path d="M100,200 Q90,180 110,170" stroke="#33cc33" stroke-width="3" fill="none" />
<path d="M200,200 Q210,180 190,170" stroke="#33cc33" stroke-width="3" fill="none" />
<!-- Alien hands -->
<circle cx="110" cy="170" r="5" fill="#99ff66" />
<circle cx="190" cy="170" r="5" fill="#99ff66" />
<!-- Alien finger details -->
<path d="M107,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
<path d="M110,166 V161" stroke="#33cc33" stroke-width="1" fill="none" />
<path d="M113,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
<path d="M187,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
<path d="M190,166 V161" stroke="#33cc33" stroke-width="1" fill="none" />
<path d="M193,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
</g>
<!-- Additional stars and cosmic effects with twinkle filter on some -->
<circle cx="50" cy="50" r="1" fill="white" filter="url(#twinkleFilter)" />
<circle cx="70" cy="60" r="0.5" fill="white" />
<circle cx="200" cy="40" r="1" fill="white" filter="url(#twinkleFilter)" />
<circle cx="240" cy="60" r="0.7" fill="white" />
<circle cx="260" cy="180" r="0.8" fill="white" filter="url(#twinkleFilter)" />
<circle cx="180" cy="230" r="0.6" fill="white" />
<circle cx="90" cy="250" r="0.7" fill="white" filter="url(#twinkleFilter)" />
<circle cx="30" cy="200" r="0.9" fill="white" />
<!-- Some brighter stars -->
<circle cx="25" cy="75" r="1.2" fill="white" filter="url(#twinkleFilter)" />
<circle cx="270" cy="120" r="1.3" fill="white" filter="url(#twinkleFilter)" />
<circle cx="120" cy="30" r="1.4" fill="white" filter="url(#twinkleFilter)" />
<!-- Shooting stars -->
<path d="M30,30 L40,40" stroke="white" stroke-width="1" />
<path d="M260,240 L250,230" stroke="white" stroke-width="1" />
<path d="M190,20 L200,35" stroke="white" stroke-width="1.5" opacity="0.8" />
<!-- Neon glow effects around the scene -->
<path d="M20,100 Q60,60 100,80 Q150,100 200,80 Q250,60 280,100"
stroke="#ff00ff" stroke-width="1" fill="none" filter="url(#neonGlow)" opacity="0.4" />
<path d="M20,200 Q60,240 100,220 Q150,200 200,220 Q250,240 280,200"
stroke="#00ffff" stroke-width="1" fill="none" filter="url(#cyanGlow)" opacity="0.4" />
<!-- Additional circular neon elements -->
<circle cx="180" cy="40" r="15" stroke="#ff00ff" stroke-width="1" fill="none" filter="url(#neonGlow)" opacity="0.3" />
<circle cx="70" cy="220" r="20" stroke="#00ffff" stroke-width="1" fill="none" filter="url(#cyanGlow)" opacity="0.3" />
<!-- Extra cosmic ray -->
<path d="M0,130 L300,200" stroke="#ffffff" stroke-width="0.5" opacity="0.3" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="galaxy" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#0b0b2a"/>
<stop offset="100%" stop-color="#2a0845"/>
</radialGradient>
<linearGradient id="planet1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff6b6b"/>
<stop offset="100%" stop-color="#ff0b76"/>
</linearGradient>
<linearGradient id="planet2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4ecdc4"/>
<stop offset="100%" stop-color="#45b649"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<clipPath id="ringClip">
<circle cx="0" cy="0" r="22" fill="none"/>
</clipPath>
</defs>
<rect width="300" height="300" fill="url(#galaxy)"/>
<!-- Stars -->
<g opacity="0.8">
<circle cx="50" cy="80" r="1.2" fill="#fff" filter="url(#glow)"/>
<circle cx="250" cy="40" r="1.5" fill="#7fffd4"/>
<circle cx="180" cy="150" r="1" fill="#ff69b4"/>
<circle cx="90" cy="260" r="1.2" fill="#fff"/>
</g>
<!-- Alien -->
<g transform="translate(150 190)">
<path d="M0 0Q-20 30 0 60 20 30 0 0" fill="#7cfc94"/>
<ellipse cx="0" cy="-40" rx="30" ry="40" fill="#7cfc94"/>
<circle cx="-12" cy="-50" r="8" fill="#0b0b2a"/>
<circle cx="12" cy="-50" r="8" fill="#0b0b2a"/>
<path d="M-30 -20L-40 10 30 -20 40 10" stroke="#7cfc94" stroke-width="4" fill="none"/>
<animateTransform
attributeName="transform"
type="translate"
values="150 190;150 185;150 190"
dur="1.5s"
repeatCount="indefinite"/>
</g>
<!-- Juggling Planets -->
<g transform="translate(150 150)">
<!-- Planet 1 -->
<g transform="rotate(-20)">
<circle cx="0" cy="-100" r="18" fill="url(#planet1)">
<animateMotion path="M0 0a20 20 0 1 1 0 1z" dur="4s" repeatCount="indefinite"/>
</circle>
<path d="M-25 -100a18 18 0 0 1 50 0" stroke="#fff3" stroke-width="3" fill="none"/>
</g>
<!-- Planet 2 -->
<g transform="rotate(40)">
<circle cx="0" cy="-100" r="15" fill="url(#planet2)">
<animateMotion path="M0 0a15 15 0 1 1 0 1z" dur="3.8s" repeatCount="indefinite"/>
</circle>
<rect x="-12" y="-115" width="24" height="5" rx="2" fill="#fff3" transform="rotate(30)"/>
</g>
<!-- Ringed Planet -->
<g transform="rotate(100)">
<circle cx="0" cy="-100" r="22" fill="#ffd700"/>
<g transform="rotate(15)" clip-path="url(#ringClip)">
<ellipse cx="0" cy="0" rx="30" ry="8" fill="#ffaa0077" transform="rotate(45)"/>
</g>
<animateMotion path="M0 0a25 25 0 1 1 0 1z" dur="4.2s" repeatCount="indefinite"/>
</g>
</g>
<!-- Energy Trails -->
<path d="M90 200q50-80 120 0" stroke="url(#planet1)" stroke-width="2" opacity="0.5" fill="none">
<animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" repeatCount="indefinite"/>
</path>
</svg>
Judge's Analysis
Player 1's submission is more detailed and adheres closely to the prompt with the inclusion of a vibrant alien, multiple planets, and a neon galaxy background.
The composition is dynamic, with clear juggling motion and a cohesive galactic setting.
Player 2's submission, while minimalistic and visually clean, lacks the complexity, context, and overall visual appeal needed to fully meet the prompt's requirements.
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 rocket shaped like a watermelon blasting off into a starry sky."
"A cat riding a unicycle on a tightrope under a starry sky."
"An octopus juggling planets under a starry sky."
"A lighthouse on a cliff under a swirling galaxy sky."