Creative Challenge
"A dragon blowing bubbles instead of fire."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bubble-gradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(255,255,255,0.8)"/>
<stop offset="70%" stop-color="rgba(135,206,235,0.6)"/>
<stop offset="100%" stop-color="rgba(135,206,235,0.2)"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Dragon body -->
<path d="M120,180 Q140,160 160,170 T200,160 Q220,150 240,170 Q260,190 250,210 Q240,230 220,235 Q200,240 180,230 Q160,220 140,225 Q120,230 110,220 Q100,210 120,180" fill="#8B0000"/>
<!-- Dragon head -->
<path d="M90,170 Q80,160 85,150 Q90,140 100,135 Q110,130 120,140 Q130,150 120,160 Q110,170 90,170" fill="#A52A2A"/>
<!-- Dragon eye -->
<circle cx="95" cy="145" r="3" fill="gold"/>
<!-- Dragon scales -->
<path d="M140,180 Q150,170 160,180 M170,175 Q180,165 190,175 M200,170 Q210,160 220,170" fill="none" stroke="#FF4500" stroke-width="2"/>
<!-- Bubbles -->
<g class="bubbles">
<circle cx="70" cy="150" r="10" fill="url(#bubble-gradient)" filter="url(#glow)"/>
<circle cx="50" cy="140" r="15" fill="url(#bubble-gradient)" filter="url(#glow)"/>
<circle cx="40" cy="160" r="8" fill="url(#bubble-gradient)" filter="url(#glow)"/>
<circle cx="30" cy="130" r="12" fill="url(#bubble-gradient)" filter="url(#glow)"/>
<circle cx="60" cy="120" r="7" fill="url(#bubble-gradient)" filter="url(#glow)"/>
<circle cx="20" cy="150" r="9" fill="url(#bubble-gradient)" filter="url(#glow)"/>
</g>
<!-- Dragon spikes -->
<path d="M180,160 L185,150 L190,160 L195,145 L200,160 L205,148 L210,160" fill="none" stroke="#8B0000" stroke-width="3"/>
<!-- Dragon wing -->
<path d="M200,180 Q220,160 230,170 Q240,180 220,190 Q200,200 200,180" fill="#A52A2A"/>
<!-- Additional decorative elements -->
<path d="M85,155 Q75,153 70,155" fill="none" stroke="#8B0000" stroke-width="2"/>
<path d="M140,190 Q160,185 180,190" fill="none" stroke="#600000" stroke-width="2"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"
aria-label="A dragon blowing bubbles instead of fire" role="img">
<defs>
<!-- Gradient for dragon scales -->
<radialGradient id="scaleGradient" cx="0.5" cy="0.5" r="0.6">
<stop offset="0%" stop-color="#6bbc9a" />
<stop offset="50%" stop-color="#2b7a4a" />
<stop offset="100%" stop-color="#1c4e2d" />
</radialGradient>
<!-- Gradient for dragon wing membrane -->
<linearGradient id="wingGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#cc5225" stop-opacity="0.8" />
<stop offset="100%" stop-color="#8d2600" stop-opacity="0.4" />
</linearGradient>
<!-- Gradient for dragon eye -->
<radialGradient id="eyeGradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#f7f70f"/>
<stop offset="40%" stop-color="#b6b315"/>
<stop offset="100%" stop-color="#3d3c08"/>
</radialGradient>
<!-- Bubble gradient for bubble fill -->
<radialGradient id="bubbleGradient" cx="0.4" cy="0.4" r="0.6">
<stop offset="0%" stop-color="#bbddff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#225588" stop-opacity="0.1"/>
</radialGradient>
<!-- Bubble highlight pattern -->
<radialGradient id="bubbleHighlight" cx="0.3" cy="0.3" r="0.5">
<stop offset="0%" stop-color="white" stop-opacity="0.8"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Scale pattern for subtle detail -->
<pattern id="scalePattern" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(15)">
<circle cx="10" cy="10" r="6" stroke="#14522e" stroke-width="0.5" fill="url(#scaleGradient)"/>
</pattern>
<!-- Smoke-like translucent swirls for bubbles -->
<radialGradient id="swirlGradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#cce6f5" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#7aa7c6" stop-opacity="0"/>
</radialGradient>
<!-- Dragon horns gradient -->
<linearGradient id="hornGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffe4b5" />
<stop offset="100%" stop-color="#c48f2c" />
</linearGradient>
</defs>
<!-- Background with subtle teal gradient -->
<rect width="300" height="300" fill="url(#swirlGradient)" />
<!-- Dragon body with scale pattern fill -->
<g transform="translate(100 150)">
<!-- Tail -->
<path d="M-40 40 q-80 20 -60 -20 q10 -30 30 -20 q30 5 40 0" fill="url(#scalePattern)" stroke="#1a4c32" stroke-width="2" />
<!-- Belly -->
<ellipse cx="0" cy="20" rx="40" ry="70" fill="url(#scaleGradient)" stroke="#16522f" stroke-width="3" />
<!-- Body shadow -->
<path d="M-40 60 q20 30 80 20 q-20 -50 -20 -70 q-10 -30 -80 -40 z" fill="rgba(0,0,0,0.15)" />
</g>
<!-- Dragon neck and head -->
<g transform="translate(140 70) rotate(-15)">
<!-- Neck -->
<ellipse cx="0" cy="50" rx="25" ry="80" fill="url(#scaleGradient)" stroke="#1a4c32" stroke-width="3" />
<path d="M-15 10 q30 -50 50 -30 q25 25 -15 60 q-30 15 -40 -10" fill="url(#scaleGradient)" stroke="#1a4c32" stroke-width="3" />
<!-- Head base -->
<ellipse cx="40" cy="10" rx="40" ry="30" fill="url(#scaleGradient)" stroke="#184b2b" stroke-width="3" />
<!-- Head shadow -->
<ellipse cx="40" cy="10" rx="40" ry="30" fill="rgba(0,0,0,0.1)" />
<!-- Horns -->
<path d="M5 0 q10 -30 20 0" stroke="url(#hornGradient)" stroke-width="6" stroke-linecap="round" fill="none" />
<path d="M15 5 q7 -25 12 0" stroke="url(#hornGradient)" stroke-width="4" stroke-linecap="round" fill="none" />
<!-- Eye -->
<ellipse cx="70" cy="-10" rx="10" ry="14" fill="url(#eyeGradient)" stroke="#292900" stroke-width="1.5" />
<circle cx="74" cy="-10" r="5" fill="#331a00" />
<circle cx="73" cy="-12" r="2.5" fill="#fefefd" opacity="0.85"/>
<!-- Snout detail -->
<ellipse cx="78" cy="10" rx="8" ry="4" fill="#1e3c20" />
<circle cx="85" cy="10" r="3" fill="#22401f" />
<circle cx="88" cy="7" r="2" fill="#2c5b30" />
<!-- Dragon mouth slightly open -->
<path d="M50 20 q15 10 30 0 q-12 15 -30 5" fill="#3e691f" />
</g>
<!-- Dragon nostrils -->
<circle cx="115" cy="75" r="3" fill="#123a1a" />
<circle cx="125" cy="80" r="3" fill="#123a1a" />
<!-- Dragon wing -->
<g transform="translate(70 120) rotate(10)">
<!-- Wing bones -->
<line x1="0" y1="0" x2="100" y2="-80" stroke="#4d2700" stroke-width="5" stroke-linecap="round"/>
<line x1="30" y1="-20" x2="100" y2="-80" stroke="#4d2700" stroke-width="4" stroke-linecap="round"/>
<line x1="55" y1="-45" x2="100" y2="-80" stroke="#4d2700" stroke-width="3" stroke-linecap="round"/>
<!-- Wing membrane -->
<path d="M0 0 Q40 -90 100 -80 L70 20 Z" fill="url(#wingGradient)" stroke="#853900" stroke-width="2"/>
<!-- Wing scales -->
<circle cx="40" cy="-50" r="10" fill="url(#scalePattern)" opacity="0.3"/>
<circle cx="65" cy="-55" r="7" fill="url(#scalePattern)" opacity="0.3"/>
</g>
<!-- Claws on front leg -->
<g transform="translate(95 180)">
<path d="M0 0 q10 15 15 5 q10 10 5 15" fill="#2d5a1e" stroke="#174110" stroke-width="2" />
<path d="M8 20 q15 5 20 -5 q-5 10 -20 10" fill="#2d5a1e" stroke="#174110" stroke-width="2" />
</g>
<!-- IMAGINATIVE BUBBLES COMING OUT -->
<g>
<!-- Bubble cluster 1 large -->
<circle cx="180" cy="70" r="22" fill="url(#bubbleGradient)" stroke="#63a1d6" stroke-width="2.5" />
<circle cx="175" cy="65" r="18" fill="url(#bubbleHighlight)" />
<circle cx="145" cy="90" r="14" fill="url(#bubbleGradient)" stroke="#5d94cc" stroke-width="2" />
<circle cx="140" cy="85" r="12" fill="url(#bubbleHighlight)" opacity="0.7" />
<!-- Bubble cluster 2 medium -->
<circle cx="215" cy="50" r="14" fill="url(#bubbleGradient)" stroke="#61a2db" stroke-width="1.8" />
<circle cx="210" cy="45" r="11" fill="url(#bubbleHighlight)" />
<circle cx="190" cy="60" r="10" fill="url(#bubbleGradient)" stroke="#5c94cf" stroke-width="1.5" />
<circle cx="185" cy="56" r="8" fill="url(#bubbleHighlight)" opacity="0.6" />
<!-- Bubble cluster 3 small -->
<circle cx="245" cy="40" r="9" fill="url(#bubbleGradient)" stroke="#4d81b9" stroke-width="1" />
<circle cx="241" cy="38" r="6" fill="url(#bubbleHighlight)" opacity="0.75" />
<circle cx="230" cy="50" r="6" fill="url(#bubbleGradient)" stroke="#4a7cb5" stroke-width="0.9" />
<circle cx="225" cy="48" r="5" fill="url(#bubbleHighlight)" opacity="0.6" />
<!-- Bubble movement swirl shapes -->
<path d="M195 95 q-15 20 -30 30" stroke="#88bcee" stroke-width="1" fill="none" opacity="0.3" />
<path d="M230 65 q20 10 20 30" stroke="#aad1fc" stroke-width="1" fill="none" opacity="0.25" />
<path d="M175 80 q5 30 40 10" stroke="#74a8e3" stroke-width="1" fill="none" opacity="0.2" />
</g>
<!-- Decorative floating bubble highlights -->
<circle cx="250" cy="95" r="15" fill="url(#bubbleGradient)" stroke="#427cbf" stroke-width="1.7" opacity="0.7" />
<circle cx="245" cy="88" r="13" fill="url(#bubbleHighlight)" opacity="0.5" />
<circle cx="260" cy="65" r="7" fill="url(#bubbleGradient)" stroke="#3c6bbe" stroke-width="1" opacity="0.5" />
<circle cx="255" cy="62" r="6" fill="url(#bubbleHighlight)" opacity="0.45" />
<!-- Subtle sparkle effect on bubbles -->
<g stroke="#daf4ff" stroke-width="0.5" opacity="0.6" >
<line x1="190" y1="80" x2="195" y2="85"/>
<line x1="192" y1="85" x2="197" y2="80"/>
<line x1="215" y1="52" x2="217" y2="56"/>
<line x1="216" y1="56" x2="220" y2="54"/>
<line x1="240" y1="42" x2="242" y2="46"/>
<line x1="241" y1="45" x2="245" y2="44"/>
<line x1="250" y1="90" x2="255" y2="95"/>
<line x1="253" y1="92" x2="258" y2="90"/>
</g>
</svg>Judge's Analysis
Player 2's submission is more detailed and creative, featuring a fully realized dragon character with a clear depiction of bubbles instead of fire.
The composition is visually appealing with smooth gradients and thoughtful design elements.
While Player 1's submission is simpler and adheres to the prompt, it lacks the technical quality and creative depth of Player 2's work.
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.
