Creative Challenge
"A tree made of musical instruments growing under a starry sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Background gradient for the starry sky -->
<radialGradient id="bgGrad" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#001133"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
<!-- Gradient for the tree trunk -->
<linearGradient id="trunkGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8b5a2b"/>
<stop offset="100%" stop-color="#5a3e1b"/>
</linearGradient>
<!-- Guitar body gradient -->
<radialGradient id="guitarBodyGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffcc00"/>
<stop offset="100%" stop-color="#cc6600"/>
</radialGradient>
<!-- Trumpet gradient -->
<linearGradient id="trumpetGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffd700"/>
<stop offset="100%" stop-color="#b8860b"/>
</linearGradient>
<!-- Violin gradient -->
<radialGradient id="violinGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8b0000"/>
<stop offset="100%" stop-color="#ff4500"/>
</radialGradient>
</defs>
<!-- Starry sky background -->
<rect width="300" height="300" fill="url(#bgGrad)"/>
<!-- Small stars -->
<circle cx="20" cy="30" r="1.5" fill="white"/>
<circle cx="50" cy="60" r="1" fill="white"/>
<circle cx="120" cy="40" r="1.5" fill="white"/>
<circle cx="260" cy="20" r="1" fill="white"/>
<circle cx="230" cy="50" r="1.5" fill="white"/>
<circle cx="280" cy="80" r="1" fill="white"/>
<circle cx="200" cy="10" r="1" fill="white"/>
<circle cx="150" cy="50" r="1" fill="white"/>
<circle cx="100" cy="20" r="1.5" fill="white"/>
<circle cx="170" cy="30" r="1" fill="white"/>
<!-- Brighter, glowing stars -->
<circle cx="80" cy="20" r="2" fill="#ffffe0" opacity="0.8"/>
<circle cx="240" cy="40" r="2" fill="#ffffe0" opacity="0.8"/>
<!-- Tree trunk formed as a curving, organic shape -->
<path d="M145,300
C135,260, 125,200, 130,150
C135,100, 155,60, 150,30
L160,30
C155,60, 175,100, 180,150
C185,200, 175,260, 165,300 Z"
fill="url(#trunkGrad)"/>
<!-- Guitar as a branch element -->
<g transform="translate(90,110) rotate(-15)">
<!-- Guitar neck -->
<rect x="-4" y="-30" width="8" height="40" fill="#deb887"/>
<!-- Guitar body -->
<ellipse cx="0" cy="10" rx="15" ry="25" fill="url(#guitarBodyGrad)"/>
<!-- Sound hole detail -->
<circle cx="0" cy="10" r="5" fill="black" opacity="0.6"/>
</g>
<!-- Trumpet as a branch element -->
<g transform="translate(220,90) rotate(30)">
<!-- Trumpet tube -->
<rect x="-20" y="-1" width="40" height="2" fill="url(#trumpetGrad)"/>
<!-- Trumpet bell -->
<ellipse cx="20" cy="0" rx="6" ry="3" fill="url(#trumpetGrad)"/>
<!-- Mouthpiece detail -->
<circle cx="-22" cy="0" r="2" fill="url(#trumpetGrad)"/>
</g>
<!-- Violin as a branch element -->
<g transform="translate(150,70) rotate(-10)">
<path d="M0,0
C -10,-10, -10,-30, 0,-40
C 10,-30, 10,-10, 0,0 Z"
fill="url(#violinGrad)"/>
<!-- F-hole details -->
<path d="M0,-10 C -3,-15, -3,-25, 0,-30" stroke="black" stroke-width="0.5" fill="none"/>
<path d="M0,-10 C 3,-15, 3,-25, 0,-30" stroke="black" stroke-width="0.5" fill="none"/>
</g>
<!-- Musical notes sprinkled like leaves -->
<g fill="white" stroke="white" stroke-width="0.5">
<g transform="translate(130,40) scale(0.8)">
<circle cx="0" cy="0" r="2"/>
<line x1="0" y1="0" x2="0" y2="-8"/>
</g>
<g transform="translate(170,50) scale(0.6)">
<circle cx="0" cy="0" r="2"/>
<line x1="0" y1="0" x2="0" y2="-8"/>
</g>
<g transform="translate(110,30) scale(0.7)">
<circle cx="0" cy="0" r="2"/>
<line x1="0" y1="0" x2="0" y2="-8"/>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="0%" r="100%">
<stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
<stop offset="50%" style="stop-color:#16213e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0f3460;stop-opacity:1" />
</radialGradient>
<linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#8b4513;stop-opacity:1" />
<stop offset="50%" style="stop-color:#a0522d;stop-opacity:1" />
<stop offset="100%" style="stop-color:#654321;stop-opacity:1" />
</linearGradient>
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
<stop offset="50%" style="stop-color:#ffb347;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
</linearGradient>
<linearGradient id="silverGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e8e8e8;stop-opacity:1" />
<stop offset="50%" style="stop-color:#c0c0c0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#808080;stop-opacity:1" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="notePattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="2" fill="#fff" opacity="0.3"/>
</pattern>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Stars -->
<circle cx="50" cy="30" r="1.5" fill="#fff" filter="url(#glow)"/>
<circle cx="120" cy="25" r="1" fill="#fff" filter="url(#glow)"/>
<circle cx="200" cy="40" r="1.5" fill="#fff" filter="url(#glow)"/>
<circle cx="250" cy="20" r="1" fill="#fff" filter="url(#glow)"/>
<circle cx="80" cy="60" r="1" fill="#fff" filter="url(#glow)"/>
<circle cx="270" cy="50" r="1.5" fill="#fff" filter="url(#glow)"/>
<circle cx="30" cy="70" r="1" fill="#fff" filter="url(#glow)"/>
<circle cx="180" cy="15" r="1" fill="#fff" filter="url(#glow)"/>
<circle cx="220" cy="70" r="1.5" fill="#fff" filter="url(#glow)"/>
<!-- Ground -->
<ellipse cx="150" cy="290" rx="120" ry="15" fill="#2d5016" opacity="0.8"/>
<!-- Tree trunk (bass clef shape) -->
<path d="M 140 280 Q 135 270 140 250 Q 145 230 140 210 Q 135 190 140 170 Q 145 150 150 130"
stroke="url(#trunkGradient)" stroke-width="8" fill="none"/>
<circle cx="145" cy="140" r="6" fill="url(#trunkGradient)"/>
<circle cx="145" cy="155" r="4" fill="url(#trunkGradient)"/>
<!-- Piano keys as main branches -->
<g transform="translate(120, 120) rotate(-30)">
<rect x="0" y="0" width="40" height="8" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="0" y="8" width="40" height="8" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="6" y="0" width="6" height="12" fill="#000"/>
<rect x="18" y="0" width="6" height="12" fill="#000"/>
<rect x="30" y="0" width="6" height="12" fill="#000"/>
</g>
<!-- Violin as a branch -->
<g transform="translate(170, 110) rotate(45)">
<ellipse cx="0" cy="0" rx="12" ry="8" fill="url(#goldGradient)" stroke="#8b4513" stroke-width="1"/>
<ellipse cx="0" cy="-15" rx="8" ry="6" fill="url(#goldGradient)" stroke="#8b4513" stroke-width="1"/>
<rect x="-1" y="-25" width="2" height="15" fill="#654321"/>
<line x1="-8" y1="-5" x2="8" y2="-5" stroke="#000" stroke-width="0.5"/>
<line x1="-8" y1="0" x2="8" y2="0" stroke="#000" stroke-width="0.5"/>
<line x1="-8" y1="5" x2="8" y2="5" stroke="#000" stroke-width="0.5"/>
</g>
<!-- Trumpet as a branch -->
<g transform="translate(100, 140) rotate(-60)">
<ellipse cx="0" cy="0" rx="3" ry="15" fill="url(#goldGradient)"/>
<ellipse cx="0" cy="12" rx="6" ry="3" fill="url(#goldGradient)"/>
<circle cx="-2" cy="-5" r="2" fill="url(#goldGradient)" stroke="#ff8c00" stroke-width="0.5"/>
<circle cx="2" cy="-8" r="2" fill="url(#goldGradient)" stroke="#ff8c00" stroke-width="0.5"/>
<circle cx="-1" cy="-12" r="2" fill="url(#goldGradient)" stroke="#ff8c00" stroke-width="0.5"/>
</g>
<!-- Guitar as a large branch -->
<g transform="translate(180, 140) rotate(30)">
<ellipse cx="0" cy="5" rx="10" ry="15" fill="#8b4513" stroke="#654321" stroke-width="1"/>
<ellipse cx="0" cy="5" rx="6" ry="11" fill="#deb887"/>
<rect x="-1" y="-15" width="2" height="20" fill="#654321"/>
<circle cx="0" cy="-18" r="3" fill="#654321"/>
<line x1="-6" y1="-2" x2="6" y2="-2" stroke="#c0c0c0" stroke-width="0.3"/>
<line x1="-6" y1="2" x2="6" y2="2" stroke="#c0c0c0" stroke-width="0.3"/>
<line x1="-6" y1="6" x2="6" y2="6" stroke="#c0c0c0" stroke-width="0.3"/>
<line x1="-6" y1="10" x2="6" y2="10" stroke="#c0c0c0" stroke-width="0.3"/>
</g>
<!-- Saxophone leaves -->
<g transform="translate(90, 100) rotate(-20)">
<path d="M 0 0 Q -5 -8 0 -15 Q 8 -12 12 -5 Q 8 0 5 5 Q 0 8 0 0"
fill="url(#goldGradient)" stroke="#ff8c00" stroke-width="0.5"/>
<circle cx="3" cy="-3" r="1" fill="#ff8c00"/>
<circle cx="6" cy="-8" r="1" fill="#ff8c00"/>
</g>
<!-- Flute leaves -->
<g transform="translate(200, 90) rotate(60)">
<rect x="0" y="0" width="20" height="3" rx="1.5" fill="url(#silverGradient)"/>
<circle cx="3" cy="1.5" r="0.8" fill="#808080"/>
<circle cx="7" cy="1.5" r="0.8" fill="#808080"/>
<circle cx="11" cy="1.5" r="0.8" fill="#808080"/>
<circle cx="15" cy="1.5" r="0.8" fill="#808080"/>
</g>
<!-- Drum as foliage -->
<g transform="translate(160, 80)">
<ellipse cx="0" cy="0" rx="15" ry="8" fill="#8b0000" stroke="#654321" stroke-width="1"/>
<ellipse cx="0" cy="-8" rx="15" ry="3" fill="#a0522d"/>
<line x1="-10" y1="-5" x2="10" y2="-5" stroke="#ffd700" stroke-width="1"/>
<line x1="-12" y1="0" x2="12" y2="0" stroke="#ffd700" stroke-width="1"/>
<line x1="-10" y1="5" x2="10" y2="5" stroke="#ffd700" stroke-width="1"/>
</g>
<!-- Musical notes floating around -->
<g fill="#fff" opacity="0.7">
<circle cx="60" cy="120" r="2"/>
<rect x="62" y="115" width="1" height="8"/>
<path d="M 63 115 Q 68 112 70 118" stroke="#fff" stroke-width="1" fill="none"/>
</g>
<g fill="#fff" opacity="0.6" transform="translate(220, 160)">
<circle cx="0" cy="0" r="1.5"/>
<rect x="1.5" y="-5" width="0.8" height="6"/>
</g>
<g fill="#fff" opacity="0.8" transform="translate(80, 180)">
<circle cx="0" cy="0" r="1.8"/>
<rect x="1.8" y="-6" width="1" height="7"/>
<path d="M 2.8 -6 Q 6 -8 8 -4" stroke="#fff" stroke-width="0.8" fill="none"/>
</g>
<!-- Treble clef crown -->
<g transform="translate(150, 70) scale(0.8)">
<path d="M 0 0 Q -8 -15 0 -25 Q 15 -20 12 -5 Q 8 5 0 0 Q -5 8 -8 15 Q -5 20 0 15 Q 8 10 5 0"
fill="url(#goldGradient)" stroke="#ff8c00" stroke-width="1" filter="url(#glow)"/>
</g>
<!-- Additional floating notes -->
<text x="40" y="90" fill="#fff" font-family="serif" font-size="12" opacity="0.5">♪</text>
<text x="240" y="110" fill="#fff" font-family="serif" font-size="10" opacity="0.6">♫</text>
<text x="190" y="50" fill="#fff" font-family="serif" font-size="8" opacity="0.4">♬</text>
</svg>Judge's Analysis
Player 2's submission demonstrates better creativity and adherence to the prompt with a tree that clearly incorporates multiple musical instruments into its design.
The composition is visually appealing and technically stronger, with a clear depiction of a starry sky and a musical theme.
Player 1's submission is less detailed and lacks the imaginative integration of instruments into the tree structure.
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.