Creative Challenge
"A chameleon playing a tiny grand piano with its tail"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Chameleon gradients -->
<linearGradient id="chameleonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#5ee577" />
<stop offset="25%" stop-color="#47ba8f" />
<stop offset="50%" stop-color="#3a8fa3" />
<stop offset="75%" stop-color="#2e64b8" />
<stop offset="100%" stop-color="#5a3cc0" />
</linearGradient>
<linearGradient id="chameleonAlt" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#47ba8f" />
<stop offset="50%" stop-color="#3a8fa3" />
<stop offset="100%" stop-color="#2e64b8" />
</linearGradient>
<!-- Chameleon skin texture -->
<pattern id="chameleonTexture" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="scale(0.5)">
<circle cx="5" cy="5" r="3" fill="url(#chameleonAlt)" opacity="0.3" />
</pattern>
<!-- Piano gradients -->
<linearGradient id="pianoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#444" />
<stop offset="70%" stop-color="#111" />
<stop offset="100%" stop-color="#222" />
</linearGradient>
<linearGradient id="pianoInterior" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8a6e3d" />
<stop offset="50%" stop-color="#c4a45c" />
<stop offset="100%" stop-color="#8a6e3d" />
</linearGradient>
<!-- Leaf gradient -->
<radialGradient id="leafGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#8fdb5e" />
<stop offset="100%" stop-color="#3a8d1e" />
</radialGradient>
<!-- Sparkle effect -->
<filter id="sparkle" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur" />
<feComponentTransfer in="blur" result="glow">
<feFuncA type="linear" slope="5" intercept="0" />
</feComponentTransfer>
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
<!-- Musical note symbol -->
<symbol id="musicNote" viewBox="0 0 20 40">
<path d="M0,10 C0,6 3,3 6,3 C9,3 12,6 12,10 C12,14 9,17 6,17 C3,17 0,14 0,10 Z M6,17 L6,35 M0,35 L12,35" stroke="none" />
</symbol>
</defs>
<!-- Background with subtle gradient -->
<rect width="300" height="300" fill="#f7faf2" />
<rect width="300" height="300" fill="url(#leafGradient)" opacity="0.07" />
<!-- Leafy background elements -->
<g opacity="0.7">
<ellipse cx="70" cy="70" rx="40" ry="25" fill="url(#leafGradient)" transform="rotate(-20, 70, 70)" opacity="0.3" />
<ellipse cx="170" cy="50" rx="35" ry="20" fill="url(#leafGradient)" transform="rotate(15, 170, 50)" opacity="0.2" />
<ellipse cx="230" cy="90" rx="30" ry="18" fill="url(#leafGradient)" transform="rotate(-10, 230, 90)" opacity="0.2" />
</g>
<!-- Branch the chameleon is sitting on -->
<path d="M10,180 C50,160 100,190 160,185 C220,180 260,150 290,170"
stroke="#8B4513" stroke-width="12" fill="none" />
<path d="M10,180 C50,160 100,190 160,185 C220,180 260,150 290,170"
stroke="#A35A1A" stroke-width="10" fill="none" />
<!-- Branch texture -->
<path d="M20,177 C30,175 40,176 50,173" stroke="#8B4513" stroke-width="1" fill="none" />
<path d="M70,168 C80,166 90,167 100,169" stroke="#8B4513" stroke-width="1" fill="none" />
<path d="M120,182 C130,184 140,185 150,183" stroke="#8B4513" stroke-width="1" fill="none" />
<path d="M180,180 C190,178 200,175 210,176" stroke="#8B4513" stroke-width="1" fill="none" />
<path d="M230,172 C240,170 250,168 260,166" stroke="#8B4513" stroke-width="1" fill="none" />
<!-- Leaves on the branch -->
<ellipse cx="70" cy="170" rx="25" ry="15" fill="url(#leafGradient)" transform="rotate(-20, 70, 170)" />
<ellipse cx="120" cy="180" rx="20" ry="12" fill="url(#leafGradient)" transform="rotate(15, 120, 180)" />
<ellipse cx="220" cy="165" rx="22" ry="14" fill="url(#leafGradient)" transform="rotate(-10, 220, 165)" />
<ellipse cx="265" cy="170" rx="18" ry="10" fill="url(#leafGradient)" transform="rotate(5, 265, 170)" />
<!-- Leaf veins -->
<path d="M70,170 C75,168 80,166 85,167" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
<path d="M70,170 C65,175 60,178 55,176" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
<path d="M120,180 C125,178 130,176 135,177" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
<path d="M120,180 C115,185 110,188 105,186" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
<path d="M220,165 C225,163 230,161 235,162" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
<path d="M220,165 C215,170 210,173 205,171" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
<!-- Grand Piano -->
<g transform="translate(210, 138) scale(0.55)">
<!-- Piano body -->
<path d="M0,0 L80,0 C110,0 130,20 130,40 L130,60 Q130,65 125,65 L5,65 Q0,65 0,60 Z" fill="url(#pianoGradient)" />
<!-- Piano edge highlight -->
<path d="M0,0 L80,0 C110,0 130,20 130,40 L130,60 Q130,65 125,65 L5,65 Q0,65 0,60 Z"
fill="none" stroke="#555" stroke-width="1" />
<!-- Piano lid (open) -->
<path d="M5,5 L80,5 C105,5 120,15 120,35"
fill="none" stroke="#444" stroke-width="2" transform="rotate(-40, 5, 5)" />
<!-- Piano interior visible with lid open -->
<path d="M5,5 L80,5 C105,5 120,15 120,35"
fill="url(#pianoInterior)" stroke="none" transform="rotate(-40, 5, 5)" opacity="0.5" />
<!-- Piano lid support -->
<line x1="90" y1="5" x2="90" y2="30" stroke="#444" stroke-width="1" />
<!-- Piano legs -->
<rect x="15" y="65" width="10" height="25" rx="2" fill="#222" />
<rect x="105" y="65" width="10" height="25" rx="2" fill="#222" />
<!-- Piano keyboard area -->
<rect x="10" y="10" width="110" height="20" fill="#8a7b58" />
<!-- Piano keys -->
<g>
<!-- White keys -->
<rect x="15" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="26" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="37" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="48" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="59" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="70" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="81" y="13" width="10" height="15" fill="white" rx="1" />
<rect x="92" y="13" width="10" height="15" fill="white" rx="1" />
<!-- Black keys -->
<rect x="22" y="13" width="7" height="10" fill="black" rx="1" />
<rect x="33" y="13" width="7" height="10" fill="black" rx="1" />
<rect x="55" y="13" width="7" height="10" fill="black" rx="1" />
<rect x="66" y="13" width="7" height="10" fill="black" rx="1" />
<rect x="77" y="13" width="7" height="10" fill="black" rx="1" />
<!-- Key that chameleon is pressing -->
<rect id="playingKey" x="48" y="13" width="10" height="15" fill="#eee" rx="1">
<animate attributeName="y" values="13;15;13" dur="2s" repeatCount="indefinite" />
</rect>
</g>
</g>
<!-- Chameleon -->
<g transform="translate(95, 160)">
<!-- Body -->
<path d="M0,0 C-10,-10 -30,-15 -55,-5 C-75,5 -85,20 -75,40 C-65,60 -45,65 -20,55 C-5,50 5,40 0,20 Z"
fill="url(#chameleonGradient)" />
<!-- Body texture -->
<path d="M0,0 C-10,-10 -30,-15 -55,-5 C-75,5 -85,20 -75,40 C-65,60 -45,65 -20,55 C-5,50 5,40 0,20 Z"
fill="url(#chameleonTexture)" />
<!-- Ridge on back -->
<path d="M-70,20 C-60,15 -50,10 -40,12 C-30,14 -20,16 -10,20 C0,24 5,22 0,18"
stroke="url(#chameleonAlt)" stroke-width="2" fill="none" />
<!-- Back leg patterns -->
<path d="M-62,15 C-65,10 -67,8 -72,6" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" />
<path d="M-42,10 C-45,5 -47,0 -52,-5" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" />
<!-- Head -->
<path d="M5,-5 C15,-10 25,-10 35,-5 C45,0 50,10 45,20 C40,30 30,35 20,30 C10,25 0,15 5,5 C8,-2 15,-5 25,0"
fill="url(#chameleonGradient)" />
<!-- Head texture -->
<path d="M5,-5 C15,-10 25,-10 35,-5 C45,0 50,10 45,20 C40,30 30,35 20,30 C10,25 0,15 5,5 C8,-2 15,-5 25,0"
fill="url(#chameleonTexture)" />
<!-- Crest on head -->
<path d="M25,-5 C28,-12 31,-18 28,-22" stroke="url(#chameleonGradient)" stroke-width="3" fill="none" />
<path d="M30,-4 C33,-10 36,-15 35,-20" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M35,-3 C38,-8 41,-12 42,-16" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<!-- Eyes -->
<g transform="rotate(-10, 25, 12)">
<circle cx="25" cy="12" r="8" fill="white" />
<circle cx="25" cy="12" r="5" fill="black" />
<circle cx="23" cy="10" r="2" fill="white" />
<!-- Eyelid blinking animation -->
<path d="M17,12 C21,5 29,5 33,12" fill="none" stroke="url(#chameleonGradient)" stroke-width="1.5">
<animate attributeName="d" values="M17,12 C21,5 29,5 33,12;M17,12 C21,12 29,12 33,12;M17,12 C21,5 29,5 33,12"
dur="4s" repeatCount="indefinite" />
</path>
</g>
<!-- Mouth -->
<path d="M35,18 C38,22 42,23 45,22" stroke="#333" stroke-width="0.7" fill="none" />
<!-- Front legs -->
<path d="M-20,40 C-25,50 -30,65 -25,75" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
<path d="M-25,75 C-27,77 -30,77 -32,75" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M-25,75 C-23,77 -20,77 -18,75" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M0,35 C5,45 10,60 5,70" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
<path d="M5,70 C3,72 0,72 -2,70" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M5,70 C7,72 10,72 12,70" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<!-- Back legs -->
<path d="M-60,20 C-65,10 -70,0 -75,-5" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
<path d="M-75,-5 C-77,-7 -80,-7 -82,-5" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M-75,-5 C-73,-7 -70,-7 -68,-5" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M-40,5 C-45,-5 -50,-15 -55,-20" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
<path d="M-55,-20 C-57,-22 -60,-22 -62,-20" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<path d="M-55,-20 C-53,-22 -50,-22 -48,-20" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
<!-- Tail curling toward piano -->
<path d="M10,20 C30,30 60,20 90,30 C120,40 140,30 150,35 C160,40 168,45 175,30"
stroke="url(#chameleonGradient)" stroke-width="7" fill="none" stroke-linecap="round" />
<!-- Tail texture -->
<path d="M30,25 C40,24 50,22 60,25" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
<path d="M70,25 C80,24 90,22 100,25" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
<path d="M110,30 C120,29 130,28 140,31" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
<path d="M150,35 C155,34 160,32 165,32" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
<!-- Tail tip on piano key -->
<path d="M175,30 C178,28 181,26 184,29"
stroke="url(#chameleonGradient)" stroke-width="5" fill="none" stroke-linecap="round">
<animate attributeName="d" values="M175,30 C178,28 181,26 184,29;M175,30 C178,30 181,30 184,31;M175,30 C178,28 181,26 184,29"
dur="2s" repeatCount="indefinite" />
</path>
</g>
<!-- Musical notes floating around -->
<g>
<use href="#musicNote" x="150" y="60" width="15" height="30" fill="#333" opacity="0.7">
<animate attributeName="y" values="60;55;60" dur="3s" repeatCount="indefinite" />
</use>
<use href="#musicNote" x="180" y="40" width="15" height="30" fill="#333" opacity="0.7">
<animate attributeName="y" values="40;35;40" dur="4s" repeatCount="indefinite" />
</use>
<use href="#musicNote" x="215" y="70" width="15" height="30" fill="#333" opacity="0.7">
<animate attributeName="y" values="70;65;70" dur="3.5s" repeatCount="indefinite" />
</use>
<use href="#musicNote" x="240" y="50" width="12" height="24" fill="#333" opacity="0.6">
<animate attributeName="y" values="50;45;50" dur="2.5s" repeatCount="indefinite" />
</use>
</g>
<!-- Sound wave effect from the piano key being played -->
<g opacity="0.3">
<circle cx="236" cy="143" r="5" fill="none" stroke="#5a3cc0" stroke-width="0.5">
<animate attributeName="r" values="5;15;5" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;0;0.7" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="236" cy="143" r="10" fill="none" stroke="#5a3cc0" stroke-width="0.5">
<animate attributeName="r" values="10;20;10" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.5;0;0.5" dur="2s" repeatCount="indefinite" />
</circle>
</g>
<!-- Sparkle effects -->
<g filter="url(#sparkle)">
<circle cx="175" cy="100" r="1" fill="white" />
<circle cx="210" cy="80" r="1" fill="white" />
<circle cx="230" cy="120" r="1" fill="white" />
<circle cx="225" cy="95" r="1" fill="white" />
<circle cx="190" cy="120" r="1" fill="white" />
<circle cx="236" cy="143" r="1" fill="white">
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />
</circle>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Gradient definition -->
<defs>
<linearGradient id="chameleonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#76c7c0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#34a853;stop-opacity:1" />
</linearGradient>
<linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#34a853;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4285f4;stop-opacity:1" />
</linearGradient>
<radialGradient id="pianoGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#fff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#000;stop-opacity:1" />
</radialGradient>
</defs>
<!-- Draw chameleon's body -->
<ellipse cx="150" cy="150" rx="60" ry="40" fill="url(#chameleonGradient)" />
<!-- Draw eyes -->
<circle cx="130" cy="140" r="8" fill="#ffffff" />
<circle cx="130" cy="140" r="3" fill="#000000" />
<circle cx="170" cy="140" r="8" fill="#ffffff" />
<circle cx="170" cy="140" r="3" fill="#000000" />
<!-- Draw chameleon tail -->
<path d="M 150 190 Q 160 220 130 240 T 100 280 Q 170 220 190 250 T 230 260" fill="none" stroke="url(#tailGradient)" stroke-width="8" />
<!-- Draw piano -->
<path d="M 120 220 L 180 220 Q 190 210 180 200 L 120 200 Q 110 210 120 220 Z" fill="url(#pianoGradient)" />
<!-- Draw piano keys -->
<rect x="124" y="206" width="10" height="14" fill="#fff" />
<rect x="138" y="206" width="10" height="14" fill="#fff" />
<rect x="152" y="206" width="10" height="14" fill="#fff" />
<rect x="166" y="206" width="10" height="14" fill="#fff" />
<!-- Piano legs -->
<rect x="120" y="220" width="5" height="15" fill="#000" />
<rect x="175" y="220" width="5" height="15" fill="#000" />
<!-- Draw ambient effects -->
<ellipse cx="150" cy="50" rx="15" ry="35" fill="rgba(255, 215, 0, 0.5)" transform="rotate(-30 150 50)" />
<circle cx="50" cy="250" r="20" fill="rgba(255, 69, 0, 0.6)" />
<circle cx="250" cy="30" r="25" fill="rgba(65, 105, 225, 0.7)" />
</svg>
Judge's Analysis
Player 1's image displays a more identifiable chameleon with a clearly depicted grand piano, effectively adhering to the prompt.
The technical quality is higher, with a more detailed depiction and creative use of color and form.
Player 2’s image, while abstract, lacks a clear representation of the prompt elements, reducing its adherence and visual appeal.
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
"Surreal clock with melting wings, suspended in a candy sky"
"Dancing skyscrapers under a swirling, cosmic sky"
"Flying cactus wearing headphones"
"Mushroom with skyscrapers growing as windows"
"A penguin with a jetpack, soaring over an erupting volcano at sunset"
"A snail with a transparent shell showing a galaxy inside"