Back

SVG Drawing Match #1074

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"A clock shaped like a sunflower, with petals indicating hours"

Claude 3.7 Sonnet (2025-02-19)

Player 1

ELO: 1,261.6 1,244.632 (-17.0)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <radialGradient id="centerGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#8B4513" />
      <stop offset="80%" stop-color="#5C3211" />
      <stop offset="100%" stop-color="#3C2109" />
    </radialGradient>
    <radialGradient id="petalGradient" cx="50%" cy="50%" r="60%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#FFEA00" />
      <stop offset="85%" stop-color="#FF9500" />
      <stop offset="100%" stop-color="#FF7A00" />
    </radialGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
      <feOffset dx="2" dy="2" result="offsetblur" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5" />
      </feComponentTransfer>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- Background Circle -->
  <circle cx="150" cy="150" r="140" fill="#e6f7ff" opacity="0.3" />

  <!-- Clock Numbers & Hour Markers -->
  <g id="markers" font-family="Arial, sans-serif" font-weight="bold" text-anchor="middle">
    <text x="150" y="60" font-size="14" fill="#5C3211">12</text>
    <text x="195" y="75" font-size="14" fill="#5C3211">1</text>
    <text x="225" y="105" font-size="14" fill="#5C3211">2</text>
    <text x="240" y="150" font-size="14" fill="#5C3211">3</text>
    <text x="225" y="195" font-size="14" fill="#5C3211">4</text>
    <text x="195" y="225" font-size="14" fill="#5C3211">5</text>
    <text x="150" y="240" font-size="14" fill="#5C3211">6</text>
    <text x="105" y="225" font-size="14" fill="#5C3211">7</text>
    <text x="75" y="195" font-size="14" fill="#5C3211">8</text>
    <text x="60" y="150" font-size="14" fill="#5C3211">9</text>
    <text x="75" y="105" font-size="14" fill="#5C3211">10</text>
    <text x="105" y="75" font-size="14" fill="#5C3211">11</text>
  </g>

  <!-- Sunflower Petals (12 for each hour) -->
  <g id="petals">
    <!-- 12 o'clock petal -->
    <path d="M150,150 C150,100 130,60 150,20 C170,60 150,100 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 1 o'clock petal -->
    <path d="M150,150 C170,105 190,75 220,45 C200,85 175,115 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 2 o'clock petal -->
    <path d="M150,150 C195,130 215,105 255,85 C225,115 190,135 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 3 o'clock petal -->
    <path d="M150,150 C205,150 245,130 280,150 C245,170 205,150 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 4 o'clock petal -->
    <path d="M150,150 C195,170 215,195 255,215 C225,185 190,165 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 5 o'clock petal -->
    <path d="M150,150 C170,195 190,225 220,255 C200,215 175,185 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 6 o'clock petal -->
    <path d="M150,150 C150,200 130,240 150,280 C170,240 150,200 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 7 o'clock petal -->
    <path d="M150,150 C130,195 110,225 80,255 C100,215 125,185 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 8 o'clock petal -->
    <path d="M150,150 C105,170 85,195 45,215 C75,185 110,165 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 9 o'clock petal -->
    <path d="M150,150 C95,150 55,130 20,150 C55,170 95,150 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 10 o'clock petal -->
    <path d="M150,150 C105,130 85,105 45,85 C75,115 110,135 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
    <!-- 11 o'clock petal -->
    <path d="M150,150 C130,105 110,75 80,45 C100,85 125,115 150,150 Z" fill="url(#petalGradient)" filter="url(#shadow)" />
  </g>

  <!-- Sunflower Seed Center -->
  <circle cx="150" cy="150" r="30" fill="url(#centerGradient)" filter="url(#shadow)" />
  
  <!-- Seed pattern in center -->
  <g id="seeds">
    <circle cx="150" cy="150" r="2" fill="#3C2109" />
    <circle cx="157" cy="143" r="2" fill="#3C2109" />
    <circle cx="143" cy="143" r="2" fill="#3C2109" />
    <circle cx="143" cy="157" r="2" fill="#3C2109" />
    <circle cx="157" cy="157" r="2" fill="#3C2109" />
    <circle cx="160" cy="150" r="2" fill="#3C2109" />
    <circle cx="140" cy="150" r="2" fill="#3C2109" />
    <circle cx="150" cy="160" r="2" fill="#3C2109" />
    <circle cx="150" cy="140" r="2" fill="#3C2109" />
    <circle cx="155" cy="150" r="1.5" fill="#3C2109" />
    <circle cx="145" cy="150" r="1.5" fill="#3C2109" />
    <circle cx="150" cy="155" r="1.5" fill="#3C2109" />
    <circle cx="150" cy="145" r="1.5" fill="#3C2109" />
  </g>

  <!-- Clock Hands -->
  <g id="hands">
    <!-- Hour Hand -->
    <line x1="150" y1="150" x2="150" y2="110" stroke="#5C3211" stroke-width="4" stroke-linecap="round">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" dur="12h" repeatCount="indefinite" />
    </line>
    
    <!-- Minute Hand -->
    <line x1="150" y1="150" x2="150" y2="90" stroke="#5C3211" stroke-width="3" stroke-linecap="round">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" dur="60min" repeatCount="indefinite" />
    </line>
    
    <!-- Second Hand -->
    <line x1="150" y1="150" x2="150" y2="85" stroke="#B22222" stroke-width="1.5" stroke-linecap="round">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" dur="60s" repeatCount="indefinite" />
    </line>
    
    <!-- Center Pin -->
    <circle cx="150" cy="150" r="5" fill="#5C3211" stroke="#3C2109" stroke-width="1" />
  </g>

  <!-- Small Green Leaves at the Base -->
  <path d="M150,150 C165,180 175,200 150,210 C125,200 135,180 150,150 Z" fill="#4CAF50" opacity="0.8" transform="rotate(10 150 150)" />
  <path d="M150,150 C165,180 175,200 150,210 C125,200 135,180 150,150 Z" fill="#4CAF50" opacity="0.8" transform="rotate(-10 150 150)" />
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,240.544 1,257.512 (+17.0)

Winner

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Sunflower center gradient: dark brown to lighter brown -->
    <radialGradient id="centerGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#8B4513"/>
      <stop offset="70%" stop-color="#654321"/>
      <stop offset="100%" stop-color="#3A2410"/>
    </radialGradient>
    
    <!-- Yellow-orange gradient for petals -->
    <linearGradient id="petalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFD700"/>
      <stop offset="100%" stop-color="#FFA500"/>
    </linearGradient>

    <!-- Highlight gradient for petals -->
    <linearGradient id="petalHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
    </linearGradient>

    <!-- Clock hand gradients -->
    <linearGradient id="hourHandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#333333"/>
      <stop offset="100%" stop-color="#666666"/>
    </linearGradient>
    
    <linearGradient id="minuteHandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#444444"/>
      <stop offset="100%" stop-color="#777777"/>
    </linearGradient>
    
    <linearGradient id="secondHandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#AA0000"/>
      <stop offset="100%" stop-color="#FF0000"/>
    </linearGradient>
    
    <!-- Petal texture pattern -->
    <pattern id="petalTexture" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 0,5 L 10,5 M 5,0 L 5,10" stroke="#FFA500" stroke-width="0.5" stroke-opacity="0.2"/>
    </pattern>
  </defs>

  <!-- Background elements -->
  <g id="background">
    <!-- Sky background -->
    <rect x="0" y="0" width="300" height="300" fill="#E6F7FF" opacity="0.3"/>
    
    <!-- Sun rays -->
    <g id="sun-rays" opacity="0.3">
      <path d="M 50,50 L 80,80" stroke="#FFD700" stroke-width="2"/>
      <path d="M 40,150 L 70,150" stroke="#FFD700" stroke-width="2"/>
      <path d="M 50,250 L 80,220" stroke="#FFD700" stroke-width="2"/>
      <path d="M 250,50 L 220,80" stroke="#FFD700" stroke-width="2"/>
      <path d="M 260,150 L 230,150" stroke="#FFD700" stroke-width="2"/>
      <path d="M 250,250 L 220,220" stroke="#FFD700" stroke-width="2"/>
    </g>
    
    <!-- Additional decorative elements -->
    <circle cx="40" cy="40" r="5" fill="#6495ED" opacity="0.5"/>
    <circle cx="260" cy="40" r="5" fill="#6495ED" opacity="0.5"/>
    <circle cx="40" cy="260" r="5" fill="#6495ED" opacity="0.5"/>
    <circle cx="260" cy="260" r="5" fill="#6495ED" opacity="0.5"/>
  </g>

  <!-- Decorative elements -->
  <g id="decorations">
    <!-- Leaves by the base -->
    <path d="M 65,210 C 40,200 30,230 50,240 C 30,250 40,280 65,270 Z" fill="#228B22" stroke="#006400" stroke-width="1"/>
    <path d="M 235,210 C 260,200 270,230 250,240 C 270,250 260,280 235,270 Z" fill="#228B22" stroke="#006400" stroke-width="1"/>
    
    <!-- Stem -->
    <path d="M 150,270 C 150,270 145,230 150,200" stroke="#228B22" stroke-width="8" fill="none" stroke-linecap="round"/>
  </g>

  <!-- Sunflower base -->
  <g id="sunflower">
    <!-- Background circle to provide a backdrop -->
    <circle cx="150" cy="150" r="145" fill="#e6f7ff" opacity="0.5"/>
    
    <!-- Petals for hours - I'll create 12 petals for 12 hours -->
    <g id="petals">
      <!-- 12 petals for 12 hours, improved petal shape -->
      <g id="petal1" transform="rotate(0, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">12</text>
      </g>
      
      <g id="petal2" transform="rotate(30, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">1</text>
      </g>
      
      <g id="petal3" transform="rotate(60, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">2</text>
      </g>
      
      <g id="petal4" transform="rotate(90, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">3</text>
      </g>
      
      <g id="petal5" transform="rotate(120, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">4</text>
      </g>
      
      <g id="petal6" transform="rotate(150, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">5</text>
      </g>
      
      <g id="petal7" transform="rotate(180, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">6</text>
      </g>
      
      <g id="petal8" transform="rotate(210, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">7</text>
      </g>
      
      <g id="petal9" transform="rotate(240, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">8</text>
      </g>
      
      <g id="petal10" transform="rotate(270, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">9</text>
      </g>
      
      <g id="petal11" transform="rotate(300, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">10</text>
      </g>
      
      <g id="petal12" transform="rotate(330, 150, 150)">
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalGradient)" stroke="#FFA500" stroke-width="1"/>
        <path d="M 150,110 C 130,60 100,20 150,20 C 200,20 170,60 150,110 Z" fill="url(#petalTexture)" opacity="0.3" stroke="none"/>
        <path d="M 150,110 C 140,70 130,40 150,35 C 170,40 160,70 150,110 Z" fill="url(#petalHighlight)" stroke="none"/>
        <text x="150" y="55" text-anchor="middle" fill="#654321" font-size="16" font-weight="bold">11</text>
      </g>
    </g>
    
    <!-- Sunflower center with seed pattern -->
    <circle cx="150" cy="150" r="40" fill="url(#centerGradient)" stroke="#654321" stroke-width="2"/>
    
    <!-- Seed pattern in center - enhanced with spirals -->
    <g id="seeds">
      <!-- Spirals for the seed pattern -->
      <path d="M 150,150 C 155,145 160,145 160,150 C 160,155 155,160 150,160 C 145,160 140,155 140,150 C 140,145 145,140 150,140 C 155,140 157,143 157,147 C 157,151 154,154 150,154 C 146,154 143,151 143,147 C 143,143 146,140 150,140" 
            fill="none" stroke="#111" stroke-width="0.5" opacity="0.5"/>
      
      <path d="M 165,150 C 170,145 175,145 175,150 C 175,155 170,160 165,160 C 160,160 155,155 155,150 C 155,145 160,140 165,140 C 170,140 172,143 172,147 C 172,151 169,154 165,154 C 161,154 158,151 158,147 C 158,143 161,140 165,140" 
            fill="none" stroke="#111" stroke-width="0.5" opacity="0.5" transform="rotate(45 150 150)"/>
      
      <path d="M 135,150 C 140,145 145,145 145,150 C 145,155 140,160 135,160 C 130,160 125,155 125,150 C 125,145 130,140 135,140 C 140,140 142,143 142,147 C 142,151 139,154 135,154 C 131,154 128,151 128,147 C 128,143 131,140 135,140" 
            fill="none" stroke="#111" stroke-width="0.5" opacity="0.5" transform="rotate(-45 150 150)"/>
      
      <!-- Seeds in a spiral pattern -->
      <circle cx="150" cy="150" r="3" fill="#222" />
      
      <!-- Inner ring of seeds -->
      <circle cx="140" cy="140" r="2" fill="#222" />
      <circle cx="145" cy="135" r="2" fill="#222" />
      <circle cx="155" cy="135" r="2" fill="#222" />
      <circle cx="160" cy="140" r="2" fill="#222" />
      <circle cx="160" cy="150" r="2" fill="#222" />
      <circle cx="160" cy="160" r="2" fill="#222" />
      <circle cx="155" cy="165" r="2" fill="#222" />
      <circle cx="145" cy="165" r="2" fill="#222" />
      <circle cx="140" cy="160" r="2" fill="#222" />
      <circle cx="140" cy="150" r="2" fill="#222" />
      
      <!-- Middle ring of seeds -->
      <circle cx="135" cy="135" r="2" fill="#222" />
      <circle cx="142" cy="128" r="2" fill="#222" />
      <circle cx="150" cy="125" r="2" fill="#222" />
      <circle cx="158" cy="128" r="2" fill="#222" />
      <circle cx="165" cy="135" r="2" fill="#222" />
      <circle cx="168" cy="142" r="2" fill="#222" />
      <circle cx="170" cy="150" r="2" fill="#222" />
      <circle cx="168" cy="158" r="2" fill="#222" />
      <circle cx="165" cy="165" r="2" fill="#222" />
      <circle cx="158" cy="172" r="2" fill="#222" />
      <circle cx="150" cy="175" r="2" fill="#222" />
      <circle cx="142" cy="172" r="2" fill="#222" />
      <circle cx="135" cy="165" r="2" fill="#222" />
      <circle cx="132" cy="158" r="2" fill="#222" />
      <circle cx="130" cy="150" r="2" fill="#222" />
      <circle cx="132" cy="142" r="2" fill="#222" />
      
      <!-- Outer ring of seeds -->
      <circle cx="130" cy="130" r="1.5" fill="#222" />
      <circle cx="138" cy="123" r="1.5" fill="#222" />
      <circle cx="148" cy="120" r="1.5" fill="#222" />
      <circle cx="158" cy="122" r="1.5" fill="#222" />
      <circle cx="166" cy="128" r="1.5" fill="#222" />
      <circle cx="172" cy="138" r="1.5" fill="#222" />
      <circle cx="175" cy="148" r="1.5" fill="#222" />
      <circle cx="173" cy="158" r="1.5" fill="#222" />
      <circle cx="167" cy="167" r="1.5" fill="#222" />
      <circle cx="158" cy="173" r="1.5" fill="#222" />
      <circle cx="148" cy="175" r="1.5" fill="#222" />
      <circle cx="138" cy="173" r="1.5" fill="#222" />
      <circle cx="130" cy="167" r="1.5" fill="#222" />
      <circle cx="125" cy="158" r="1.5" fill="#222" />
      <circle cx="122" cy="148" r="1.5" fill="#222" />
      <circle cx="125" cy="138" r="1.5" fill="#222" />
    </g>
  </g>
  
  <!-- Clock hands -->
  <g id="clock-hands">
    <!-- Hour hand -->
    <g>
      <line x1="150" y1="150" x2="150" y2="110" stroke="url(#hourHandGradient)" stroke-width="4" stroke-linecap="round"/>
      <animateTransform 
        attributeName="transform" 
        attributeType="XML" 
        type="rotate" 
        from="0 150 150" 
        to="360 150 150" 
        dur="43200s"
        repeatCount="indefinite"/>
    </g>
    
    <!-- Minute hand -->
    <g>
      <line x1="150" y1="150" x2="150" y2="90" stroke="url(#minuteHandGradient)" stroke-width="3" stroke-linecap="round"/>
      <animateTransform 
        attributeName="transform" 
        attributeType="XML" 
        type="rotate" 
        from="0 150 150" 
        to="360 150 150" 
        dur="3600s"
        repeatCount="indefinite"/>
    </g>
    
    <!-- Second hand -->
    <g>
      <line x1="150" y1="150" x2="150" y2="80" stroke="url(#secondHandGradient)" stroke-width="1.5" stroke-linecap="round"/>
      <animateTransform 
        attributeName="transform" 
        attributeType="XML" 
        type="rotate" 
        from="0 150 150" 
        to="360 150 150" 
        dur="60s"
        repeatCount="indefinite"/>
    </g>
    
    <!-- Center cap -->
    <circle cx="150" cy="150" r="5" fill="#654321" stroke="#333" stroke-width="1"/>
  </g>
</svg>

GPT-4o

Judge & Evaluator

The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 2

Judge's Analysis

Player 2's design showcases a more visually appealing and structurally coherent depiction of a sunflower clock.

The petals are clearly defined and effectively represent the hours, enhancing both creativity and adherence to the prompt.

The composition is balanced and the technical quality is superior, making it more visually striking overall.

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

Player 2

103

Rectangles

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

Player 1

—

Player 2

Circles

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

Player 1

Player 2

Ellipses

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

Player 1

—

Player 2

—

Lines

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

Player 1

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

Player 2

Groups

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

Player 1

Player 2

Visual Effects Metrics

Gradients

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

Player 1

Player 2

Patterns

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

Player 1

—

Player 2

Filters

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

Player 1

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

Player 2

Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1

Player 2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1

Player 2

Interactivity Metrics

Animations

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

Player 1

Player 2

Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1

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

Player 2

197

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

Player 2

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.