Creative Challenge
"Levitating teacup pouring stars into an open book"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="starGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff6b6b"/>
<stop offset="100%" stop-color="#ffc400"/>
</linearGradient>
<linearGradient id="bookGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f8f8f8"/>
<stop offset="100%" stop-color="#c6c6c6"/>
</linearGradient>
<radialGradient id="teacupGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ffcc80"/>
</radialGradient>
</defs>
<path d="M150 50 c0 -50 50 -50 50 0 0 50 -50 50 -50 0 z" fill="url(#teacupGradient)" stroke="#ff6b6b" stroke-width="2"/>
<g transform="translate(150 100)">
<circle r="2" fill="url(#starGradient)"/>
<circle r="2" fill="url(#starGradient)" transform="translate(20 10)"/>
<circle r="2" fill="url(#starGradient)" transform="translate(-20 10)"/>
<circle r="2" fill="url(#starGradient)" transform="translate(10 -20)"/>
<circle r="2" fill="url(#starGradient)" transform="translate(-10 -20)"/>
<circle r="2" fill="url(#starGradient)" transform="translate(30 -10)"/>
<circle r="2" fill="url(#starGradient)" transform="translate(-30 -10)"/>
</g>
<path d="M150 150 L100 200 L200 200 Z" fill="url(#bookGradient)" stroke="#000000" stroke-width="2"/>
<path d="M100 195 L150 210 L200 195" fill="url(#bookGradient)" stroke="#000000" stroke-width="2"/>
<path d="M148 95 c0 -20 20 -20 20 0 0 20 -20 20 -20 0 z" fill="url(#starGradient)" stroke="#ff6b6b" stroke-width="1"/>
<path d="M152 95 c0 -20 -20 -20 -20 0 0 20 20 20 20 0 z" fill="url(#starGradient)" stroke="#ff6b6b" stroke-width="1"/>
<path d="M149 95 c0 -20 10 -20 10 0 0 20 -10 20 -10 0 z" fill="url(#starGradient)" stroke="#ff6b6b" stroke-width="1"/>
<path d="M151 95 c0 -20 -10 -20 -10 0 0 20 10 20 10 0 z" fill="url(#starGradient)" stroke="#ff6b6b" stroke-width="1"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Definitions for reuse -->
<defs>
<!-- Star gradient -->
<linearGradient id="starGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffd82" />
<stop offset="100%" stop-color="#ffa3b1" />
</linearGradient>
<!-- Book paper gradient -->
<linearGradient id="pageGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f5f5f5" />
<stop offset="100%" stop-color="#e0e0e0" />
</linearGradient>
<!-- Magic stream gradient -->
<linearGradient id="streamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#9d4edd" />
<stop offset="50%" stop-color="#5a189a" />
<stop offset="100%" stop-color="#3c096c" />
</linearGradient>
<!-- Teacup shine gradient -->
<radialGradient id="cupShine" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
<!-- Star pattern for book -->
<pattern id="starPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M10 2L12 8L18 10L12 12L10 18L8 12L2 10L8 8Z" fill="url(#starGradient)" opacity="0.2"/>
</pattern>
<!-- Star shape for reuse -->
<path id="star" d="M10 0L13 6L19 7L14.5 12L16 18L10 15L4 18L5.5 12L1 7L7 6Z" />
<!-- Glow filter for stars -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Magic sparkle filter -->
<filter id="sparkle" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence type="fractalNoise" baseFrequency="0.15" numOctaves="3" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G" />
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#1a1a2e" />
<!-- Ambient stars in background -->
<g id="backgroundStars">
<circle cx="30" cy="40" r="1" fill="white" opacity="0.8" />
<circle cx="70" cy="25" r="0.8" fill="white" opacity="0.6" />
<circle cx="120" cy="15" r="1.2" fill="white" opacity="0.7" />
<circle cx="250" cy="50" r="1" fill="white" opacity="0.9" />
<circle cx="280" cy="90" r="0.7" fill="white" opacity="0.5" />
<circle cx="40" cy="100" r="1.3" fill="white" opacity="0.7" />
<circle cx="190" cy="30" r="0.9" fill="white" opacity="0.8" />
<circle cx="220" cy="70" r="1.1" fill="white" opacity="0.7" />
<circle cx="260" cy="120" r="0.8" fill="white" opacity="0.9" />
<circle cx="20" cy="200" r="1" fill="white" opacity="0.6" />
<circle cx="50" cy="240" r="0.7" fill="white" opacity="0.8" />
<circle cx="270" cy="220" r="1.2" fill="white" opacity="0.7" />
<circle cx="240" cy="250" r="0.9" fill="white" opacity="0.6" />
<circle cx="200" cy="280" r="1" fill="white" opacity="0.8" />
</g>
<!-- Open Book -->
<g id="book" transform="translate(150, 220) rotate(-5)">
<!-- Book binding -->
<rect x="-80" y="-60" width="160" height="80" rx="5" ry="5" fill="#4a4e69" />
<!-- Left page -->
<path d="M-80 -60 L0 -60 L0 20 L-80 20 Z" fill="url(#pageGradient)" />
<!-- Right page -->
<path d="M0 -60 L80 -60 L80 20 L0 20 Z" fill="url(#pageGradient)" />
<!-- Center crease -->
<line x1="0" y1="-60" x2="0" y2="20" stroke="#333" stroke-width="1" />
<!-- Book decoration with star pattern -->
<rect x="5" y="-55" width="70" height="70" fill="url(#starPattern)" opacity="0.8" />
<!-- Book page glow -->
<rect x="5" y="-55" width="70" height="70" fill="url(#streamGradient)" opacity="0.2" />
<!-- Page text (abstract lines) -->
<g fill="none" stroke="#333" stroke-width="0.5" opacity="0.7">
<line x1="-70" y1="-45" x2="-20" y2="-45" />
<line x1="-70" y1="-37" x2="-10" y2="-37" />
<line x1="-70" y1="-29" x2="-30" y2="-29" />
<line x1="-70" y1="-21" x2="-15" y2="-21" />
<line x1="-70" y1="-13" x2="-25" y2="-13" />
<line x1="-70" y1="-5" x2="-20" y2="-5" />
<line x1="-70" y1="3" x2="-10" y2="3" />
<line x1="-70" y1="11" x2="-30" y2="11" />
</g>
</g>
<!-- Levitating Teacup -->
<g id="teacup" transform="translate(150, 100)">
<!-- Teacup body -->
<ellipse cx="0" cy="0" rx="35" ry="20" fill="#c8b6ff" />
<path d="M-35 0 C-35 20, 35 20, 35 0" fill="#7b2cbf" />
<!-- Cup rim -->
<ellipse cx="0" cy="0" rx="35" ry="20" fill="none" stroke="#5a189a" stroke-width="2" />
<!-- Teacup handle -->
<path d="M35 -5 C50 -5, 50 10, 35 10" fill="none" stroke="#7b2cbf" stroke-width="4" stroke-linecap="round" />
<!-- Teacup shine -->
<ellipse cx="-10" cy="-5" rx="15" ry="8" fill="url(#cupShine)" opacity="0.6" />
<!-- Teacup inner glow -->
<ellipse cx="0" cy="0" rx="25" ry="12" fill="url(#streamGradient)" opacity="0.4" />
<!-- Levitation waves -->
<g opacity="0.7">
<path d="M-45 25 C-30 20, -15 22, 0 25 C15 28, 30 26, 45 21" fill="none" stroke="#c77dff" stroke-width="1" />
<path d="M-40 35 C-25 30, -10 32, 5 35 C20 38, 35 36, 50 31" fill="none" stroke="#c77dff" stroke-width="1" />
<path d="M-50 45 C-35 40, -20 42, -5 45 C10 48, 25 46, 40 41" fill="none" stroke="#c77dff" stroke-width="1" />
</g>
</g>
<!-- Magic Stream of stars -->
<g id="magicStream">
<!-- Main stream -->
<path d="M150 110 C160 140, 140 180, 150 190" fill="none" stroke="url(#streamGradient)" stroke-width="10" opacity="0.8" filter="url(#sparkle)" />
<!-- Animated stars in stream -->
<g filter="url(#starGlow)">
<use href="#star" transform="translate(148, 120) scale(0.5)" fill="url(#starGradient)">
<animateTransform attributeName="transform" type="translate"
from="148, 120" to="148, 170" dur="3s" begin="0s" repeatCount="indefinite" />
</use>
<use href="#star" transform="translate(152, 130) scale(0.4) rotate(45)" fill="url(#starGradient)">
<animateTransform attributeName="transform" type="translate"
from="152, 130" to="152, 180" dur="2.5s" begin="0.5s" repeatCount="indefinite" />
</use>
<use href="#star" transform="translate(146, 125) scale(0.3) rotate(90)" fill="url(#starGradient)">
<animateTransform attributeName="transform" type="translate"
from="146, 125" to="146, 175" dur="2s" begin="1s" repeatCount="indefinite" />
</use>
<use href="#star" transform="translate(154, 115) scale(0.6)" fill="url(#starGradent)">
<animateTransform attributeName="transform" type="translate"
from="154, 115" to="154, 165" dur="3.5s" begin="0.2s" repeatCount="indefinite" />
</use>
</g>
</g>
<!-- Stars floating onto the book -->
<g id="floatingStars">
<use href="#star" transform="translate(155, 195) scale(0.8)" fill="url(#starGradient)" opacity="0.9" filter="url(#starGlow)">
<animateTransform attributeName="transform" type="rotate"
from="0 155 195" to="360 155 195" dur="10s" repeatCount="indefinite" />
</use>
<use href="#star" transform="translate(170, 180) scale(0.6)" fill="url(#starGradient)" opacity="0.8" filter="url(#starGlow)">
<animateTransform attributeName="transform" type="rotate"
from="0 170 180" to="-360 170 180" dur="15s" repeatCount="indefinite" />
</use>
<use href="#star" transform="translate(140, 185) scale(0.7)" fill="url(#starGradient)" opacity="0.7" filter="url(#starGlow)">
<animateTransform attributeName="transform" type="rotate"
from="0 140 185" to="360 140 185" dur="12s" repeatCount="indefinite" />
</use>
<use href="#star" transform="translate(180, 190) scale(0.5)" fill="url(#starGradient)" opacity="0.9" filter="url(#starGlow)">
<animateTransform attributeName="transform" type="rotate"
from="0 180 190" to="-360 180 190" dur="8s" repeatCount="indefinite" />
</use>
</g>
<!-- More stars scattered on book and around -->
<g id="scatteredStars">
<use href="#star" transform="translate(190, 170) scale(0.3)" fill="url(#starGradient)" opacity="0.6" filter="url(#starGlow)" />
<use href="#star" transform="translate(130, 200) scale(0.25)" fill="url(#starGradient)" opacity="0.7" filter="url(#starGlow)" />
<use href="#star" transform="translate(160, 210) scale(0.2)" fill="url(#starGradient)" opacity="0.8" filter="url(#starGlow)" />
<use href="#star" transform="translate(185, 205) scale(0.15)" fill="url(#starGradient)" opacity="0.5" filter="url(#starGlow)" />
<use href="#star" transform="translate(120, 175) scale(0.25)" fill="url(#starGradient)" opacity="0.6" filter="url(#starGlow)" />
</g>
</svg>Judge's Analysis
Player 2's image is more visually appealing and adheres to the prompt more closely with a clear depiction of a teacup levitating and pouring stars into an open book.
The use of color and composition adds a magical and coherent atmosphere.
Player 1's image lacks detail and clarity, making it less effective in conveying the imaginative 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.
Similar Challenges
"Penguin in a bathtub wearing a monocle and top hat"
"Sailing cow on a lake made of lavender lemonade"
"A cat playing a violin on a floating lily pad"
"A clock tower made of melting candy under a starry night sky"
"Rainbow octopus knitting a cosmic scarf"
"Whimsical octopus juggling asteroids in outer space"
