Creative Challenge
"An apple balancing on the tip of a pencil, mid-air, with a single drop of water falling off it."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Background Gradient -->
<linearGradient id="bgGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a8e6ff"/>
<stop offset="100%" stop-color="#ffffff"/>
</linearGradient>
<!-- Apple Gradient -->
<radialGradient id="appleGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FF4D4D"/>
<stop offset="100%" stop-color="#B22222"/>
</radialGradient>
<!-- Pencil Wood Gradient -->
<linearGradient id="pencilGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FFEB3B"/>
<stop offset="100%" stop-color="#FFD700"/>
</linearGradient>
<!-- Metal Band Gradient -->
<linearGradient id="metalGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#C0C0C0"/>
<stop offset="100%" stop-color="#808080"/>
</linearGradient>
<!-- Graphite Lead Gradient -->
<linearGradient id="leadGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#555555"/>
<stop offset="100%" stop-color="#222222"/>
</linearGradient>
<!-- Eraser Gradient -->
<linearGradient id="eraserGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#F8BBD0"/>
<stop offset="100%" stop-color="#E91E63"/>
</linearGradient>
<!-- Water Drop Gradient -->
<radialGradient id="waterGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#A7D8FF"/>
<stop offset="100%" stop-color="#4A90E2"/>
</radialGradient>
<!-- Drop Shadow Filter -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGradient)"/>
<!-- Pencil (balanced mid-air) -->
<g id="pencil">
<!-- Pencil Tip: the sharp point where the apple balances -->
<polygon points="150,130 145,140 155,140" fill="url(#pencilGradient)"/>
<!-- Inner graphite core on the tip -->
<polygon points="150,132 147,138 153,138" fill="url(#leadGradient)"/>
<!-- Pencil Shaft -->
<rect x="145" y="140" width="10" height="95" fill="url(#pencilGradient)"/>
<!-- Metal Band (between shaft and eraser) -->
<rect x="145" y="235" width="10" height="5" fill="url(#metalGradient)"/>
<!-- Eraser -->
<rect x="145" y="240" width="10" height="10" fill="url(#eraserGradient)"/>
</g>
<!-- Apple -->
<g id="apple" filter="url(#shadow)">
<!-- Apple body with a pointed bottom perfectly matching the pencil tip -->
<path d="M150,70
C130,70 115,95 150,130
C185,95 170,70 150,70 Z" fill="url(#appleGradient)"/>
<!-- Stem -->
<path d="M150,70 L150,55" stroke="#8B4513" stroke-width="2" stroke-linecap="round"/>
<!-- Leaf -->
<ellipse cx="155" cy="60" rx="6" ry="3" fill="#228B22" transform="rotate(-30 155 60)"/>
<!-- Glossy Highlight -->
<ellipse cx="140" cy="80" rx="5" ry="2.5" fill="#ffffff" opacity="0.5"/>
</g>
<!-- Single Water Drop Falling Off the Apple -->
<g id="waterDrop" transform="translate(165,90) scale(0.8)">
<path d="M10,0
C13,8 17,8 20,0
C17,4 13,4 10,0 Z" fill="url(#waterGradient)"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Background -->
<radialGradient id="bgGrad" cx="0.5" cy="0.25" r="1">
<stop offset="0%" stop-color="#e6f6ff"/>
<stop offset="100%" stop-color="#ffffff"/>
</radialGradient>
<!-- Apple -->
<radialGradient id="appleRed" cx="0.35" cy="0.35" r="0.7">
<stop offset="0%" stop-color="#ff6666"/>
<stop offset="45%" stop-color="#e62020"/>
<stop offset="80%" stop-color="#a30e0e"/>
<stop offset="100%" stop-color="#5c0000"/>
</radialGradient>
<radialGradient id="appleHighlight" cx="0.25" cy="0.2" r="0.6">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.85"/>
<stop offset="30%" stop-color="#ffffff" stop-opacity="0.45"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<!-- Leaf -->
<linearGradient id="leafGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#54c137"/>
<stop offset="100%" stop-color="#17661c"/>
</linearGradient>
<!-- Pencil -->
<linearGradient id="pencilBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fff276"/>
<stop offset="25%" stop-color="#ffdb3f"/>
<stop offset="75%" stop-color="#e0b732"/>
<stop offset="100%" stop-color="#c29720"/>
</linearGradient>
<linearGradient id="pencilWood" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#deb887"/>
<stop offset="100%" stop-color="#9c6539"/>
</linearGradient>
<linearGradient id="pencilLead" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6d6d6d"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<!-- Water drop -->
<radialGradient id="waterDrop" cx="0.4" cy="0.3" r="0.7">
<stop offset="0%" stop-color="#c5efff"/>
<stop offset="60%" stop-color="#46c4ff"/>
<stop offset="100%" stop-color="#0a7ecc"/>
</radialGradient>
<!-- Shadow filter -->
<filter id="shadowBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4"/>
</filter>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#bgGrad)"/>
<!-- Apple -->
<g transform="translate(150 80)">
<path d="M0 -48
C27 -48 46 -30 46 0
C46 44 27 70 0 70
C-27 70 -46 44 -46 0
C-46 -30 -27 -48 0 -48Z"
fill="url(#appleRed)"/>
<!-- Glossy highlight -->
<ellipse cx="-8" cy="-12" rx="28" ry="40" fill="url(#appleHighlight)" transform="rotate(-25)"/>
<!-- Stem -->
<rect x="-2" y="-56" width="4" height="14" rx="2" fill="#4d2a0c"/>
<!-- Leaf -->
<path d="M0 -56
C18 -78 56 -62 36 -28
C22 -6 -8 -18 0 -56Z"
fill="url(#leafGrad)" stroke="#155314" stroke-width="1"/>
</g>
<!-- Pencil (tip at (150,150)) -->
<g transform="translate(150 150)">
<!-- Lead -->
<polygon points="0,0 -3,8 3,8" fill="url(#pencilLead)"/>
<!-- Wood -->
<polygon points="-6,8 6,8 0,24" fill="url(#pencilWood)"/>
<!-- Body -->
<rect x="-6" y="24" width="12" height="90" rx="2" fill="url(#pencilBody)"/>
<!-- Accent stripes -->
<rect x="-6" y="40" width="12" height="3" fill="#444" opacity="0.3"/>
<rect x="-6" y="50" width="12" height="3" fill="#444" opacity="0.3"/>
</g>
<!-- Falling water drop -->
<g transform="translate(150 170) rotate(6)">
<path d="M0 0
C5 -12 12 -18 0 -30
C-12 -18 -5 -12 0 0Z"
fill="url(#waterDrop)"/>
<!-- highlight -->
<ellipse cx="-2" cy="-14" rx="4" ry="8" fill="#ffffff" opacity="0.4"/>
</g>
<!-- Ground shadow -->
<ellipse cx="150" cy="260" rx="55" ry="12" fill="#000000" opacity="0.15" filter="url(#shadowBlur)"/>
</svg>Judge's Analysis
Player 2's submission demonstrates superior technical quality with more refined shading and details, such as the realistic water droplet and the apple's texture.
Additionally, the composition is visually balanced and adheres closely to the prompt, creating a more dynamic and appealing representation of the concept.
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.