Creative Challenge
"A cat juggling planets in space."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="planet1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="orange" />
</radialGradient>
<radialGradient id="planet2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="lightblue" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="planet3" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="lightgreen" />
<stop offset="100%" stop-color="green" />
</radialGradient>
<pattern id="stars" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="1" fill="white" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#stars)" />
<circle cx="100" cy="150" r="30" fill="url(#planet1)" />
<circle cx="150" cy="100" r="20" fill="url(#planet2)" />
<circle cx="200" cy="180" r="25" fill="url(#planet3)" />
<path d="M120 200 c 0 -50 50 -70 80 -40 c 30 30 -20 100 -50 70 z" fill="black" />
<path d="M125 180 c 5 20 30 20 35 0" fill="pink" stroke="black" />
<circle cx="140" cy="170" r="5" fill="white" />
<circle cx="155" cy="170" r="5" fill="white" />
<path d="M140 175 c 5 5 10 5 15 0" stroke="black" stroke-width="2" fill="none" />
<ellipse cx="145" cy="210" rx="10" ry="5" fill="red" />
<path d="M95 210 c 10 -10 20 -15 30 0" stroke="black" stroke-width="3" fill="none" />
<path d="M185 210 c -10 -10 -20 -15 -30 0" stroke="black" stroke-width="3" fill="none" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Background Gradient -->
<radialGradient id="spaceGrad" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#0b0c2a" />
<stop offset="100%" stop-color="#000010" />
</radialGradient>
<!-- Stars Pattern -->
<pattern id="stars" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1.2" fill="white" opacity="0.9"/>
<circle cx="15" cy="14" r="0.7" fill="white" opacity="0.6"/>
<circle cx="8" cy="18" r="1" fill="white" opacity="0.8"/>
</pattern>
<!-- Planet Gradients -->
<radialGradient id="planet1Grad" cx="60%" cy="40%" r="80%">
<stop offset="0%" stop-color="#ff9a76"/>
<stop offset="100%" stop-color="#b54822"/>
</radialGradient>
<radialGradient id="planet2Grad" cx="40%" cy="60%" r="70%">
<stop offset="0%" stop-color="#60d4f7"/>
<stop offset="100%" stop-color="#01567f"/>
</radialGradient>
<radialGradient id="planet3Grad" cx="50%" cy="50%" r="75%">
<stop offset="0%" stop-color="#c4e060"/>
<stop offset="100%" stop-color="#637400"/>
</radialGradient>
<radialGradient id="planet4Grad" cx="55%" cy="45%" r="70%">
<stop offset="0%" stop-color="#ffaa44"/>
<stop offset="100%" stop-color="#773300"/>
</radialGradient>
<radialGradient id="catBodyGrad" cx="50%" cy="30%" r="60%">
<stop offset="0%" stop-color="#fed8aa" />
<stop offset="100%" stop-color="#b36e27" />
</radialGradient>
<radialGradient id="catShadow" cx="50%" cy="60%" r="85%">
<stop offset="0%" stop-color="rgba(0,0,0,0.2)" />
<stop offset="100%" stop-color="rgba(0,0,0,0)" />
</radialGradient>
<!-- Planet ring pattern -->
<pattern id="ringsPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(40)">
<path d="M0 2 L4 2" stroke="#FFF7E1" stroke-width="0.6" opacity="0.3"/>
</pattern>
<!-- Eye gradients -->
<radialGradient id="eyeGrad" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#080808" />
</radialGradient>
<!-- Shadow filter for planets -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" >
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#spaceGrad)" />
<rect width="300" height="300" fill="url(#stars)" />
<!-- Far star cluster - soft glows -->
<g opacity="0.1">
<circle cx="50" cy="50" r="12" fill="#f7f3ff" filter="url(#shadow)" />
<circle cx="200" cy="80" r="15" fill="#9bc5f7" filter="url(#shadow)" />
<circle cx="270" cy="220" r="9" fill="#d1f9f1" filter="url(#shadow)" />
</g>
<!-- Cat's body -->
<g id="cat" transform="translate(85,120)">
<!-- Tail: curled and dynamic -->
<path d="M15 95 C5 90, 15 60, 30 70 S40 100 28 110"
stroke="#b36e27" stroke-width="10" fill="none" stroke-linecap="round" />
<path d="M15 95 C5 90, 15 60, 30 70 S40 100 28 110"
stroke="#fed8aa" stroke-width="7" fill="none" stroke-linecap="round" />
<!-- Body shape -->
<ellipse cx="40" cy="75" rx="40" ry="50" fill="url(#catBodyGrad)" />
<ellipse cx="40" cy="75" rx="36" ry="46" fill="url(#catShadow)" />
<!-- Body pattern spots -->
<circle cx="25" cy="100" r="6" fill="#b36e27" opacity="0.8" />
<circle cx="55" cy="90" r="10" fill="#a05b19" opacity="0.7" />
<circle cx="60" cy="120" r="5" fill="#bb7a30" opacity="0.6" />
<!-- Chest fur flick -->
<path d="M20 50 Q30 65 15 75" stroke="#f4d5a8" stroke-width="3" stroke-linecap="round" fill="none" />
<path d="M25 52 Q35 68 22 78" stroke="#edc58a" stroke-width="2" stroke-linecap="round" fill="none" />
<!-- Head -->
<circle cx="40" cy="30" r="28" fill="url(#catBodyGrad)" stroke="#b36e27" stroke-width="1.3" />
<circle cx="40" cy="30" r="25" fill="url(#catShadow)" />
<!-- Ear shapes -->
<path d="M20 7 L33 15 L27 36 Z" fill="#fed8aa" stroke="#b36e27" stroke-width="1" />
<path d="M60 7 L47 15 L53 36 Z" fill="#fed8aa" stroke="#b36e27" stroke-width="1" />
<!-- Inner ear -->
<path d="M23 12 L31 25 L26 33 Z" fill="#e8ac5b" />
<path d="M57 12 L49 25 L54 33 Z" fill="#e8ac5b" />
<!-- Face details -->
<!-- Eyes -->
<ellipse cx="28" cy="32" rx="8" ry="5" fill="url(#eyeGrad)" />
<ellipse cx="52" cy="32" rx="8" ry="5" fill="url(#eyeGrad)" />
<!-- Pupils -->
<ellipse cx="28" cy="32" rx="3" ry="5" fill="#0f0f0f" />
<ellipse cx="52" cy="32" rx="3" ry="5" fill="#0f0f0f" />
<circle cx="30" cy="30" r="1.7" fill="#e0e0f3" opacity="0.75" />
<circle cx="54" cy="30" r="1.7" fill="#e0e0f3" opacity="0.75" />
<!-- Whiskers -->
<path d="M10 40 L0 43" stroke="#6a3d10" stroke-width="1.5" stroke-linecap="round" />
<path d="M10 37 L0 37" stroke="#6a3d10" stroke-width="1.5" stroke-linecap="round" />
<path d="M10 35 L0 30" stroke="#6a3d10" stroke-width="1.5" stroke-linecap="round" />
<path d="M70 40 L80 43" stroke="#6a3d10" stroke-width="1.5" stroke-linecap="round" />
<path d="M70 37 L80 37" stroke="#6a3d10" stroke-width="1.5" stroke-linecap="round" />
<path d="M70 35 L80 30" stroke="#6a3d10" stroke-width="1.5" stroke-linecap="round" />
<!-- Nose -->
<path d="M38 40 L42 40 L40 44 Z" fill="#b75b0d" />
<path d="M40 44 L40 48" stroke="#853a07" stroke-width="1" />
<!-- Mouth -->
<path d="M35 47 Q40 50 45 47" stroke="#853a07" stroke-width="1" fill="none" />
</g>
<!-- Arms juggling planets -->
<g id="arms" transform="translate(85,120)">
<!-- Left arm - curved upwards -->
<path d="M15 65 Q10 10 42 20" stroke="#b36e27" stroke-width="11" stroke-linecap="round" fill="none" />
<path d="M15 65 Q10 10 42 20" stroke="#fed8aa" stroke-width="7" stroke-linecap="round" fill="none" />
<!-- Left paw catching planets -->
<circle cx="42" cy="20" r="10" fill="url(#catBodyGrad)" stroke="#b36e27" stroke-width="1" />
<circle cx="42" cy="20" r="8" fill="url(#catShadow)" />
<!-- Right arm - curved upwards mirrored -->
<path d="M65 65 Q80 5 60 20" stroke="#b36e27" stroke-width="11" stroke-linecap="round" fill="none" />
<path d="M65 65 Q80 5 60 20" stroke="#fed8aa" stroke-width="7" stroke-linecap="round" fill="none" />
<!-- Right paw catching planets -->
<circle cx="60" cy="20" r="10" fill="url(#catBodyGrad)" stroke="#b36e27" stroke-width="1" />
<circle cx="60" cy="20" r="8" fill="url(#catShadow)" />
</g>
<!-- Strings of juggling give a dynamic feel -->
<path d="M42 20 Q55 5 90 40" stroke="#68e0ff" stroke-width="1.4" fill="none" opacity="0.6" />
<path d="M60 20 Q45 10 80 60" stroke="#ff9a76" stroke-width="1.4" fill="none" opacity="0.6" />
<!-- Planets -->
<g id="planets">
<!-- Planet 1: small fiery orange, top left -->
<circle cx="93" cy="42" r="12" fill="url(#planet1Grad)" filter="url(#shadow)" />
<circle cx="93" cy="42" r="6" fill="rgba(255,255,255,0.25)" />
<circle cx="85" cy="50" r="1.8" fill="#fff" opacity="0.75" />
<circle cx="102" cy="35" r="2.6" fill="#fff" opacity="0.4" />
<!-- subtle rings -->
<ellipse cx="93" cy="42" rx="18" ry="5" fill="url(#ringsPattern)" opacity="0.45" />
<!-- Planet 2: icy blue, bottom right -->
<circle cx="80" cy="63" r="14" fill="url(#planet2Grad)" filter="url(#shadow)" />
<circle cx="70" cy="70" r="5.5" fill="rgba(255,255,255,0.18)" />
<circle cx="83" cy="53" r="2.1" fill="#dbeeff" opacity="0.8" />
<!-- rings -->
<ellipse cx="80" cy="63" rx="22" ry="6" fill="url(#ringsPattern)" opacity="0.38" />
<!-- Planet 3: forest green, mid-air center right -->
<circle cx="120" cy="55" r="11" fill="url(#planet3Grad)" filter="url(#shadow)" />
<circle cx="128" cy="60" r="4" fill="rgba(255,255,255,0.15)" />
<circle cx="115" cy="45" r="2.5" fill="#d4f090" opacity="0.7" />
<!-- planet 4: warm yellow Saturn-like, floating top right -->
<circle cx="135" cy="30" r="10" fill="url(#planet4Grad)" filter="url(#shadow)" />
<!-- thick rings -->
<ellipse cx="135" cy="30" rx="20" ry="7" fill="#ffaa44" opacity="0.3"/>
<ellipse cx="135" cy="30" rx="18" ry="5" fill="url(#ringsPattern)" opacity="0.5"/>
</g>
<!-- Motion lines around planets to enhance juggling movement -->
<g stroke="#ffffffaa" stroke-width="1" fill="none" opacity="0.6">
<path d="M93,42 m-15,0 a15,15 0 1,1 30,0" />
<path d="M80,63 m-18,0 a18,18 0 1,0 36,0" />
<path d="M120,55 m-14,0 a14,14 0 1,1 28,0" />
<path d="M135,30 m-15,0 a15,15 0 1,0 30,0" />
</g>
<!-- Extra small twinkling stars around cat -->
<g fill="white" opacity="0.9">
<circle cx="70" cy="110" r="1.4" />
<circle cx="60" cy="70" r="1.2" />
<circle cx="90" cy="100" r="1.3" />
<circle cx="40" cy="140" r="1.1" />
<circle cx="120" cy="140" r="1.5" />
<circle cx="110" cy="95" r="1.2" />
<circle cx="30" cy="120" r="1.4" />
</g>
</svg>Judge's Analysis
Player 2's submission is more detailed, creative, and adheres closely to the prompt of a cat juggling planets in space.
The design clearly depicts a cat with planets in motion, enhanced by a starry background, showcasing technical quality and visual appeal.
Player 1's submission is simpler and does not convey the prompt as effectively or with as much creativity.
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.
