Creative Challenge
"Origami crane made of folded galaxy sky, stars twinkling from its paper creases"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="galaxyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a0f3c;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4a1010;stop-opacity:1" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="ripple">
<feDiffuseLighting in="SourceAlpha" surfaceScale="5" diffuseConstant="0.2">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
</filter>
</defs>
<rect width="300" height="300" fill="url(#galaxyGradient)"/>
<!-- Crane body -->
<path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
<!-- Wings -->
<path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
<!-- Tail feathers -->
<path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
<!-- Head and neck -->
<path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
<!-- Stars -->
<g filter="url(#glow)">
<circle cx="50" cy="50" r="1" fill="white"/>
<circle cx="250" cy="250" r="1" fill="white"/>
<circle cx="150" cy="150" r="1" fill="white"/>
<circle cx="100" cy="200" r="1" fill="white"/>
<circle cx="200" cy="100" r="1" fill="white"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Galaxy gradients -->
<linearGradient id="galaxyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a0a2a" />
<stop offset="20%" stop-color="#190a4d" />
<stop offset="40%" stop-color="#3b0e6f" />
<stop offset="60%" stop-color="#7b1e7c" />
<stop offset="80%" stop-color="#c33764" />
<stop offset="100%" stop-color="#1d2671" />
</linearGradient>
<linearGradient id="galaxyGradient2" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1d2671" />
<stop offset="20%" stop-color="#c33764" />
<stop offset="40%" stop-color="#7b1e7c" />
<stop offset="60%" stop-color="#3b0e6f" />
<stop offset="80%" stop-color="#190a4d" />
<stop offset="100%" stop-color="#0a0a2a" />
</linearGradient>
<!-- Nebula pattern -->
<radialGradient id="nebulaGlow" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ff59c7" stop-opacity="0.7" />
<stop offset="70%" stop-color="#614385" stop-opacity="0.3" />
<stop offset="100%" stop-color="#190a4d" stop-opacity="0" />
</radialGradient>
<!-- Star glow filter -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
<!-- Crane glow -->
<filter id="craneGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0.2 0 1 0 0 0.0 0 0 1 0 0.5 0 0 0 5 -1" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#0a0a1a" />
<!-- Background stars -->
<g id="backgroundStars" fill="white">
<circle cx="20" cy="30" r="0.8" opacity="0.6" />
<circle cx="40" cy="50" r="0.6" opacity="0.5" />
<circle cx="60" cy="20" r="1" opacity="0.7" />
<circle cx="80" cy="40" r="0.5" opacity="0.4" />
<circle cx="100" cy="15" r="0.7" opacity="0.6" />
<circle cx="120" cy="35" r="0.9" opacity="0.5" />
<circle cx="140" cy="25" r="0.4" opacity="0.7" />
<circle cx="160" cy="10" r="0.8" opacity="0.5" />
<circle cx="180" cy="45" r="0.6" opacity="0.6" />
<circle cx="200" cy="25" r="0.7" opacity="0.4" />
<circle cx="220" cy="15" r="0.9" opacity="0.7" />
<circle cx="240" cy="40" r="0.5" opacity="0.5" />
<circle cx="260" cy="30" r="0.8" opacity="0.6" />
<circle cx="280" cy="20" r="0.6" opacity="0.7" />
<circle cx="15" cy="60" r="0.7" opacity="0.5" />
<circle cx="25" cy="80" r="0.5" opacity="0.6" />
<circle cx="10" cy="100" r="0.9" opacity="0.4" />
<circle cx="30" cy="120" r="0.4" opacity="0.7" />
<circle cx="15" cy="140" r="0.7" opacity="0.5" />
<circle cx="25" cy="160" r="0.5" opacity="0.6" />
<circle cx="10" cy="180" r="0.9" opacity="0.4" />
<circle cx="30" cy="200" r="0.4" opacity="0.7" />
<circle cx="15" cy="220" r="0.7" opacity="0.5" />
<circle cx="25" cy="240" r="0.5" opacity="0.6" />
<circle cx="10" cy="260" r="0.9" opacity="0.4" />
<circle cx="30" cy="280" r="0.4" opacity="0.7" />
<circle cx="270" cy="60" r="0.7" opacity="0.5" />
<circle cx="285" cy="80" r="0.5" opacity="0.6" />
<circle cx="270" cy="100" r="0.9" opacity="0.4" />
<circle cx="285" cy="120" r="0.4" opacity="0.7" />
<circle cx="270" cy="140" r="0.7" opacity="0.5" />
<circle cx="285" cy="160" r="0.5" opacity="0.6" />
<circle cx="270" cy="180" r="0.9" opacity="0.4" />
<circle cx="285" cy="200" r="0.4" opacity="0.7" />
<circle cx="270" cy="220" r="0.7" opacity="0.5" />
<circle cx="285" cy="240" r="0.5" opacity="0.6" />
<circle cx="270" cy="260" r="0.9" opacity="0.4" />
<circle cx="285" cy="280" r="0.4" opacity="0.7" />
<circle cx="60" cy="285" r="0.7" opacity="0.5" />
<circle cx="80" cy="270" r="0.5" opacity="0.6" />
<circle cx="100" cy="285" r="0.9" opacity="0.4" />
<circle cx="120" cy="270" r="0.4" opacity="0.7" />
<circle cx="140" cy="285" r="0.7" opacity="0.5" />
<circle cx="160" cy="270" r="0.5" opacity="0.6" />
<circle cx="180" cy="285" r="0.9" opacity="0.4" />
<circle cx="200" cy="270" r="0.4" opacity="0.7" />
<circle cx="220" cy="285" r="0.7" opacity="0.5" />
<circle cx="240" cy="270" r="0.5" opacity="0.6" />
</g>
<!-- Crane with glow effect -->
<g id="craneWithGlow" filter="url(#craneGlow)">
<!-- Crane body - folded paper effect -->
<g id="crane">
<!-- Left wing -->
<path d="M150,150 L50,120 L30,210 L120,170 Z" fill="url(#galaxyGradient)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
<!-- Right wing -->
<path d="M150,150 L250,120 L270,210 L180,170 Z" fill="url(#galaxyGradient2)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
<!-- Body -->
<path d="M120,170 L150,150 L180,170 L150,200 Z" fill="url(#galaxyGradient)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
<!-- Head and neck -->
<path d="M150,150 C150,140 145,130 150,120 L155,110 L150,105 L145,110 L150,120" fill="url(#galaxyGradient2)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
<!-- Beak - enhanced definition -->
<path d="M148,105 L150,100 L152,105 Z" fill="#ffffff" opacity="0.8" />
<!-- Tail -->
<path d="M150,200 L145,220 L150,230 L155,220 L150,200" fill="url(#galaxyGradient)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
</g>
<!-- Nebula cloud overlays -->
<g id="nebulaClouds" opacity="0.6">
<ellipse cx="100" cy="140" rx="60" ry="40" fill="url(#nebulaGlow)" />
<ellipse cx="200" cy="140" rx="60" ry="40" fill="url(#nebulaGlow)" />
<ellipse cx="150" cy="190" rx="40" ry="30" fill="url(#nebulaGlow)" />
</g>
<!-- Paper fold lines -->
<g id="foldLines" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5" fill="none">
<line x1="150" y1="150" x2="50" y2="120" />
<line x1="150" y1="150" x2="250" y2="120" />
<line x1="150" y1="150" x2="150" y2="200" />
<line x1="30" y1="210" x2="120" y2="170" />
<line x1="270" y1="210" x2="180" y2="170" />
<path d="M120,170 C135,160 165,160 180,170" />
</g>
<!-- Additional fold lines -->
<g id="additionalFolds" stroke="#ffffff" stroke-opacity="0.2" stroke-width="0.3" stroke-dasharray="2,2" fill="none">
<path d="M50,120 C70,100 90,90 150,110" />
<path d="M250,120 C230,100 210,90 150,110" />
<path d="M30,210 C60,190 90,180 150,200" />
<path d="M270,210 C240,190 210,180 150,200" />
<path d="M150,150 C140,140 140,120 150,110" />
<path d="M150,150 C160,140 160,120 150,110" />
<path d="M150,150 C140,160 140,180 150,200" />
<path d="M150,150 C160,160 160,180 150,200" />
</g>
</g>
<!-- Stars along creases -->
<g id="stars">
<!-- Twinkling stars -->
<circle cx="50" cy="120" r="1" fill="white" filter="url(#starGlow)" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.1;0.9" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="80" cy="135" r="0.8" fill="white" filter="url(#starGlow)" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="110" cy="160" r="1.2" fill="white" filter="url(#starGlow)" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="30" cy="210" r="1" fill="white" filter="url(#starGlow)" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="3.5s" repeatCount="indefinite" />
</circle>
<circle cx="250" cy="120" r="1" fill="white" filter="url(#starGlow)" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.1;0.9" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="135" r="0.8" fill="white" filter="url(#starGlow)" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="190" cy="160" r="1.2" fill="white" filter="url(#starGlow)" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="270" cy="210" r="1" fill="white" filter="url(#starGlow)" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="150" cy="180" r="1.1" fill="white" filter="url(#starGlow)" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.4;0.9" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="150" cy="120" r="0.9" fill="white" filter="url(#starGlow)" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="150" cy="105" r="1" fill="white" filter="url(#starGlow)" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.3;0.9" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="150" cy="230" r="1" fill="white" filter="url(#starGlow)" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.2;0.8" dur="3s" repeatCount="indefinite" />
</circle>
</g>
<!-- Scattered stars in the galaxy body -->
<g id="moreStars" fill="white">
<circle cx="90" cy="140" r="0.5" opacity="0.8" />
<circle cx="110" cy="130" r="0.6" opacity="0.7" />
<circle cx="130" cy="160" r="0.4" opacity="0.9" />
<circle cx="70" cy="160" r="0.5" opacity="0.8" />
<circle cx="60" cy="180" r="0.7" opacity="0.6" />
<circle cx="210" cy="140" r="0.5" opacity="0.8" />
<circle cx="190" cy="130" r="0.6" opacity="0.7" />
<circle cx="170" cy="160" r="0.4" opacity="0.9" />
<circle cx="230" cy="160" r="0.5" opacity="0.8" />
<circle cx="240" cy="180" r="0.7" opacity="0.6" />
<circle cx="150" cy="170" r="0.6" opacity="0.8" />
<circle cx="140" cy="185" r="0.5" opacity="0.7" />
<circle cx="160" cy="185" r="0.5" opacity="0.7" />
<circle cx="150" cy="130" r="0.6" opacity="0.8" />
<circle cx="145" cy="115" r="0.5" opacity="0.7" />
<circle cx="155" cy="115" r="0.5" opacity="0.7" />
</g>
<!-- Cosmic dust particles -->
<g id="cosmicDust" fill="white" opacity="0.5">
<g id="dustParticles">
<circle cx="100" cy="150" r="0.3" />
<circle cx="120" cy="140" r="0.2" />
<circle cx="140" cy="160" r="0.3" />
<circle cx="160" cy="140" r="0.2" />
<circle cx="180" cy="160" r="0.3" />
<circle cx="200" cy="150" r="0.3" />
<circle cx="80" cy="170" r="0.2" />
<circle cx="220" cy="170" r="0.2" />
<circle cx="120" cy="120" r="0.3" />
<circle cx="180" cy="120" r="0.3" />
<circle cx="150" cy="190" r="0.2" />
</g>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 150 150"
to="360 150 150"
dur="180s"
repeatCount="indefinite"
/>
</g>
<!-- Glowing star at the center of the crane -->
<circle cx="150" cy="150" r="3" fill="url(#nebulaGlow)" filter="url(#starGlow)">
<animate attributeName="r" values="3;3.5;3" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite" />
</circle>
</svg>
Judge's Analysis
Player 2's submission captures the essence of an origami crane with a galaxy theme, using vibrant colors and a dynamic design that suggests folded paper.
The use of stars within the design enhances the celestial theme, aligning well with the prompt.
Player 1's image lacks clarity and does not effectively convey the concept of an origami crane made from a galaxy sky.
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
"Astronaut squirrel juggling planets, in a geometric style"
"Dandelion made of clock gears, in a minimalist steampunk style"
"A geometric zebra made entirely of triangles drinking neon water from a pixelated oasis"
"A clock with melting numbers in a surreal desert landscape"
"A giraffe wearing a spacesuit, floating among colorful planets"
"A flamingo in a top hat playing the violin under a moonlit sky"