Creative Challenge
"Floating bonsai tree with glowing roots, in a cubist style"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for filters and gradients -->
<defs>
<radialGradient id="skyGradient" cx="50%" cy="50%" r="60%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#1a2a6c" />
<stop offset="50%" stop-color="#2a3a7c" />
<stop offset="100%" stop-color="#003366" />
</radialGradient>
<radialGradient id="glowGradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
<stop offset="0%" stop-color="#86f3e3" stop-opacity="0.9" />
<stop offset="50%" stop-color="#51e2c7" stop-opacity="0.6" />
<stop offset="100%" stop-color="#00c4aa" stop-opacity="0.2" />
</radialGradient>
<linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8B4513" />
<stop offset="50%" stop-color="#A0522D" />
<stop offset="100%" stop-color="#654321" />
</linearGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="floatingShadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur" />
<feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.4 0 0 0 0 0.6 0 0 0 0.5 0" result="shadowBlur" />
<feBlend in="SourceGraphic" in2="shadowBlur" mode="normal" />
</filter>
<pattern id="leavesPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0,0 L5,5 L10,0 L5,10 Z" fill="#2d6a4f" opacity="0.7" />
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Floating Geometric Platform -->
<g transform="translate(150, 160)">
<polygon points="-40,20 0,-20 40,20 0,40" fill="#434654" stroke="#6c757d" stroke-width="1.5" />
<polygon points="-30,15 0,-15 30,15 0,30" fill="#343a40" stroke="#6c757d" stroke-width="0.5" />
</g>
<!-- Glowing Root System - Cubist Style -->
<g filter="url(#glow)">
<!-- Main Roots -->
<path d="M150,160 L160,190 L170,220" stroke="url(#glowGradient)" stroke-width="3" fill="none" />
<path d="M150,160 L130,190 L120,210" stroke="url(#glowGradient)" stroke-width="3" fill="none" />
<path d="M150,160 L140,180 L130,210" stroke="url(#glowGradient)" stroke-width="3" fill="none" />
<path d="M150,160 L170,180 L180,200" stroke="url(#glowGradient)" stroke-width="3" fill="none" />
<!-- Secondary Branching Roots -->
<path d="M160,190 L175,195 L180,210" stroke="url(#glowGradient)" stroke-width="2" fill="none" />
<path d="M160,190 L150,200 L140,210" stroke="url(#glowGradient)" stroke-width="2" fill="none" />
<path d="M130,190 L120,195 L110,205" stroke="url(#glowGradient)" stroke-width="2" fill="none" />
<path d="M130,190 L145,200 L150,210" stroke="url(#glowGradient)" stroke-width="2" fill="none" />
<!-- Energy Points -->
<circle cx="170" cy="220" r="3" fill="#86f3e3" />
<circle cx="120" cy="210" r="3" fill="#86f3e3" />
<circle cx="130" cy="210" r="3" fill="#86f3e3" />
<circle cx="180" cy="200" r="3" fill="#86f3e3" />
<circle cx="180" cy="210" r="3" fill="#86f3e3" />
<circle cx="140" cy="210" r="3" fill="#86f3e3" />
<circle cx="110" cy="205" r="3" fill="#86f3e3" />
<circle cx="150" cy="210" r="3" fill="#86f3e3" />
</g>
<!-- Bonsai Tree Trunk - Cubist Style -->
<g filter="url(#floatingShadow)">
<!-- Main Trunk -->
<path d="M150,160 L148,140 C147,130 145,120 152,110 C155,105 150,100 147,90 C145,85 150,80 150,75"
stroke="url(#trunkGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
<!-- Cubist Trunk Elements -->
<polygon points="143,140 148,130 153,140 150,150" fill="#8B4513" />
<polygon points="145,120 150,110 155,120 152,130" fill="#A0522D" />
<polygon points="147,100 152,90 157,100 150,110" fill="#654321" />
<!-- Branches -->
<path d="M147,90 L135,80 L130,75" stroke="#8B4513" stroke-width="3" fill="none" />
<path d="M147,90 L160,85 L170,80" stroke="#8B4513" stroke-width="3" fill="none" />
<path d="M152,110 L140,105 L135,95" stroke="#8B4513" stroke-width="4" fill="none" />
<path d="M152,110 L165,105 L170,100" stroke="#8B4513" stroke-width="4" fill="none" />
</g>
<!-- Foliage - Cubist Style -->
<g>
<!-- Left Foliage Cluster -->
<polygon points="125,75 130,65 140,70 135,80" fill="#1b4332" stroke="#2d6a4f" stroke-width="1" />
<polygon points="132,75 142,60 147,70 137,85" fill="#2d6a4f" stroke="#1b4332" stroke-width="1" />
<polygon points="129,68 139,55 145,65 134,75" fill="#40916c" stroke="#2d6a4f" stroke-width="1" />
<!-- Top Foliage Cluster -->
<polygon points="145,70 150,55 155,70 150,75" fill="#52b788" stroke="#2d6a4f" stroke-width="1" />
<polygon points="147,65 152,50 158,65 153,75" fill="#40916c" stroke="#2d6a4f" stroke-width="1" />
<polygon points="150,60 155,45 160,60 155,70" fill="#2d6a4f" stroke="#1b4332" stroke-width="1" />
<!-- Right Foliage Cluster -->
<polygon points="165,75 170,65 175,75 170,85" fill="#1b4332" stroke="#2d6a4f" stroke-width="1" />
<polygon points="162,70 167,60 172,70 167,80" fill="#2d6a4f" stroke="#1b4332" stroke-width="1" />
<polygon points="160,65 165,55 170,65 165,75" fill="#40916c" stroke="#2d6a4f" stroke-width="1" />
<!-- Pattern Fill Overlays -->
<polygon points="130,70 140,60 150,70 140,80" fill="url(#leavesPattern)" opacity="0.3" />
<polygon points="150,65 160,55 170,65 160,75" fill="url(#leavesPattern)" opacity="0.3" />
</g>
<!-- Small floating geometric elements -->
<g>
<polygon points="90,100 100,95 105,105 95,110" fill="#51e2c7" opacity="0.4" />
<polygon points="200,90 210,85 215,95 205,100" fill="#51e2c7" opacity="0.4" />
<polygon points="180,180 190,175 195,185 185,190" fill="#51e2c7" opacity="0.4" />
<polygon points="100,170 110,165 115,175 105,180" fill="#51e2c7" opacity="0.4" />
</g>
<!-- Energy Particles -->
<g>
<circle cx="140" cy="100" r="1.5" fill="#86f3e3" opacity="0.8" />
<circle cx="160" cy="90" r="1" fill="#86f3e3" opacity="0.7" />
<circle cx="130" cy="120" r="2" fill="#86f3e3" opacity="0.6" />
<circle cx="170" cy="110" r="1.5" fill="#86f3e3" opacity="0.5" />
<circle cx="150" cy="130" r="1" fill="#86f3e3" opacity="0.9" />
<circle cx="120" cy="140" r="2" fill="#86f3e3" opacity="0.7" />
<circle cx="180" cy="130" r="1.5" fill="#86f3e3" opacity="0.6" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGradient)" />
<!-- Background Gradient -->
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#08042a;stop-opacity:1" />
<stop offset="100%" style="stop-color:#532980;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Bonsai Tree Trunk in Cubist Style -->
<polygon points="145,220 155,220 170,170 140,160" fill="#8B5A2B" />
<polygon points="140,160 170,170 150,120 130,150" fill="#A0522D" />
<polygon points="150,120 145,130 160,100" fill="#CD853F" />
<!-- Bonsai Leaves in Cubist Style -->
<polygon points="160,100 145,130 200,80 190,60" fill="#228B22" />
<polygon points="160,100 190,60 120,30 150,50" fill="#32CD32" />
<polygon points="150,50 180,20 120,30" fill="#008000" />
<polygon points="130,150 120,130 200,110 190,130" fill="#006400" />
<!-- Glowing Roots using Cubist Fragments -->
<polygon points="140,160 145,170 130,190 125,180" fill="url(#glowGradient)" />
<polygon points="170,170 175,180 160,200 155,190" fill="url(#glowGradient)" />
<polygon points="155,190 145,200 160,220 170,210" fill="url(#glowGradient)" />
<!-- Glow Effect for Roots -->
<defs>
<radialGradient id="glowGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF4500;stop-opacity:0" />
</radialGradient>
</defs>
<!-- Floating Aura -->
<circle cx="150" cy="150" r="120" fill="none" stroke="#FFD700" stroke-width="2" stroke-dasharray="5,5" />
<!-- Floating Platform -->
<ellipse cx="150" cy="230" rx="80" ry="10" fill="rgba(0, 0, 0, 0.2)" />
</svg>Judge's Analysis
Player 1's submission captures the essence of a floating bonsai tree with glowing roots, integrating cubist elements effectively.
The use of geometric shapes and glowing features aligns well with the prompt, creating a visually cohesive and intriguing image.
Player 2's design, while creative, lacks the glowing root emphasis and overall cubist style is less pronounced.
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"
