Back

SVG Drawing Match #155

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Robot octopus juggling cosmic planets"

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions -->
  <defs>
    <!-- Space background -->
    <radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#1a0a2e" />
      <stop offset="50%" stop-color="#0d0221" />
      <stop offset="100%" stop-color="#050108" />
    </radialGradient>
    
    <!-- Robot body metal -->
    <linearGradient id="metalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#a8a8a8" />
      <stop offset="45%" stop-color="#c0c0c0" />
      <stop offset="55%" stop-color="#b0b0b0" />
      <stop offset="100%" stop-color="#787878" />
    </linearGradient>
    
    <!-- Planet gradients -->
    <radialGradient id="planet1Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff8f00" />
      <stop offset="100%" stop-color="#c43e00" />
    </radialGradient>
    
    <radialGradient id="planet2Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#0090ff" />
      <stop offset="100%" stop-color="#0038c4" />
    </radialGradient>
    
    <radialGradient id="planet3Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#12dd90" />
      <stop offset="100%" stop-color="#067158" />
    </radialGradient>
    
    <radialGradient id="planet4Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#f0d000" />
      <stop offset="100%" stop-color="#ba8000" />
    </radialGradient>
    
    <radialGradient id="planet5Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff40c0" />
      <stop offset="100%" stop-color="#a00078" />
    </radialGradient>
    
    <!-- Effects -->
    <filter id="eyeGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="energyGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="1.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Patterns -->
    <pattern id="starsPattern" patternUnits="userSpaceOnUse" width="50" height="50">
      <circle cx="10" cy="10" r="0.5" fill="white" />
      <circle cx="20" cy="25" r="0.3" fill="white" />
      <circle cx="40" cy="15" r="0.4" fill="white" />
      <circle cx="30" cy="40" r="0.3" fill="white" />
      <circle cx="45" cy="45" r="0.2" fill="white" />
      <circle cx="5" cy="30" r="0.3" fill="white" />
    </pattern>
    
    <pattern id="circuitPattern" patternUnits="userSpaceOnUse" width="20" height="20">
      <path d="M5,0 L5,5 L0,5 M15,0 L15,5 L20,5 M0,15 L5,15 L5,20 M20,15 L15,15 L15,20" stroke="#444" stroke-width="0.5" fill="none"/>
    </pattern>
  </defs>
  
  <!-- Space background -->
  <rect width="300" height="300" fill="url(#spaceGradient)" />
  <rect width="300" height="300" fill="url(#starsPattern)" opacity="0.8" />
  
  <!-- Distant nebula -->
  <ellipse cx="50" cy="50" rx="80" ry="40" fill="#8040a0" opacity="0.1" />
  <ellipse cx="250" cy="230" rx="70" ry="50" fill="#4080a0" opacity="0.1" />
  
  <!-- Space dust and small asteroids -->
  <g id="spaceDust">
    <path d="M30,40 L33,42 L32,45 L29,45 L28,43 Z" fill="#aaa" opacity="0.5" />
    <path d="M260,70 L265,72 L266,77 L261,80 L257,76 Z" fill="#aaa" opacity="0.5" />
    <path d="M200,230 L205,228 L208,232 L204,236 L200,234 Z" fill="#aaa" opacity="0.5" />
    <path d="M80,260 L82,265 L78,267 L75,263 L77,260 Z" fill="#aaa" opacity="0.5" />
    <circle cx="40" cy="200" r="2" fill="#aaa" opacity="0.5" />
    <circle cx="270" cy="180" r="3" fill="#aaa" opacity="0.5" />
    <circle cx="25" cy="120" r="1.5" fill="#aaa" opacity="0.5" />
    <circle cx="280" cy="40" r="2.5" fill="#aaa" opacity="0.5" />
  </g>
  
  <!-- Juggling motion paths -->
  <path d="M150,60 Q100,20 50,80 Q30,120 60,120" fill="none" stroke="white" stroke-width="1" stroke-dasharray="2,2" opacity="0.6" />
  <path d="M150,60 Q200,20 250,80 Q270,120 240,120" fill="none" stroke="white" stroke-width="1" stroke-dasharray="2,2" opacity="0.6" />
  <path d="M60,120 Q80,150 70,190" fill="none" stroke="white" stroke-width="1" stroke-dasharray="2,2" opacity="0.6" />
  <path d="M240,120 Q220,150 230,190" fill="none" stroke="white" stroke-width="1" stroke-dasharray="2,2" opacity="0.6" />

  <!-- Floating gears & tech debris -->
  <g id="floatingGears">
    <path d="M80,90 L85,88 L87,83 L85,78 L80,76 L75,78 L73,83 L75,88 Z" fill="#aaa" />
    <circle cx="80" cy="83" r="2" fill="#666" />
    
    <path d="M220,90 L225,88 L227,83 L225,78 L220,76 L215,78 L213,83 L215,88 Z" fill="#aaa" />
    <circle cx="220" cy="83" r="2" fill="#666" />
    
    <path d="M120,40 L123,39 L124,36 L123,33 L120,32 L117,33 L116,36 L117,39 Z" fill="#aaa" />
    <circle cx="120" cy="36" r="1" fill="#666" />
    
    <path d="M260,150 L262,153 L260,156 L257,156 L255,153 L257,150 Z" fill="#aaa" />
    <circle cx="258.5" cy="153" r="1" fill="#666" />
    
    <path d="M40,170 L43,172 L43,175 L40,177 L37,175 L37,172 Z" fill="#aaa" />
    <circle cx="40" cy="174" r="1" fill="#666" />
  </g>

  <!-- Robot Octopus - Tentacles First -->
  <g id="robotOctopus">
    <!-- Tentacle 1 - holding planet -->
    <path d="M130,180 C110,200 90,230 70,220 C60,215 65,200 70,190" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />
    <path d="M58,185 C60,182 64,181 69,183 C75,185 77,190 77,195" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" />
    <path d="M82,188 C80,192 76,196 70,197 C64,198 60,195 58,193" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" />

    <!-- Tentacle 2 - holding planet -->
    <path d="M170,180 C190,200 210,230 230,220 C240,215 235,200 230,190" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />
    <path d="M242,185 C240,182 236,181 231,183 C225,185 223,190 223,195" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" />
    <path d="M218,188 C220,192 224,196 230,197 C236,198 240,195 242,193" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" />
    
    <!-- Tentacle 3 - reaching up -->
    <path d="M125,160 C95,140 75,100 95,80 C105,70 115,75 120,85" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />

    <!-- Tentacle 4 - reaching up -->
    <path d="M175,160 C205,140 225,100 205,80 C195,70 185,75 180,85" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />

    <!-- Tentacle 5 - reaching to the side -->
    <path d="M130,170 C100,175 60,170 50,150 C45,140 50,130 60,125" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />

    <!-- Tentacle 6 - reaching to the side -->
    <path d="M170,170 C200,175 240,170 250,150 C255,140 250,130 240,125" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />

    <!-- Tentacle 7 - curled up -->
    <path d="M140,185 C120,210 100,205 110,185 C115,175 125,170 130,175" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />

    <!-- Tentacle 8 - curled up -->
    <path d="M160,185 C180,210 200,205 190,185 C185,175 175,170 170,175" fill="none" stroke="url(#metalGradient)" stroke-width="8" stroke-linecap="round" />

    <!-- Tentacle joints -->
    <circle cx="110" cy="200" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="70" cy="220" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="190" cy="200" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="230" cy="220" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="95" cy="140" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="95" cy="80" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="205" cy="140" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="205" cy="80" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="100" cy="175" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="50" cy="150" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="200" cy="175" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="250" cy="150" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="120" cy="210" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="110" cy="185" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="180" cy="210" r="4" fill="#555" stroke="#333" stroke-width="1" />
    <circle cx="190" cy="185" r="4" fill="#555" stroke="#333" stroke-width="1" />
    
    <!-- Mechanical details on tentacles -->
    <line x1="105" y1="195" x2="115" y2="205" stroke="#333" stroke-width="1" />
    <line x1="115" y1="195" x2="105" y2="205" stroke="#333" stroke-width="1" />
    <line x1="185" y1="195" x2="195" y2="205" stroke="#333" stroke-width="1" />
    <line x1="195" y1="195" x2="185" y2="205" stroke="#333" stroke-width="1" />
    <rect x="93" y="137" width="4" height="6" fill="#444" />
    <rect x="203" y="137" width="4" height="6" fill="#444" />
    <rect x="97" y="77" width="4" height="6" fill="#444" transform="rotate(45,99,80)" />
    <rect x="203" y="77" width="4" height="6" fill="#444" transform="rotate(-45,205,80)" />
    <rect x="48" y="147" width="4" height="6" fill="#444" transform="rotate(30,50,150)" />
    <rect x="248" y="147" width="4" height="6" fill="#444" transform="rotate(-30,250,150)" />
    
    <!-- Hydraulics on tentacles -->
    <line x1="125" y1="175" x2="105" y2="190" stroke="#555" stroke-width="3" />
    <line x1="175" y1="175" x2="195" y2="190" stroke="#555" stroke-width="3" />
    <circle cx="125" cy="175" r="2" fill="#333" />
    <circle cx="105" cy="190" r="2" fill="#333" />
    <circle cx="175" cy="175" r="2" fill="#333" />
    <circle cx="195" cy="190" r="2" fill="#333" />
    
    <!-- Body/Head -->
    <ellipse cx="150" cy="150" rx="40" ry="45" fill="url(#metalGradient)" stroke="#444" stroke-width="1" />
    <rect x="140" y="125" width="20" height="10" fill="url(#circuitPattern)" opacity="0.7"/>
    
    <!-- Robotic body details -->
    <path d="M125,130 L135,130 L135,145 L125,145 Z" fill="#555" />
    <path d="M165,130 L175,130 L175,145 L165,145 Z" fill="#555" />
    <rect x="135" y="170" width="30" height="2" fill="#333" />
    <rect x="135" y="175" width="30" height="2" fill="#333" />
    <rect x="135" y="180" width="30" height="2" fill="#333" />
    
    <!-- Rivets on body -->
    <circle cx="125" cy="130" r="2" fill="#444" />
    <circle cx="135" cy="130" r="2" fill="#444" />
    <circle cx="125" cy="145" r="2" fill="#444" />
    <circle cx="135" cy="145" r="2" fill="#444" />
    <circle cx="165" cy="130" r="2" fill="#444" />
    <circle cx="175" cy="130" r="2" fill="#444" />
    <circle cx="165" cy="145" r="2" fill="#444" />
    <circle cx="175" cy="145" r="2" fill="#444" />
    <circle cx="130" cy="120" r="2" fill="#444" />
    <circle cx="140" cy="120" r="2" fill="#444" />
    <circle cx="160" cy="120" r="2" fill="#444" />
    <circle cx="170" cy="120" r="2" fill="#444" />
    
    <!-- Face elements -->
    <!-- Eyes -->
    <circle cx="135" cy="140" r="8" fill="#000" />
    <circle cx="165" cy="140" r="8" fill="#000" />
    <circle cx="135" cy="140" r="3" fill="#00f0ff" filter="url(#eyeGlow)" />
    <circle cx="165" cy="140" r="3" fill="#00f0ff" filter="url(#eyeGlow)" />
    
    <!-- Expressive eye details -->
    <path d="M133,136 L137,136" stroke="#00f0ff" stroke-width="0.5" />
    <path d="M133,144 L137,144" stroke="#00f0ff" stroke-width="0.5" />
    <path d="M163,136 L167,136" stroke="#00f0ff" stroke-width="0.5" />
    <path d="M163,144 L167,144" stroke="#00f0ff" stroke-width="0.5" />
    
    <!-- Mouth/Speaker -->
    <rect x="140" y="160" width="20" height="10" rx="3" fill="#333" />
    <line x1="143" y1="165" x2="157" y2="165" stroke="#666" stroke-width="1" />
    <line x1="143" y1="167" x2="157" y2="167" stroke="#666" stroke-width="1" />
    <line x1="143" y1="163" x2="157" y2="163" stroke="#666" stroke-width="1" />
    
    <!-- Antenna -->
    <line x1="150" y1="105" x2="150" y2="115" stroke="#444" stroke-width="2" />
    <circle cx="150" cy="105" r="3" fill="#f00" />
    <circle cx="150" cy="102" r="1" fill="#fff" />
    
    <!-- Control panel on octopus chest -->
    <rect x="130" y="170" width="40" height="20" rx="3" fill="#333" />
    <circle cx="140" cy="175" r="2" fill="#f00" />
    <circle cx="140" cy="180" r="2" fill="#0f0" />
    <circle cx="140" cy="185" r="2" fill="#00f" />
    <rect x="150" y="175" width="15" height="5" rx="1" fill="#222" />
    <rect x="150" y="182" width="15" height="5" rx="1" fill="#222" />
    <line x1="152" y1="177.5" x2="163" y2="177.5" stroke="#0f0" stroke-width="0.5" />
    <line x1="152" y1="184.5" x2="158" y2="184.5" stroke="#f00" stroke-width="0.5" />
  </g>

  <!-- Energy beams connecting octopus to planets -->
  <path d="M135,140 L70,190" stroke="#00f8ff" stroke-width="0.5" opacity="0.6" stroke-dasharray="1,2" filter="url(#energyGlow)" />
  <path d="M165,140 L230,190" stroke="#00f8ff" stroke-width="0.5" opacity="0.6" stroke-dasharray="1,2" filter="url(#energyGlow)" />
  <path d="M150,120 L150,60" stroke="#00f8ff" stroke-width="0.5" opacity="0.6" stroke-dasharray="1,2" filter="url(#energyGlow)" />
  <path d="M130,150 L60,120" stroke="#00f8ff" stroke-width="0.5" opacity="0.6" stroke-dasharray="1,2" filter="url(#energyGlow)" />
  <path d="M170,150 L240,120" stroke="#00f8ff" stroke-width="0.5" opacity="0.6" stroke-dasharray="1,2" filter="url(#energyGlow)" />

  <!-- Planets -->
  <!-- Planet 1 - orange ringed planet held by tentacle 1 -->
  <g id="planet1">
    <circle cx="70" cy="190" r="15" fill="url(#planet1Gradient)" />
    <ellipse cx="70" cy="190" rx="18" ry="5" fill="none" stroke="#ffaa00" stroke-width="1" transform="rotate(-15,70,190)" />
    <ellipse cx="70" cy="190" rx="16" ry="4" fill="none" stroke="#ffcc00" stroke-width="0.5" transform="rotate(15,70,190)" />
    <path d="M65,180 C67,182 70,182 72,180" stroke="#c43e00" stroke-width="0.7" fill="none" />
    <path d="M75,193 C77,195 77,197 75,199" stroke="#c43e00" stroke-width="0.7" fill="none" />
    <path d="M60,193 C62,195 62,197 60,199" stroke="#c43e00" stroke-width="0.7" fill="none" />
  </g>

  <!-- Planet 2 - blue ocean planet held by tentacle 2 -->
  <g id="planet2">
    <circle cx="230" cy="190" r="15" fill="url(#planet2Gradient)" />
    <circle cx="225" cy="185" r="3" fill="#0060aa" />
    <circle cx="235" cy="195" r="2" fill="#0060aa" />
    <circle cx="230" cy="183" r="2" fill="#0060aa" />
    <path d="M220,195 C223,193 226,193 228,195 C230,197 230,200 228,202 C226,204 223,204 220,202 C218,200 218,197 220,195 Z" fill="#0070c0" />
  </g>

  <!-- Planet 3 - green terrestrial planet being juggled up top -->
  <g id="planet3">
    <circle cx="150" cy="60" r="18" fill="url(#planet3Gradient)" />
    <path d="M145,50 C150,45 160,48 158,55 C155,60 145,55 145,50" fill="#0a9e65" />
    <path d="M140,65 C137,60 140,55 145,58 C150,60 155,65 150,68 C145,70 142,68 140,65" fill="#0a9e65" />
    <path d="M155,70 C160,65 165,68 163,72 C160,75 155,73 155,70" fill="#0a9e65" />
    <circle cx="150" cy="60" r="20" fill="none" stroke="#20ffb0" stroke-width="0.5" opacity="0.5" />
  </g>

  <!-- Planet 4 - yellow ringed planet on the left -->
  <g id="planet4">
    <circle cx="60" cy="120" r="12" fill="url(#planet4Gradient)" />
    <ellipse cx="60" cy="120" rx="16" ry="3" fill="none" stroke="#e0c000" stroke-width="1" />
    <ellipse cx="60" cy="120" rx="14" ry="2" fill="none" stroke="#c0a000" stroke-width="0.5" />
    <path d="M55,115 A5,5 0 0,1 65,115" stroke="#b07800" stroke-width="0.7" fill="none" />
    <path d="M55,125 A5,5 0 0,0 65,125" stroke="#b07800" stroke-width="0.7" fill="none" />
  </g>

  <!-- Planet 5 - purple swirly planet on the right -->
  <g id="planet5">
    <circle cx="240" cy="120" r="12" fill="url(#planet5Gradient)" />
    <path d="M235,115 Q240,110 245,115 Q247,120 243,123 Q238,125 235,120 Q234,117 235,115" fill="#df20a0" />
    <path d="M230,127 Q235,122 240,127 Q242,132 238,135 Q233,137 230,132 Q229,129 230,127" fill="#df20a0" transform="rotate(-20,240,120)" />
    <circle cx="240" cy="120" r="15" fill="none" stroke="#ff60c0" stroke-width="0.5" stroke-dasharray="1,2" />
  </g>

  <!-- Sparkles around planets -->
  <g id="sparkles">
    <circle cx="155" cy="45" r="1" fill="white" />
    <circle cx="140" cy="55" r="0.8" fill="white" />
    <circle cx="165" cy="60" r="1.2" fill="white" />
    <circle cx="55" cy="110" r="1" fill="white" />
    <circle cx="65" cy="130" r="0.7" fill="white" />
    <circle cx="245" cy="110" r="1" fill="white" />
    <circle cx="235" cy="130" r="0.7" fill="white" />
    <circle cx="150" cy="35" r="0.6" fill="white" />
    <circle cx="145" cy="42" r="0.5" fill="white" />
    <circle cx="45" cy="117" r="0.5" fill="white" />
    <circle cx="232" cy="113" r="0.5" fill="white" />
  </g>
  
  <!-- Electrical sparks at tentacle-planet connections -->
  <g id="electricalSparks">
    <path d="M68,185 L72,187 L70,188 L73,192 L71,190 L74,191" stroke="#00f8ff" stroke-width="0.5" fill="none" />
    <path d="M232,185 L228,187 L230,188 L227,192 L229,190 L226,191" stroke="#00f8ff" stroke-width="0.5" fill="none" />
  </g>
</svg>
SVG by DeepSeek-R1-Distill-Llama-70B
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="cosmicGlow" x1="0" y1="0" x2="300" y2="300" gradientUnits="userSpaceOnUse">
      <stop stop-color="#1a1a2e" offset="0"/>
      <stop stop-color="#16213e" offset="0.5"/>
      <stop stop-color="#8a2be2" offset="1"/>
    </linearGradient>
    <radialGradient id="planetGlow" cx="150" cy="150" r="100" fx="150" fy="150">
      <stop stop-color="#ffd700" offset="0"/>
      <stop stop-color="#ff4500" offset="1"/>
    </radialGradient>
    <pattern id="stars" x="0" y="0" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <circle cx="50%" cy="50%" r="1" fill="white"/>
    </pattern>
  </defs>
  <rect width="300" height="300" fill="url(#cosmicGlow)"/>
  
  <!-- Robot Octopus Body -->
  <circle cx="150" cy="220" r="40" fill="#666" stroke="#333" stroke-width="4"/>
  <circle cx="150" cy="180" r="30" fill="#444" stroke="#222" stroke-width="3"/>
  
  <!-- Tentacles -->
  <path d="M150,180 Q170,220 200,240 L220,260 L180,260 Q170,220 150,180" fill="#444" stroke="#222" stroke-width="2"/>
  <path d="M150,180 Q130,220 100,240 L80,260 L120,260 Q130,220 150,180" fill="#444" stroke="#222" stroke-width="2"/>
  <path d="M150,180 Q160,200 170,180" fill="#444" stroke="#222" stroke-width="2"/>
  
  <!-- Planets -->
  <circle cx="100" cy="100" r="25" fill="url(#planetGlow)" stroke="#ffd700" stroke-width="2">
    <animate attributeName="cy" from="100" to="150" dur="2s" repeatCount="indefinite"/>
  </circle>
  <circle cx="200" cy="100" r="20" fill="#00ffff" stroke="#00bfff" stroke-width="2">
    <animate attributeName="cx" from="200" to="250" dur="3s" repeatCount="indefinite"/>
  </circle>
  <circle cx="250" cy="200" r="15" fill="#ff69b4" stroke="#ff1493" stroke-width="2">
    <animate attributeName="cy" from="200" to="250" dur="4s" repeatCount="indefinite"/>
  </circle>
  
  <!-- Stars -->
  <rect width="300" height="300" fill="url(#stars)"/>
  
  <!-- Glowing Effects -->
  <circle cx="150" cy="150" r="10" fill="#8a2be2" stroke="#4b0082" stroke-width="2"/>
  <circle cx="150" cy="150" r="5" fill="#4b0082"/>
  
  <!-- Mechanical Details -->
  <circle cx="150" cy="160" r="2" fill="#fff"/>
  <circle cx="140" cy="170" r="2" fill="#fff"/>
  <circle cx="160" cy="170" r="2" fill="#fff"/>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 1

Judge's Analysis

    Player 1's image creatively depicts a robot octopus with multiple limbs actively juggling colorful cosmic planets, effectively adhering to the prompt.

    The technical quality is high with detailed elements and a dynamic composition against a starry background.

    In contrast, Player 2's image is simpler and less detailed, lacking the complexity and adherence to the theme seen in Player 1's submission.

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

Total Shapes

The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.

Player 1
162
Player 2
16
Rectangles

The number of rectangle elements (rect) in the SVG.

Player 1
16
Player 2
2
Circles

The number of circle elements (circle) in the SVG.

Player 1
77
Player 2
11
Ellipses

The number of ellipse elements (ellipse) in the SVG.

Player 1
7
Player 2
Lines

The number of line elements (line) in the SVG.

Player 1
12
Player 2
Polygons

The number of polygon elements (polygon) in the SVG.

Player 1
Player 2
Paths

The number of path elements (path) in the SVG.

Player 1
50
Player 2
3
Groups

The number of group elements (g) in the SVG.

Player 1
10
Player 2

Visual Effects Metrics

Gradients

The number of gradient definitions (linearGradient, radialGradient) in the SVG.

Player 1
7
Player 2
2
Patterns

The number of pattern definitions (pattern) in the SVG.

Player 1
2
Player 2
1
Filters

The number of filter definitions (filter) in the SVG.

Player 1
2
Player 2
Masks

The number of mask definitions (mask) in the SVG.

Player 1
Player 2
Clip Paths

The number of clipping path definitions (clipPath) in the SVG.

Player 1
Player 2
Elements with Opacity

The number of elements with opacity attributes in the SVG.

Player 1
22
Player 2
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
68
Player 2
9

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
44
Player 2
16

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1
Player 2
3
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
7
Player 2

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1
199
Player 2
12
Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1
Player 2
Defs Elements

The number of elements defined within the defs element in the SVG.

Player 1
11
Player 2
3
Use Elements

The number of use elements (use) in the SVG.

Player 1
Player 2

Text Metrics

Text Elements

The number of text elements (text) in the SVG.

Player 1
Player 2

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