Creative Challenge
"A jellyfish wearing a top hat floating in a starry night sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="skyGrad" cx="50%" cy="40%" r="75%">
<stop offset="0%" stop-color="#22274A"/>
<stop offset="60%" stop-color="#23286B"/>
<stop offset="100%" stop-color="#141646"/>
</radialGradient>
<radialGradient id="jellyGlow" cx="50%" cy="65%" r="80%">
<stop offset="0%" stop-color="#ffecfb" stop-opacity="1"/>
<stop offset="40%" stop-color="#a6cafd" stop-opacity="0.8"/>
<stop offset="90%" stop-color="#202080" stop-opacity="0"/>
</radialGradient>
<radialGradient id="jellyCapGrad" cx="50%" cy="40%" r="80%">
<stop offset="0%" stop-color="#fafffb"/>
<stop offset="55%" stop-color="#6ee7ef"/>
<stop offset="100%" stop-color="#6797e6"/>
</radialGradient>
<radialGradient id="bellHighlight" cx="40%" cy="15%" r="70%">
<stop offset="0%" stop-color="#fffde4" stop-opacity="0.4"/>
<stop offset="70%" stop-color="#fffde4" stop-opacity="0"/>
</radialGradient>
<radialGradient id="tentacleGrad" cx="50%" cy="5%" r="70%">
<stop offset="0%" stop-color="#fafcff"/>
<stop offset="80%" stop-color="#96ebfc"/>
<stop offset="100%" stop-color="#f697fd"/>
</radialGradient>
<linearGradient id="hatGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#131313"/>
<stop offset="33%" stop-color="#303045"/>
<stop offset="100%" stop-color="#07091a"/>
</linearGradient>
</defs>
<!-- Starry sky background -->
<rect width="300" height="300" fill="url(#skyGrad)" />
<!-- Distant colored stars (meta-starry) -->
<g>
<circle cx="75" cy="45" r="2.8" fill="#ffd3da" opacity="0.7"/>
<circle cx="190" cy="38" r="3.2" fill="#94ecff" opacity="0.8"/>
<circle cx="250" cy="80" r="2.1" fill="#fffee0" opacity="0.8"/>
<circle cx="56" cy="129" r="2.6" fill="#ffe8ba" opacity="0.85"/>
<circle cx="220" cy="250" r="2.1" fill="#d3eaff" opacity="0.6"/>
<circle cx="155" cy="265" r="3.2" fill="#ffbae9" opacity="0.72"/>
<circle cx="218" cy="88" r="2.3" fill="#cceedc" opacity="0.75"/>
</g>
<!-- Main star field -->
<g>
<circle cx="18" cy="24" r="1" fill="#fff"/>
<circle cx="77" cy="65" r="1.1" fill="#fff"/>
<circle cx="245" cy="25" r="0.9" fill="#fff"/>
<circle cx="190" cy="58" r="1" fill="#fff"/>
<circle cx="222" cy="111" r="1.2" fill="#fff"/>
<circle cx="284" cy="169" r="0.9" fill="#fff"/>
<circle cx="280" cy="71" r="1.1" fill="#fff"/>
<circle cx="60" cy="190" r="0.7" fill="#fff"/>
<circle cx="110" cy="200" r="1.1" fill="#fff"/>
<circle cx="170" cy="268" r="1.3" fill="#fff"/>
<circle cx="67" cy="268" r="1" fill="#fff"/>
<circle cx="165" cy="99" r="1.2" fill="#fff"/>
<circle cx="140" cy="30" r="0.7" fill="#fff"/>
<circle cx="44" cy="70" r="0.6" fill="#fff"/>
<circle cx="261" cy="243" r="1.1" fill="#fff"/>
<circle cx="35" cy="250" r="1.3" fill="#fff"/>
<circle cx="213" cy="212" r="0.8" fill="#fff"/>
<circle cx="285" cy="48" r="1.5" fill="#fff"/>
<circle cx="83" cy="170" r="0.8" fill="#fff"/>
<circle cx="120" cy="250" r="1.2" fill="#fff"/>
<circle cx="160" cy="210" r="1" fill="#fff"/>
<circle cx="252" cy="192" r="1.2" fill="#fff"/>
<circle cx="140" cy="139" r="1" fill="#fff"/>
<circle cx="245" cy="132" r="0.7" fill="#fff"/>
<circle cx="29" cy="101" r="1.1" fill="#fff"/>
</g>
<!-- Jellyfish Glow Halo -->
<ellipse cx="150" cy="140" rx="70" ry="45" fill="url(#jellyGlow)" opacity="0.55"/>
<!-- Jellyfish body (bell) -->
<g>
<ellipse cx="150" cy="121" rx="54" ry="35" fill="url(#jellyCapGrad)" />
<!-- Bell Shine -->
<ellipse cx="139" cy="109" rx="22" ry="9" fill="url(#bellHighlight)" opacity="0.57"/>
<!-- Body edge highlight -->
<path d="M96 125 Q150 150, 204 124 Q203 141 150 156 Q97 142 96 125z"
fill="#eaf6ff" opacity="0.13"/>
<!-- Lower rim (rim bumps) -->
<path d="M99 142 Q108 156 115 141 Q122 146 126 140 Q136 150 140 141 Q146 152 151 141 Q157 152 161 141 Q167 146 172 139 Q178 150 183 140 Q191 155 201 141"
stroke="#75d4f7" stroke-width="2.4" fill="none" opacity="0.7"/>
</g>
<!-- Jellyfish Tentacles (some overlapping, some wavy, layer with glow) -->
<g>
<path d="M110 144 Q87 200 120 243" stroke="url(#tentacleGrad)" stroke-width="4" fill="none" opacity="0.85" filter="url(#glow1)"/>
<path d="M120 147 Q98 210 135 252" stroke="url(#tentacleGrad)" stroke-width="2.9" fill="none" opacity="0.75"/>
<path d="M133 147 Q128 180 120 260" stroke="url(#tentacleGrad)" stroke-width="3.15" fill="none" opacity="0.78"/>
<path d="M141 144 Q148 180 133 255" stroke="url(#tentacleGrad)" stroke-width="2.7" fill="none" opacity="0.84"/>
<path d="M150 148 Q170 190 170 250" stroke="url(#tentacleGrad)" stroke-width="3.4" fill="none" opacity="0.78"/>
<path d="M159 147 Q180 210 142 260" stroke="url(#tentacleGrad)" stroke-width="2.5" fill="none" opacity="0.73"/>
<path d="M170 141 Q170 186 190 255" stroke="url(#tentacleGrad)" stroke-width="3.2" fill="none" opacity="0.85"/>
<path d="M182 137 Q200 175 200 245" stroke="url(#tentacleGrad)" stroke-width="2.2" fill="none" opacity="0.7"/>
<!-- Slight neon tentacle for cosmic effect -->
<path d="M125 146 Q114 197 105 255" stroke="#ae7fff" stroke-width="1.7" fill="none" opacity="0.48"/>
<path d="M160 148 Q182 160 181 200 Q181 250 215 260" stroke="#ffbdfd" stroke-width="1.2" fill="none" opacity="0.48"/>
<!-- Tentacle glow (soft) -->
<filter id="glow1">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</g>
<!-- Jellyfish simple face for expression -->
<g>
<ellipse cx="133" cy="128" rx="3.2" ry="3.3" fill="#fff" opacity="0.5"/>
<ellipse cx="167" cy="128" rx="3.2" ry="3.3" fill="#fff" opacity="0.5"/>
<ellipse cx="133" cy="128" rx="1.3" ry="1.5" fill="#3750b4"/>
<ellipse cx="167" cy="128" rx="1.3" ry="1.5" fill="#3750b4"/>
<path d="M139 132 Q150 139 161 132" stroke="#5562d2" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.7"/>
<ellipse cx="135.3" cy="127.3" rx="0.36" ry="0.47" fill="#fff"/>
<ellipse cx="169.1" cy="127.1" rx="0.35" ry="0.47" fill="#fff"/>
</g>
<!-- Top Hat -->
<g>
<!-- Hat shadow under rim -->
<ellipse cx="150" cy="94" rx="28" ry="7.8" fill="#000" opacity="0.17"/>
<!-- Hat body -->
<rect x="123" y="60" width="54" height="34" rx="15" fill="url(#hatGrad)" />
<!-- Hat rim -->
<ellipse cx="150" cy="95" rx="31" ry="9.5" fill="url(#hatGrad)" />
<ellipse cx="150" cy="95" rx="31" ry="8.2" fill="#181b32" opacity="0.45"/>
<!-- Hat highlight -->
<ellipse cx="136" cy="68" rx="10" ry="3" fill="#5e7a86" opacity="0.22" />
<!-- Hat band -->
<rect x="123" y="89" width="54" height="7.7" rx="3.8" fill="#56d1f6"/>
<ellipse cx="150" cy="96.5" rx="27" ry="5" fill="#a3edef" opacity="0.32"/>
<!-- Top ellipse for 3Dness -->
<ellipse cx="150" cy="60" rx="16" ry="6" fill="#cbcbcb" opacity="0.09"/>
<ellipse cx="150" cy="60" rx="16" ry="6" fill="#fff" opacity="0.045"/>
</g>
<!-- Small stars: sparkle overlays -->
<g>
<g opacity="0.48">
<polygon points="50,60 52,63 55,61 52,64 54,67 51,65 48,67 50,64 47,61 50,63" fill="#fff2b1"/>
<polygon points="265,120 266,123 269,122 266,124 268,126 265,125 263,126 264,124 262,122 265,123" fill="#cff5fa"/>
<polygon points="200,45 201.2,47.3 204,47 201.8,48 202.5,49.8 200.4,48.5 198.6,49.7 199.2,47.8 197.1,47.2 199.5,47" fill="#ffb9fb"/>
</g>
<!-- Twinkling star -->
<g>
<line x1="90" y1="205" x2="93" y2="211" stroke="#fff" stroke-width="0.9" opacity="0.58"/>
<line x1="91.5" y1="208" x2="96.5" y2="208" stroke="#fff" stroke-width="0.7" opacity="0.55"/>
</g>
</g>
<!-- Whimsical shooting star -->
<g>
<path d="M70 65 Q80 73 108 78" stroke="#f5e5ff" stroke-width="2" fill="none" opacity="0.68"/>
<ellipse cx="111" cy="79" rx="2" ry="1.1" fill="#fff8f7" opacity="0.73"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="nightGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#1a1a40"/>
<stop offset="100%" stop-color="#000"/>
</radialGradient>
<radialGradient id="jellyGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FF99CC"/>
<stop offset="100%" stop-color="#800080"/>
</radialGradient>
<linearGradient id="hatGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#000"/>
</linearGradient>
</defs>
<!-- Starry Night Background -->
<rect width="300" height="300" fill="url(#nightGradient)"/>
<g id="stars">
<circle cx="20" cy="30" r="1.5" fill="#FFF" opacity="0.8"/>
<circle cx="50" cy="50" r="1" fill="#FFF" opacity="0.7"/>
<circle cx="80" cy="20" r="1.3" fill="#FFF" opacity="0.8"/>
<circle cx="110" cy="10" r="1.2" fill="#FFF" opacity="0.7"/>
<circle cx="150" cy="25" r="1.4" fill="#FFF" opacity="0.9"/>
<circle cx="200" cy="40" r="1.6" fill="#FFF" opacity="0.8"/>
<circle cx="240" cy="20" r="1.1" fill="#FFF" opacity="0.7"/>
<circle cx="270" cy="60" r="1.5" fill="#FFF" opacity="0.8"/>
<circle cx="290" cy="30" r="1" fill="#FFF" opacity="0.8"/>
<circle cx="250" cy="80" r="1.2" fill="#FFF" opacity="0.9"/>
<circle cx="100" cy="80" r="1.2" fill="#FFF" opacity="0.8"/>
<circle cx="150" cy="10" r="1" fill="#FFF" opacity="0.8"/>
<circle cx="230" cy="20" r="1.5" fill="#FFF" opacity="0.8"/>
</g>
<!-- Jellyfish Tentacles -->
<g id="tentacles">
<path d="M120,170 C115,195 110,220 120,245" stroke="#FF99CC" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M140,170 C135,195 130,220 140,245" stroke="#FF99CC" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M150,170 C145,195 145,220 150,245" stroke="#FF99CC" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M160,170 C155,195 150,220 160,245" stroke="#FF99CC" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M180,170 C175,195 170,220 180,245" stroke="#FF99CC" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<!-- Jellyfish Bell with Delicate Inner Lines -->
<g id="jellyfish">
<path d="M100,140 C100,100 200,100 200,140 C190,170 110,170 100,140 Z" fill="url(#jellyGradient)" stroke="#FFF" stroke-width="2"/>
<path d="M110,130 Q150,115 190,130" stroke="#FFF" stroke-width="1" fill="none" opacity="0.4"/>
<path d="M110,150 Q150,135 190,150" stroke="#FFF" stroke-width="1" fill="none" opacity="0.4"/>
</g>
<!-- Top Hat Perched on the Jellyfish -->
<g id="hat">
<rect x="130" y="70" width="40" height="40" fill="url(#hatGradient)" rx="4" ry="4"/>
<rect x="130" y="90" width="40" height="6" fill="#FFD700"/>
<ellipse cx="150" cy="110" rx="35" ry="7" fill="url(#hatGradient)"/>
</g>
</svg>Judge's Analysis
Player 1's submission demonstrates greater creativity and adherence to the prompt with a cute and whimsical jellyfish design that includes a vibrant, glowing top hat and a detailed starry background.
The technical execution and visual appeal are superior, with smooth gradients, expressive tentacles, and a polished composition.
In comparison, Player 2's submission is simpler and lacks the same level of detail or charm, making it less compelling 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
"An astronaut planting a flag on a melting moon made of ice cream."
"A tiny robot watering a giant flower sprouting from the top of a skyscraper."
