Creative Challenge
"A neon penguin surfing a rainbow wave"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Rainbow wave gradient -->
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000" />
<stop offset="16.67%" stop-color="#ff9900" />
<stop offset="33.33%" stop-color="#ffff00" />
<stop offset="50%" stop-color="#00ff00" />
<stop offset="66.67%" stop-color="#0099ff" />
<stop offset="83.33%" stop-color="#6633ff" />
<stop offset="100%" stop-color="#ff00ff" />
</linearGradient>
<!-- Neon glow filter -->
<filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feFlood flood-color="#00ffff" flood-opacity="0.7" result="glow" />
<feComposite in="glow" in2="blur" operator="in" result="coloredBlur" />
<feComponentTransfer in="coloredBlur" result="brighterBlur">
<feFuncA type="linear" slope="2.5" intercept="0" />
</feComponentTransfer>
<feMerge>
<feMergeNode in="brighterBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- Water sparkle pattern -->
<pattern id="sparklePattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="1" fill="#ffffff" opacity="0.8" />
<circle cx="5" cy="5" r="0.5" fill="#ffffff" opacity="0.6" />
<circle cx="15" cy="15" r="0.7" fill="#ffffff" opacity="0.7" />
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#191970" />
<!-- Stars -->
<g>
<circle cx="30" cy="40" r="1" fill="white" opacity="0.8" />
<circle cx="60" cy="25" r="1.2" fill="white" opacity="0.7" />
<circle cx="90" cy="50" r="0.8" fill="white" opacity="0.9" />
<circle cx="150" cy="30" r="1.5" fill="white" opacity="0.8" />
<circle cx="200" cy="40" r="1" fill="white" opacity="0.7" />
<circle cx="250" cy="60" r="1.2" fill="white" opacity="0.9" />
<circle cx="280" cy="30" r="0.9" fill="white" opacity="0.8" />
</g>
<!-- Rainbow wave -->
<path d="M-20,180 C40,150 80,200 120,170 C160,140 200,190 240,160 C280,130 320,180 360,150 L360,300 L-20,300 Z" fill="url(#rainbowGradient)" />
<!-- Wave sparkles -->
<path d="M-20,180 C40,150 80,200 120,170 C160,140 200,190 240,160 C280,130 320,180 360,150 L360,300 L-20,300 Z" fill="url(#sparklePattern)" opacity="0.3" />
<!-- Surfboard -->
<ellipse cx="150" cy="169" rx="40" ry="10" fill="#ff5599" stroke="#ff00cc" stroke-width="2" filter="url(#neonGlow)" />
<!-- Neon Penguin -->
<g filter="url(#neonGlow)">
<!-- Body -->
<ellipse cx="150" cy="145" rx="22" ry="30" fill="#000000" stroke="#00ffff" stroke-width="2" />
<!-- White belly -->
<ellipse cx="150" cy="145" rx="15" ry="25" fill="#ffffff" stroke="#00ffff" stroke-width="0.5" />
<!-- Head -->
<circle cx="150" cy="110" r="18" fill="#000000" stroke="#00ffff" stroke-width="2" />
<!-- Eyes -->
<circle cx="143" cy="105" r="3" fill="#ffffff" />
<circle cx="157" cy="105" r="3" fill="#ffffff" />
<circle cx="143" cy="105" r="1.5" fill="#000000" />
<circle cx="157" cy="105" r="1.5" fill="#000000" />
<!-- Beak -->
<path d="M145,115 L155,115 L150,125 Z" fill="#ff9900" stroke="#ffff00" stroke-width="1" />
<!-- Wings -->
<path d="M128,135 Q120,155 130,170" fill="none" stroke="#00ffff" stroke-width="2" />
<path d="M172,135 Q180,155 170,170" fill="none" stroke="#00ffff" stroke-width="2" />
<!-- Feet -->
<path d="M140,175 L130,185 Q140,190 145,185" fill="#ff9900" stroke="#ffff00" stroke-width="1" />
<path d="M160,175 L170,185 Q160,190 155,185" fill="#ff9900" stroke="#ffff00" stroke-width="1" />
<!-- Sunglasses -->
<path d="M136,100 L150,100 L164,100" fill="none" stroke="#ff00ff" stroke-width="2" />
<path d="M136,100 Q130,105 136,110 Q142,105 136,100" fill="#ff00ff" stroke="#ff00ff" stroke-width="1" />
<path d="M164,100 Q170,105 164,110 Q158,105 164,100" fill="#ff00ff" stroke="#ff00ff" stroke-width="1" />
</g>
<!-- Motion lines -->
<path d="M205,165 L220,165 M210,155 L225,155 M215,175 L230,175" stroke="#ffffff" stroke-width="2" stroke-dasharray="3,3" />
<!-- Water splashes -->
<g opacity="0.8">
<path d="M110,175 Q115,165 120,175 Q125,165 130,175" fill="none" stroke="#ffffff" stroke-width="1.5" />
<path d="M170,180 Q175,170 180,180 Q185,170 190,180" fill="none" stroke="#ffffff" stroke-width="1.5" />
<path d="M130,195 Q135,185 140,195 Q145,185 150,195" fill="none" stroke="#ffffff" stroke-width="1.5" />
</g>
<!-- Glow effect for wave crest -->
<path d="M-20,180 C40,150 80,200 120,170 C160,140 200,190 240,160 C280,130 320,180 360,150" fill="none" stroke="#ffffff" stroke-width="3" stroke-opacity="0.6" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="waveGradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0)" />
<stop offset="20%" style="stop-color:rgb(255,165,0)" />
<stop offset="40%" style="stop-color:rgb(255,255,0)" />
<stop offset="60%" style="stop-color:rgb(0,255,0)" />
<stop offset="80%" style="stop-color:rgb(0,0,255)" />
<stop offset="100%" style="stop-color:rgb(75,0,130)" />
</linearGradient>
<radialGradient id="penguinGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(0,0,0,0.8)" />
<stop offset="100%" style="stop-color:rgb(255,255,255,0.2)" />
</radialGradient>
<pattern id="neonPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="3" fill="lime" />
</pattern>
</defs>
<rect width="300" height="300" fill="#000033"/>
<path d="M50,250 C100,200 200,200 250,250 L250,300 L50,300 Z" fill="url(#waveGradient)" />
<g transform="translate(150,150) scale(0.75)">
<path d="M-50,30 C-40,10 40,10 50,30 C35,20 40,-30 -40,-30 C-50,-10 -55,0 -50,30 Z" fill="url(#penguinGradient)"/>
<ellipse cx="-20" cy="-10" rx="6" ry="8" fill="white" />
<ellipse cx="20" cy="-10" rx="6" ry="8" fill="white" />
<circle cx="-20" cy="-10" r="3" fill="black" />
<circle cx="20" cy="-10" r="3" fill="black" />
<polygon points="-10,20 10,20 0,30" fill="orange" />
<path d="M-40,30 L-30,40 L-30,50 L-40,45 Z" fill="url(#neonPattern)"/>
<path d="M40,30 L30,40 L30,50 L40,45 Z" fill="url(#neonPattern)"/>
<path d="M-15,60 L15,60 L0,75 Z" fill="orange"/>
</g>
</svg>Judge's Analysis
Player 1's image captures the theme more effectively with a vibrant neon penguin and a well-defined, colorful rainbow wave.
The use of neon glow enhances the visual appeal and creativity, while the composition clearly illustrates the penguin surfing.
In contrast, Player 2's image lacks clarity in depicting a surfing action and the neon aspect is less pronounced, reducing its adherence to 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
"Cactus wearing sunglasses and a sombrero in a desert sunset"
"A tree with roots as legs dancing in a grassy meadow"
"Astronaut disco dancing with a robot on the moon"
"An ice cream cone floating in space with rings like Saturn"
"An octopus playing a grand piano in a moonlit ocean concert"
"Surreal fruit sailing a sea of chocolate milk under a checkerboard sky"
