Creative Challenge
"A dragon made of tangled neon headphone cables"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff3e00; stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff8c00; stop-opacity:1" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00ff00; stop-opacity:1" />
<stop offset="100%" style="stop-color:#00bfff; stop-opacity:1" />
</linearGradient>
<pattern id="cablePattern" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0 0 L10 10" stroke="#ffffff" stroke-width="1" />
<path d="M10 0 L0 10" stroke="#ffffff" stroke-width="1" />
</pattern>
</defs>
<g fill="none" stroke-linecap="round" stroke-width="4">
<path d="M150 150 C130 140, 120 120, 100 130 C90 140, 80 160, 70 150 C60 140, 50 160, 50 170 C50 180, 70 190, 80 200 C90 210, 110 230, 130 220 C150 210, 160 190, 180 200 C200 210, 220 190, 220 170 C220 150, 170 130, 170 160 C170 180, 210 190, 190 210 C170 230, 140 210, 140 180 C140 150, 150 145, 150 150 Z"
fill="url(#gradient1)" stroke="#ff0000" />
<path d="M150 150 Q144 142, 138 134 Q130 128, 120 138 Q110 148, 100 142 Q90 136, 80 132 Q60 120, 70 110"
fill="none" stroke="url(#gradient2)" />
<path d="M100 100 C120 80, 140 100, 160 100 C180 100, 160 80, 180 70 C200 60, 220 70, 200 90 C180 110, 160 110, 140 130 C120 150, 100 130, 100 100 Z"
fill="none" stroke="url(#cablePattern)" />
<path d="M100 100 C99 90, 110 80, 120 85 C130 90, 145 100, 140 110 C135 120, 110 120, 100 110 C90 100, 100 90, 100 100 Z"
fill="#ff00ff" />
<path d="M190 70 Q200 60, 210 70 Q220 80, 220 100 C220 120, 200 130, 180 120 C160 110, 170 90, 190 70 Z"
fill="#ffff00" />
<path d="M150 150 C120 175, 130 200, 150 200 C170 200, 160 175, 150 150 Z"
fill="#00ffff" />
</g>
<text x="150" y="290" font-family="Arial" font-size="20" text-anchor="middle" fill="#FFFFFF">Neon Dragon</text>
</svg>
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="orange" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>
<linearGradient id="gradient2" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="cyan" />
<stop offset="50%" stop-color="lime" />
<stop offset="100%" stop-color="fuchsia" />
</linearGradient>
</defs>
<path d="M150 20 Q130 40 150 60 T150 100 T150 140 T150 180 T150 220 T150 260" stroke="url(#gradient1)" stroke-width="10" fill="none"/>
<path d="M150 260 Q130 280 150 300 T150 260" stroke="url(#gradient1)" stroke-width="10" fill="none"/>
<path d="M150 260 Q170 280 150 300 T150 260" stroke="url(#gradient1)" stroke-width="10" fill="none"/>
<path d="M150 180 Q130 200 110 180 T90 160 T70 180 T50 200 T30 180" stroke="url(#gradient2)" stroke-width="10" fill="none"/>
<path d="M150 180 Q170 200 190 180 T210 160 T230 180 T250 200 T270 180" stroke="url(#gradient2)" stroke-width="10" fill="none"/>
<path d="M150 100 Q130 120 110 100 T90 80 T70 100 T50 120 T30 100" stroke="url(#gradient1)" stroke-width="10" fill="none"/>
<path d="M150 100 Q170 120 190 100 T210 80 T230 100 T250 120 T270 100" stroke="url(#gradient1)" stroke-width="10" fill="none"/>
<path d="M150 20 Q130 40 110 20 T90 0 T70 20 T50 40 T30 20" stroke="url(#gradient2)" stroke-width="10" fill="none"/>
<path d="M150 20 Q170 40 190 20 T210 0 T230 20 T250 40 T270 20" stroke="url(#gradient2)" stroke-width="10" fill="none"/>
<circle cx="150" cy="260" r="20" stroke="url(#gradient1)" stroke-width="5" fill="none"/>
<circle cx="130" cy="200" r="15" stroke="url(#gradient2)" stroke-width="5" fill="none"/>
<circle cx="170" cy="200" r="15" stroke="url(#gradient2)" stroke-width="5" fill="none"/>
<circle cx="150" cy="100" r="20" stroke="url(#gradient1)" stroke-width="5" fill="none"/>
<circle cx="130" cy="40" r="15" stroke="url(#gradient2)" stroke-width="5" fill="none"/>
<circle cx="170" cy="40" r="15" stroke="url(#gradient2)" stroke-width="5" fill="none"/>
<circle cx="150" cy="20" r="10" stroke="url(#gradient1)" stroke-width="5" fill="none"/>
<circle cx="140" cy="20" r="10" stroke="url(#gradient1)" stroke-width="5" fill="none"/>
<circle cx="160" cy="20" r="10" stroke="url(#gradient1)" stroke-width="5" fill="none"/>
</svg>Judge's Analysis
Player 2's submission excels in capturing the essence of a dragon made of tangled neon headphone cables through its intricate pattern and vibrant colors.
The use of zigzag and circular elements effectively suggests the entanglement and dynamic energy of cables.
In comparison, Player 1's image lacks the structural complexity and clear representation of a dragon or cables, making it less compelling in adhering 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
"Cat in a spacesuit floating above a moonlit ocean"
"Lonely penguin on a flamingo float in a desert oasis"
"Chameleon blending into a giant cosmic snail shell"
"A jellyfish cityscape at sunset"
"Giraffe in a scuba suit diving for coral in a colorful reef"
"Giraffe juggling planets in a cosmic circus ring"
