Creative Challenge
"A neon butterfly with circuit board wings in a digital garden"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient for the butterfly's neon body -->
<linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#39ff14;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00ffea;stop-opacity:1" />
</linearGradient>
<!-- Gradient for the circuit pattern on wings -->
<linearGradient id="wingCircuitGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ff0099;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4900ff;stop-opacity:1" />
</linearGradient>
<!-- Pattern simulating circuitry paths -->
<pattern id="circuitPattern" patternUnits="userSpaceOnUse" width="20" height="20">
<rect x="0" y="0" width="20" height="20" fill="none" stroke="url(#wingCircuitGrad)" stroke-width="0.5" />
<line x1="0" y1="10" x2="20" y2="10" stroke="url(#wingCircuitGrad)" stroke-width="1"/>
<line x1="10" y1="0" x2="10" y2="20" stroke="url(#wingCircuitGrad)" stroke-width="1"/>
<circle cx="10" cy="10" r="2" fill="url(#wingCircuitGrad)" />
</pattern>
<!-- Neon glow filter -->
<filter id="neonGlow">
<feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Digital garden background gradient -->
<radialGradient id="gardenGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" style="stop-color:#1a1a1a;stop-opacity:1" />
<stop offset="100%" style="stop-color:#050505;stop-opacity:1" />
</radialGradient>
</defs>
<!-- Background: Digital garden -->
<rect x="0" y="0" width="300" height="300" fill="url(#gardenGrad)" />
<!-- Some digital flora -->
<g id="digitalGarden">
<g fill="none" stroke="#33ff33" stroke-width="1.2" filter="url(#neonGlow)">
<line x1="20" y1="280" x2="20" y2="240" />
<line x1="20" y1="280" x2="30" y2="260" />
<line x1="20" y1="280" x2="10" y2="260" />
<line x1="280" y1="280" x2="280" y2="240" />
<line x1="280" y1="280" x2="290" y2="260" />
<line x1="280" y1="280" x2="270" y2="260" />
<line x1="150" y1="290" x2="150" y2="250" />
<line x1="150" y1="290" x2="165" y2="270" />
<line x1="150" y1="290" x2="135" y2="270" />
</g>
<g fill="url(#circuitPattern)" opacity="0.3">
<circle cx="50" cy="250" r="8" />
<circle cx="250" cy="250" r="8" />
<circle cx="150" cy="265" r="8" />
</g>
</g>
<!-- Butterfly -->
<g id="neonButterfly" filter="url(#neonGlow)">
<!-- Left wing -->
<path d="M150 150 C100 70, 20 100, 60 200 C80 230, 120 230, 150 200 Z" fill="url(#wingCircuitGrad)" stroke="#ffffff" stroke-width="0.5"/>
<rect x="60" y="120" width="50" height="80" fill="url(#circuitPattern)" opacity="0.6"/>
<!-- Right wing (mirroring left wing) -->
<path d="M150 150 C200 70, 280 100, 240 200 C220 230, 180 230, 150 200 Z" fill="url(#wingCircuitGrad)" stroke="#ffffff" stroke-width="0.5"/>
<rect x="190" y="120" width="50" height="80" fill="url(#circuitPattern)" opacity="0.6"/>
<!-- Body -->
<rect x="145" y="130" width="10" height="40" fill="url(#bodyGrad)" stroke="#ffffff" stroke-width="0.5"/>
<!-- Antennae -->
<path d="M150 130 C140 110, 135 100, 130 90" fill="none" stroke="#39ff14" stroke-width="1"/>
<path d="M150 130 C160 110, 165 100, 170 90" fill="none" stroke="#39ff14" stroke-width="1"/>
<circle cx="130" cy="90" r="2" fill="#39ff14"/>
<circle cx="170" cy="90" r="2" fill="#39ff14"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Digital Garden Background -->
<rect width="300" height="300" fill="url(#backgroundGradient)" />
<defs>
<linearGradient id="backgroundGradient" x1="0" y1="0" x2="300" y2="300">
<stop offset="0" stop-color="#4B0082" />
<stop offset="1" stop-color="#8A2BE2" />
</linearGradient>
<!-- Circuit Board Wing Pattern -->
<pattern id="circuitPattern" patternUnits="userSpaceOnUse" width="100" height="100">
<path stroke="#32CD32" stroke-width="2" fill="none" d="M0 0h100v100H0z"/>
<path stroke="#32CD32" stroke-width="1" fill="none" d="M10 10h80v80h-80z M10 20h80v60h-80z M10 30h80v40h-80z M20 10h60v80h-60z"/>
</pattern>
<!-- Neon Glow Effect -->
<filter id="neonGlow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Butterfly Body -->
<path filter="url(#neonGlow)" fill="url(#bodyGradient)" d="M150 140c0-20-10-35-30-40-10-5-20-5-30 0-10 5-10 15 0 15 5 10 15 10 20 0 5-10 5-15 0-20H150z"/>
<defs>
<linearGradient id="bodyGradient" x1="150" y1="140" x2="150" y2="200">
<stop offset="0" stop-color="#FF00FF"/>
<stop offset="1" stop-color="#8A2BE2"/>
</linearGradient>
</defs>
<!-- Circuit Board Wings -->
<path transform="translate(100 150)" fill="url(#circuitPattern)" d="M0 0h100l-50 60h50v50H0z"/>
<path transform="translate(200 150)" fill="url(#circuitPattern)" d="M0 0h100l50 60h-50v50h50z"/>
<!-- Digital Garden Elements -->
<circle cx="50" cy="50" r="40" fill="url(#gardenGradient)" opacity="0.7"/>
<circle cx="250" cy="250" r="40" fill="url(#gardenGradient)" opacity="0.7"/>
<path stroke="#4B0082" stroke-width="2" fill="none" d="M50 50Q150 30 250 50 200 70 150 70 100 50 50 50"/>
<defs>
<radialGradient id="gardenGradient" cx="150" cy="150" r="100">
<stop offset="0" stop-color="#8A2BE2"/>
<stop offset="1" stop-color="#4B0082"/>
</radialGradient>
</defs>
<!-- Stars in the Garden -->
<circle cx="30" cy="30" r="2" fill="#FFF"/>
<circle cx="270" cy="270" r="2" fill="#FFF"/>
<circle cx="150" cy="50" r="2" fill="#FFF"/>
<circle cx="50" cy="250" r="2" fill="#FFF"/>
<circle cx="250" cy="50" r="2" fill="#FFF"/>
</svg>Judge's Analysis
Player 1's submission more effectively captures the prompt with a clear representation of a butterfly with neon colors and circuit-like elements within the wings.
The composition and colors create a strong visual impact, adhering well to the digital garden theme.
Player 2's image lacks clarity in depicting a butterfly and the circuit board theme is less pronounced, resulting in a less cohesive representation of 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
"A teacup balancing on one wheel of a unicycle"
"Cat floating in a teacup hot air balloon"
"Fish riding bicycles under a swirling, starry sky"
"Umbrella with wings flying over a city skyline"
"Rainbow octopus juggling planets under a starry night sky"
"A clock made of clouds, with rainbow-colored gears floating in the sky"
