← high scores

GPT-4o

RANK 23 · MEOWSCORE 59.5 · legacy · US · closed

minimal

“Draw a minimal, flat-design cat as an SVG.”

GPT-4o — minimal attempt 1minimal #16.3
✕ CLOSE

GPT-4o · minimal · attempt 1 · score 6.3

cat likeness: 5.0aesthetic: 6.0technique: 6.0prompt fidelity: 8.0

the actual svg, as the machine wrote it:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <style>
    .ears, .face, .eyes, .nose, .whiskers { fill: #333; }
    .inner-ears { fill: #666; }
  </style>
  <circle class="face" cx="100" cy="100" r="50"/>
  <polygon class="ears" points="60,50 70,20 80,50"/>
  <polygon class="ears" points="140,50 130,20 120,50"/>
  <polygon class="inner-ears" points="65,50 70,30 75,50"/>
  <polygon class="inner-ears" points="135,50 130,30 125,50"/>
  <circle class="eyes" cx="85" cy="90" r="5"/>
  <circle class="eyes" cx="115" cy="90" r="5"/>
  <polygon class="nose" points="100,100 95,110 105,110"/>
  <path class="whiskers" d="M50,100 Q75,110 50,120" stroke="#333" stroke-width="2" fill="none"/>
  <path class="whiskers" d="M150,100 Q125,110 150,120" stroke="#333" stroke-width="2" fill="none"/>
</svg>
GPT-4o — minimal attempt 2minimal #27.5
✕ CLOSE

GPT-4o · minimal · attempt 2 · score 7.5

cat likeness: 6.0aesthetic: 7.0technique: 9.0prompt fidelity: 8.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="120" r="50" fill="#FBC02D" />
  <polygon points="75,90 65,60 50,75" fill="#FBC02D" />
  <polygon points="125,90 135,60 150,75" fill="#FBC02D" />
  <circle cx="85" cy="110" r="8" fill="#000" />
  <circle cx="115" cy="110" r="8" fill="#000" />
  <ellipse cx="100" cy="140" rx="15" ry="8" fill="white" />
</svg>
GPT-4o — minimal attempt 3minimal #36.0
✕ CLOSE

GPT-4o · minimal · attempt 3 · score 6.0

cat likeness: 5.0aesthetic: 7.0technique: 6.0prompt fidelity: 6.0

the actual svg, as the machine wrote it:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="200" height="200">
  <circle cx="32" cy="32" r="30" fill="#F4A460"/>
  <polygon points="16,32 8,16 24,16" fill="#F4A460"/>
  <polygon points="48,32 56,16 40,16" fill="#F4A460"/>
  <circle cx="24" cy="32" r="4" fill="#FFFFFF"/>
  <circle cx="40" cy="32" r="4" fill="#FFFFFF"/>
  <circle cx="24" cy="32" r="2" fill="#000000"/>
  <circle cx="40" cy="32" r="2" fill="#000000"/>
  <ellipse cx="32" cy="42" rx="10" ry="5" fill="#000000"/>
</svg>
GPT-4o — minimal attempt 4minimal #44.8
✕ CLOSE

GPT-4o · minimal · attempt 4 · score 4.8

cat likeness: 3.0aesthetic: 6.0technique: 6.0prompt fidelity: 4.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#F9F9F9"/>
  <circle cx="100" cy="130" r="60" fill="#FFC107"/>
  <ellipse cx="70" cy="110" rx="10" ry="20" fill="#FFC107"/>
  <ellipse cx="130" cy="110" rx="10" ry="20" fill="#FFC107"/>
  <circle cx="85" cy="130" r="5" fill="#FFFFFF"/>
  <circle cx="115" cy="130" r="5" fill="#FFFFFF"/>
  <path d="M80,160 Q100,180 120,160" stroke="#000000" stroke-width="4" fill="none"/>
</svg>

realistic

“Draw a realistic sitting cat with visible fur shading as an SVG.”

GPT-4o — realistic attempt 1realistic #14.3
✕ CLOSE

GPT-4o · realistic · attempt 1 · score 4.3

cat likeness: 5.0aesthetic: 4.0technique: 6.0prompt fidelity: 2.0

the actual svg, as the machine wrote it:

<svg width="200px" height="300px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="furGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(169,169,169);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(105,105,105);stop-opacity:1" />
    </radialGradient>
    <radialGradient id="highlightGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(211,211,211);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(169,169,169);stop-opacity:0" />
    </radialGradient>
  </defs>
  <g transform="translate(20, 60)">
    <ellipse cx="80" cy="160" rx="50" ry="90" fill="url(#furGradient)" />
    <ellipse cx="80" cy="110" rx="60" ry="70" fill="url(#furGradient)" />
    <circle cx="60" cy="60" r="25" fill="url(#highlightGradient)" />
    <circle cx="100" cy="60" r="25" fill="url(#highlightGradient)" />
    <ellipse cx="60" cy="60" rx="10" ry="15" fill="black" />
    <ellipse cx="100" cy="60" rx="10" ry="15" fill="black" />
    <path d="M 70 80 Q 80 90, 90 80" stroke="black" stroke-width="2" fill="none" />
    <ellipse cx="80" cy="85" rx="5" ry="3" fill="black" />
    <path d="M 30 140 Q 10 80, 30 60" stroke="#696969" stroke-width="3" fill="none" />
    <path d="M 130 140 Q 150 80, 130 60" stroke="#696969" stroke-width="3" fill="none" />
    <line x1="75" y1="180" x2="85" y2="180" stroke="#696969" stroke-width="3" />
    <path d="M 60 230 C 65 240, 95 240, 100 230" stroke="#2F4F4F" stroke-width="4" fill="none" />
  </g>
</svg>
GPT-4o — realistic attempt 2realistic #25.8
✕ CLOSE

GPT-4o · realistic · attempt 2 · score 5.8

cat likeness: 7.0aesthetic: 6.0technique: 7.0prompt fidelity: 3.0

the actual svg, as the machine wrote it:

<svg viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="furGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color: #d5c1ac; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #a9826a; stop-opacity: 1" />
    </radialGradient>
    <filter id="furTexture" x="0" y="0">
      <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" result="noise" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
    </filter>
  </defs>
  
  <!-- Body -->
  <ellipse cx="100" cy="190" rx="80" ry="100" fill="url(#furGradient)" filter="url(#furTexture)" />
  
  <!-- Head -->
  <ellipse cx="100" cy="90" rx="60" ry="70" fill="url(#furGradient)" filter="url(#furTexture)" />
  
  <!-- Ears -->
  <path d="M60 50 Q50 20 70 30 Q65 45 60 50 Z" fill="#a9826a" />
  <path d="M140 50 Q150 20 130 30 Q135 45 140 50 Z" fill="#a9826a" />
  
  <!-- Eyes -->
  <ellipse cx="80" cy="90" rx="10" ry="15" fill="#fff" />
  <ellipse cx="120" cy="90" rx="10" ry="15" fill="#fff" />
  <circle cx="80" cy="90" r="5" fill="#000" />
  <circle cx="120" cy="90" r="5" fill="#000" />
  
  <!-- Nose -->
  <path d="M100 110 Q95 115 100 120 Q105 115 100 110 Z" fill="#ffcccb" />
  
  <!-- Mouth -->
  <path d="M95 120 Q100 127 105 120" stroke="#a9826a" stroke-width="2" fill="none" />
  
  <!-- Whiskers -->
  <path d="M60 112 Q40 110 60 108" stroke="#a9826a" stroke-width="1" />
  <path d="M140 112 Q160 110 140 108" stroke="#a9826a" stroke-width="1" />
  <path d="M60 117 Q40 115 60 113" stroke="#a9826a" stroke-width="1" />
  <path d="M140 117 Q160 115 140 113" stroke="#a9826a" stroke-width="1" />
  
  <!-- Tail -->
  <path d="M170 190 Q210 250 150 260" fill="url(#furGradient)" filter="url(#furTexture)" />
</svg>
GPT-4o — realistic attempt 3realistic #34.8
✕ CLOSE

GPT-4o · realistic · attempt 3 · score 4.8

cat likeness: 4.0aesthetic: 6.0technique: 7.0prompt fidelity: 2.0

the actual svg, as the machine wrote it:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
  <defs>
    <radialGradient id="furGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(100,100,100);stop-opacity:1" />
    </radialGradient>
    <filter id="furryTexture">
      <feTurbulence type="fractalNoise" baseFrequency="0.8 0.8" numOctaves="5" stitchTiles="stitch" />
      <feDisplacementMap in="SourceGraphic" scale="1.5" />
    </filter>
  </defs>
  <g filter="url(#furryTexture)">
    <ellipse cx="200" cy="280" rx="100" ry="130" fill="url(#furGradient)" />
    <circle cx="150" cy="160" r="50" fill="url(#furGradient)" />
    <circle cx="250" cy="160" r="50" fill="url(#furGradient)" />
    <ellipse cx="160" cy="150" rx="15" ry="20" fill="#fff" />
    <ellipse cx="240" cy="150" rx="15" ry="20" fill="#fff" />
    <circle cx="160" cy="150" r="10" fill="#222" />
    <circle cx="240" cy="150" r="10" fill="#222" />
    <ellipse cx="200" cy="200" rx="15" ry="10" fill="#f88" />
  </g>
  <line x1="200" y1="215" x2="190" y2="225" stroke="#000" stroke-width="2" />
  <line x1="200" y1="215" x2="210" y2="225" stroke="#000" stroke-width="2" />
  <path d="M150,250 C130,310,180,340,220,310" fill="none" stroke="#000" stroke-width="8" stroke-linecap="round"/>
</svg>
GPT-4o — realistic attempt 4realistic #44.0
✕ CLOSE

GPT-4o · realistic · attempt 4 · score 4.0

cat likeness: 3.0aesthetic: 4.0technique: 6.0prompt fidelity: 3.0

the actual svg, as the machine wrote it:

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="furGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,160,130);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(130,85,60);stop-opacity:1" />
    </radialGradient>
    <filter id="furry" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="8" result="noise" />
      <feDisplacementMap in2="noise" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G" />
    </filter>
  </defs>
  <g filter="url(#furry)">
    <ellipse cx="200" cy="250" rx="80" ry="120" fill="url(#furGradient)" />
    <circle cx="200" cy="150" r="50" fill="url(#furGradient)" />
    <ellipse cx="160" cy="140" rx="12" ry="18" fill="white" />
    <ellipse cx="240" cy="140" rx="12" ry="18" fill="white" />
    <circle cx="160" cy="140" r="6" fill="black" />
    <circle cx="240" cy="140" r="6" fill="black" />
    <path d="M200,180 Q220,160 240,180" stroke="black" stroke-width="2" fill="none" />
    <path d="M200,180 Q180,160 160,180" stroke="black" stroke-width="2" fill="none" />
    <path d="M190,190 Q200,200 210,190" stroke="black" stroke-width="2" fill="none" />
    <polygon points="170,90 200,60 230,90" fill="url(#furGradient)" />
    <ellipse cx="140" cy="280" rx="30" ry="15" fill="url(#furGradient)" />
    <ellipse cx="260" cy="280" rx="30" ry="15" fill="url(#furGradient)" />
    <path d="M120,290 C120,270 140,270 140,290 Z" fill="url(#furGradient)" />
    <path d="M280,290 C280,270 260,270 260,290 Z" fill="url(#furGradient)" />
  </g>
</svg>

action

“Draw a cat riding a bicycle as an SVG.”

GPT-4o — action attempt 1action #15.3
✕ CLOSE

GPT-4o · action · attempt 1 · score 5.3

cat likeness: 6.0aesthetic: 3.0technique: 5.0prompt fidelity: 7.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Bicycle Frame -->
  <line x1="60" y1="140" x2="140" y2="140" stroke="black" stroke-width="2"/>
  <line x1="60" y1="140" x2="100" y2="80" stroke="black" stroke-width="2"/>
  <line x1="140" y1="140" x2="120" y2="100" stroke="black" stroke-width="2"/>
  <line x1="100" y1="80" x2="120" y2="100" stroke="black" stroke-width="2"/>
  <line x1="100" y1="80" x2="90" y2="40" stroke="black" stroke-width="2"/>
  
  <!-- Bicycle Wheels -->
  <circle cx="60" cy="140" r="20" fill="none" stroke="black" stroke-width="2"/>
  <circle cx="140" cy="140" r="20" fill="none" stroke="black" stroke-width="2"/>
  
  <!-- Handlebars -->
  <line x1="90" y1="40" x2="70" y2="50" stroke="black" stroke-width="2"/>
  <line x1="70" y1="50" x2="80" y2="60" stroke="black" stroke-width="2"/>
  
  <!-- Cat -->
  <circle cx="100" cy="60" r="10" fill="gray" stroke="black" stroke-width="1"/>
  <circle cx="94" cy="58" r="1.5" fill="black"/>
  <circle cx="106" cy="58" r="1.5" fill="black"/>
  <polyline points="96,66 100,69 104,66" fill="none" stroke="black" stroke-width="1"/>
  <polygon points="92,52 95,50 90,45" fill="gray" stroke="black" stroke-width="1"/>
  <polygon points="108,52 105,50 110,45" fill="gray" stroke="black" stroke-width="1"/>
  <path d="M98,70 C98,75 102,75 102,70" fill="gray" stroke="black" stroke-width="1"/>
</svg>
GPT-4o — action attempt 2action #25.5
✕ CLOSE

GPT-4o · action · attempt 2 · score 5.5

cat likeness: 5.0aesthetic: 5.0technique: 6.0prompt fidelity: 6.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <!-- Bicycle Frame -->
    <line x1="70" y1="150" x2="130" y2="150" stroke="#999" stroke-width="4"/>
    <line x1="100" y1="130" x2="130" y2="150" stroke="#999" stroke-width="4"/>
    <line x1="100" y1="130" x2="70" y2="150" stroke="#999" stroke-width="4"/>
    <line x1="100" y1="130" x2="100" y2="70" stroke="#999" stroke-width="4"/>
    <line x1="100" y1="70" x2="130" y2="60" stroke="#999" stroke-width="4"/>
    
    <!-- Wheels -->
    <circle cx="70" cy="150" r="20" stroke="#333" stroke-width="4" fill="none"/>
    <circle cx="130" cy="150" r="20" stroke="#333" stroke-width="4" fill="none"/>
    
    <!-- Handlebar -->
    <line x1="100" y1="70" x2="115" y2="50" stroke="#999" stroke-width="4"/>
    
    <!-- Cat Body -->
    <ellipse cx="100" cy="110" rx="15" ry="20" fill="#FFD700"/>
    
    <!-- Cat Head -->
    <circle cx="100" cy="85" r="12" fill="#FFD700"/>
    <polygon points="95,75 90,85 100,80" fill="#FFD700"/>
    <polygon points="105,75 110,85 100,80" fill="#FFD700"/>
    
    <!-- Cat Eyes -->
    <circle cx="95" cy="85" r="2" fill="#000"/>
    <circle cx="105" cy="85" r="2" fill="#000"/>
    
    <!-- Cat Mouth -->
    <path d="M96,90 Q100,95 104,90" stroke="#000" stroke-width="1" fill="none"/>
    
    <!-- Tail -->
    <path d="M85,110 Q65,100 70,130" stroke="#FFD700" stroke-width="4" fill="none"/>
    
    <!-- Pedals -->
    <line x1="100" y1="150" x2="100" y2="160" stroke="#333" stroke-width="4"/>
    <line x1="100" y1="160" x2="105" y2="155" stroke="#333" stroke-width="4"/>
    <line x1="100" y1="160" x2="95" y2="155" stroke="#333" stroke-width="4"/>
  </g>
</svg>
GPT-4o — action attempt 3action #35.3
✕ CLOSE

GPT-4o · action · attempt 3 · score 5.3

cat likeness: 6.0aesthetic: 3.0technique: 5.0prompt fidelity: 7.0

the actual svg, as the machine wrote it:

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Cat's Head -->
  <circle cx="100" cy="60" r="20" fill="orange" />
  <!-- Cat's Ears -->
  <polygon points="85,45 80,70 90,60" fill="orange" />
  <polygon points="115,45 120,70 110,60" fill="orange" />
  <!-- Cat's Eyes -->
  <circle cx="95" cy="58" r="2" fill="black" />
  <circle cx="105" cy="58" r="2" fill="black" />
  <!-- Cat's Mouth -->
  <path d="M95,68 Q100,75 105,68" stroke="black" stroke-width="1" fill="none" />
  <!-- Bicycle Frame -->
  <line x1="60" y1="160" x2="90" y2="130" stroke="blue" stroke-width="2" />
  <line x1="90" y1="130" x2="120" y2="130" stroke="blue" stroke-width="2" />
  <line x1="60" y1="160" x2="80" y2="110" stroke="blue" stroke-width="2" />
  <line x1="80" y1="110" x2="130" y2="110" stroke="blue" stroke-width="2" />
  <line x1="130" y1="110" x2="120" y2="130" stroke="blue" stroke-width="2" />
  <!-- Bicycle Wheels -->
  <circle cx="60" cy="160" r="20" stroke="black" stroke-width="2" fill="none" />
  <circle cx="120" cy="160" r="20" stroke="black" stroke-width="2" fill="none" />
  <!-- Cat's Body -->
  <ellipse cx="100" cy="100" rx="15" ry="30" fill="orange" />
  <!-- Cat's Legs -->
  <line x1="110" y1="120" x2="100" y2="140" stroke="orange" stroke-width="4" />
  <line x1="90" y1="120" x2="80" y2="140" stroke="orange" stroke-width="4" />
  <!-- Cat's Tail -->
  <path d="M115,115 Q125,90 135,110" stroke="orange" stroke-width="4" fill="none" />
</svg>
GPT-4o — action attempt 4action #46.5
✕ CLOSE

GPT-4o · action · attempt 4 · score 6.5

cat likeness: 7.0aesthetic: 6.0technique: 6.0prompt fidelity: 7.0

the actual svg, as the machine wrote it:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <!-- Bicycle Wheels -->
  <circle cx="50" cy="150" r="30" stroke="black" stroke-width="4" fill="none" />
  <circle cx="150" cy="150" r="30" stroke="black" stroke-width="4" fill="none" />
  
  <!-- Bicycle Frame -->
  <line x1="50" y1="150" x2="100" y2="100" stroke="black" stroke-width="4" />
  <line x1="100" y1="100" x2="150" y2="150" stroke="black" stroke-width="4" />
  <line x1="50" y1="150" x2="150" y2="150" stroke="black" stroke-width="4" />
  <line x1="100" y1="100" x2="100" y2="70" stroke="black" stroke-width="4" />
  
  <!-- Handlebars -->
  <line x1="100" y1="70" x2="70" y2="50" stroke="black" stroke-width="4" />
  <line x1="70" y1="50" x2="80" y2="50" stroke="black" stroke-width="4" />
  <line x1="100" y1="70" x2="130" y2="50" stroke="black" stroke-width="4" />
  <line x1="130" y1="50" x2="120" y2="50" stroke="black" stroke-width="4" />
  
  <!-- Cat -->
  <circle cx="100" cy="60" r="12" fill="orange" stroke="black" stroke-width="3" />
  <polygon points="92,58 95,48 100,53" fill="orange" stroke="black" stroke-width="3" />
  <polygon points="108,58 105,48 100,53" fill="orange" stroke="black" stroke-width="3" />
  <ellipse cx="97" cy="60" rx="2" ry="3" fill="black" />
  <ellipse cx="103" cy="60" rx="2" ry="3" fill="black" />
  <path d="M96 66 Q100 68 104 66" stroke="black" stroke-width="2" fill="none" />
  
  <!-- Cat Body -->
  <ellipse cx="100" cy="90" rx="12" ry="20" fill="orange" stroke="black" stroke-width="3" />
  
  <!-- Cat Tail -->
  <path d="M110 95 C120 85, 140 105, 130 115" stroke="orange" stroke-width="3" fill="none" />
</svg>

style

“Draw an origami-style cat with geometric folds as an SVG.”

GPT-4o — style attempt 1style #15.8
✕ CLOSE

GPT-4o · style · attempt 1 · score 5.8

cat likeness: 4.0aesthetic: 6.0technique: 8.0prompt fidelity: 5.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 120,50 80,70" fill="#FFD700" stroke="#000" stroke-width="2"/>
  <polygon points="100,10 90,80 60,110" fill="#FFA500" stroke="#000" stroke-width="2"/>
  <polygon points="100,10 110,80 140,110" fill="#FFA500" stroke="#000" stroke-width="2"/>
  <polygon points="60,110 80,130 40,150" fill="#FF8C00" stroke="#000" stroke-width="2"/>
  <polygon points="80,130 100,140 80,170" fill="#FF4500" stroke="#000" stroke-width="2"/>
  <polygon points="80,170 100,140 120,130" fill="#FF6347" stroke="#000" stroke-width="2"/>
  <polygon points="120,130 140,110 160,140" fill="#FF8C00" stroke="#000" stroke-width="2"/>
  <polygon points="120,130 180,160 160,140" fill="#FF4500" stroke="#000" stroke-width="2"/>
  <polygon points="60,110 40,150 5,170" fill="#FF6347" stroke="#000" stroke-width="2"/>
  <polygon points="120,130 160,160 180,170" fill="#FF6347" stroke="#000" stroke-width="2"/>
</svg>
GPT-4o — style attempt 2style #25.0
✕ CLOSE

GPT-4o · style · attempt 2 · score 5.0

cat likeness: 2.0aesthetic: 6.0technique: 8.0prompt fidelity: 4.0

the actual svg, as the machine wrote it:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 200 200" xml:space="preserve">
  <polygon points="100,10 80,80 120,80" fill="#f2d9c7"/>
  <polygon points="80,80 50,140 100,170" fill="#d4a373"/>
  <polygon points="120,80 150,140 100,170" fill="#d4a373"/>
  <polygon points="50,140 25,180 100,170" fill="#8c564b"/>
  <polygon points="150,140 175,180 100,170" fill="#8c564b"/>
  <polygon points="80,80 40,90 50,140" fill="#f2d9c7"/>
  <polygon points="120,80 160,90 150,140" fill="#f2d9c7"/>
</svg>
GPT-4o — style attempt 3style #34.8
✕ CLOSE

GPT-4o · style · attempt 3 · score 4.8

cat likeness: 2.0aesthetic: 6.0technique: 7.0prompt fidelity: 4.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,180 100,140 160,180" fill="#8A2BE2" />
  <polygon points="100,10 70,100 100,140 130,100" fill="#9370DB" />
  <polygon points="100,140 70,100 40,180" fill="#7B68EE" />
  <polygon points="100,140 130,100 160,180" fill="#6A5ACD" />
  <polygon points="70,100 55,125 100,140" fill="#4B0082" />
  <polygon points="130,100 145,125 100,140" fill="#483D8B" />
  <polygon points="55,125 70,100 85,90" fill="#3A2F8F" />
  <polygon points="145,125 130,100 115,90" fill="#5D3FD3" />
  <polygon points="70,100 85,90 115,90 130,100" fill="#9370DB" />
</svg>
GPT-4o — style attempt 4style #45.0
✕ CLOSE

GPT-4o · style · attempt 4 · score 5.0

cat likeness: 2.0aesthetic: 6.0technique: 8.0prompt fidelity: 4.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 60,70 140,70" fill="#8A8A8A"/>
  <polygon points="60,70 40,130 100,110" fill="#B3B3B3"/>
  <polygon points="140,70 160,130 100,110" fill="#B3B3B3"/>
  <polygon points="40,130 60,190 100,150" fill="#A0A0A0"/>
  <polygon points="160,130 140,190 100,150" fill="#A0A0A0"/>
  <polygon points="60,190 140,190 100,150" fill="#8A8A8A"/>
</svg>

constraint

“Draw a recognizable cat as an SVG using at most 12 SVG elements.”

GPT-4o — constraint attempt 1constraint #17.5
✕ CLOSE

GPT-4o · constraint · attempt 1 · score 7.5

cat likeness: 7.0aesthetic: 6.0technique: 7.0prompt fidelity: 10.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="gray" /> <!-- Head -->
  <circle cx="85" cy="90" r="5" fill="white" /> <!-- Left Eye -->
  <circle cx="115" cy="90" r="5" fill="white" /> <!-- Right Eye -->
  <circle cx="85" cy="90" r="2" fill="black" /> <!-- Left Pupil -->
  <circle cx="115" cy="90" r="2" fill="black" /> <!-- Right Pupil -->
  <path d="M90,110 C95,115 105,115 110,110" stroke="black" fill="transparent" /> <!-- Mouth -->
  <polygon points="70,60 85,80 55,80" fill="gray" /> <!-- Left Ear -->
  <polygon points="130,60 115,80 145,80" fill="gray" /> <!-- Right Ear -->
  <ellipse cx="75" cy="125" rx="2" ry="8" fill="gray" /> <!-- Left Whisker -->
  <ellipse cx="125" cy="125" rx="2" ry="8" fill="gray" /> <!-- Right Whisker -->
  <line x1="60" y1="110" x2="65" y2="115" stroke="black" /> <!-- Left Whisker Line -->
  <line x1="140" y1="110" x2="135" y2="115" stroke="black" /> <!-- Right Whisker Line -->
</svg>
GPT-4o — constraint attempt 2constraint #27.5
✕ CLOSE

GPT-4o · constraint · attempt 2 · score 7.5

cat likeness: 7.0aesthetic: 6.0technique: 7.0prompt fidelity: 10.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="120" rx="50" ry="50" fill="grey"/> <!-- body -->
  <circle cx="100" cy="70" r="30" fill="grey"/> <!-- head -->
  <circle cx="85" cy="65" r="5" fill="black"/> <!-- left eye -->
  <circle cx="115" cy="65" r="5" fill="black"/> <!-- right eye -->
  <path d="M90 80 Q100 90 110 80" stroke="black" fill="transparent"/> <!-- mouth -->
  <polygon points="70,60 85,40 100,60" fill="grey" /> <!-- left ear -->
  <polygon points="130,60 115,40 100,60" fill="grey" /> <!-- right ear -->
  <ellipse cx="100" cy="170" rx="15" ry="5" fill="grey"/> <!-- left foot -->
  <ellipse cx="130" cy="170" rx="15" ry="5" fill="grey"/> <!-- right foot -->
  <ellipse cx="70" cy="170" rx="15" ry="5" fill="grey"/> <!-- left hand -->
  <ellipse cx="130" cy="150" rx="5" ry="15" fill="grey"/> <!-- tail -->
</svg>
GPT-4o — constraint attempt 3constraint #37.8
✕ CLOSE

GPT-4o · constraint · attempt 3 · score 7.8

cat likeness: 7.0aesthetic: 6.0technique: 8.0prompt fidelity: 10.0

the actual svg, as the machine wrote it:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="30" fill="gray"/>
  <circle cx="40" cy="45" r="3" fill="black"/>
  <circle cx="60" cy="45" r="3" fill="black"/>
  <path d="M 38 65 Q 50 75, 62 65" stroke="black" stroke-width="2" fill="none"/>
  <path d="M 35 25 Q 40 5, 45 25" fill="gray"/>
  <path d="M 65 25 Q 60 5, 55 25" fill="gray"/>
  <ellipse cx="45" cy="49" rx="1.5" ry="0.5" fill="white"/>
  <ellipse cx="55" cy="49" rx="1.5" ry="0.5" fill="white"/>
  <path d="M 45 55 Q 50 57, 55 55" stroke="black" stroke-width="1" fill="none"/>
  <path d="M 25 65 Q 15 50, 40 40" stroke="gray" fill="none"/>
  <path d="M 75 65 Q 85 50, 60 40" stroke="gray" fill="none"/>
</svg>
GPT-4o — constraint attempt 4constraint #48.3
✕ CLOSE

GPT-4o · constraint · attempt 4 · score 8.3

cat likeness: 8.0aesthetic: 7.0technique: 8.0prompt fidelity: 10.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="gray" />
  <polygon points="60,70 80,30 100,70" fill="gray" />
  <polygon points="140,70 120,30 100,70" fill="gray" />
  <circle cx="80" cy="90" r="8" fill="white" />
  <circle cx="120" cy="90" r="8" fill="white" />
  <circle cx="80" cy="90" r="4" fill="black" />
  <circle cx="120" cy="90" r="4" fill="black" />
  <path d="M100,105 Q95,120 90,105" stroke="black" stroke-width="2" fill="none" />
  <path d="M90,115 C95,120 105,120 110,115" stroke="black" stroke-width="2" fill="none" />
  <path d="M85,130 C100,140 115,130 100,135Z" fill="pink" />
</svg>

animation

“Draw a cat whose tail sways continuously, as an SVG using SMIL or CSS animation only (no JavaScript).”

GPT-4o — animation attempt 1animation #17.5
✕ CLOSE

GPT-4o · animation · attempt 1 · score 7.5

cat likeness: 7.0aesthetic: 6.0technique: 8.0prompt fidelity: 9.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .tail {
      transform-origin: top right;
      animation: sway 1s infinite alternate ease-in-out;
    }
    @keyframes sway {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(20deg);
      }
    }
  </style>
  <!-- Cat Body -->
  <circle cx="100" cy="140" r="40" fill="#D8BFD8" />
  <!-- Cat Head -->
  <circle cx="100" cy="70" r="30" fill="#D8BFD8" />
  <!-- Cat Ears -->
  <polygon points="80,50 95,20 110,50" fill="#D8BFD8" />
  <polygon points="120,50 135,20 150,50" fill="#D8BFD8" />
  <!-- Cat Eyes -->
  <circle cx="90" cy="70" r="4" fill="#000" />
  <circle cx="110" cy="70" r="4" fill="#000" />
  <!-- Cat Nose -->
  <ellipse cx="100" cy="85" rx="4" ry="2" fill="#000" />
  <!-- Cat Tail -->
  <rect x="130" y="130" width="60" height="10" rx="5" ry="5" fill="#D8BFD8" class="tail" />
</svg>
GPT-4o — animation attempt 2animation #20.0
✕ CLOSE

GPT-4o · animation · attempt 2 · score 0.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <!-- Body of the Cat -->
    <ellipse cx="100" cy="120" rx="60" ry="80" fill="#f4a460" />
    <!-- Head of the Cat -->
    <circle cx="100" cy="60" r="40" fill="#f4a460" />
    <!-- Ears -->
    <path d="M70 20 L90 50 L50 50 Z" fill="#f4a460" />
    <path d="M130 20 L110 50 L150 50 Z" fill="#f4a460" />
    <!-- Eyes -->
    <circle cx="85" cy="55" r="5" fill="#000" />
    <circle cx="115" cy="55" r="5" fill="#000" />
    <!-- Nose -->
    <ellipse cx="100" cy="75" rx="5" ry="3" fill="#000" />
    <!-- Mouth -->
    <path d="M90 85 Q100 95 110 85" stroke="#000" stroke-width="2" fill="none" />
    <!-- Tail -->
    <path id="tail" d="M160 130 Q180 110 160 90" stroke="#f4a460" stroke-width="10" fill="none" />
    
    <!-- Animation -->
    <animateTransform 
      xlink:href="#tail"
      attributeName="transform" 
      type="rotate" 
      from="0 160 130" 
      to="20 160 130" 
      dur="1s" 
      begin="0s" 
      repeatCount="indefinite" 
      fill="freeze" 
      alternate="true" />
  </g>
</svg>
GPT-4o — animation attempt 3animation #37.0
✕ CLOSE

GPT-4o · animation · attempt 3 · score 7.0

cat likeness: 7.0aesthetic: 5.0technique: 7.0prompt fidelity: 9.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes sway {
      0%, 100% { transform: rotate(0deg); transform-origin: 160px 140px; }
      50% { transform: rotate(20deg); transform-origin: 160px 140px; }
    }
    .tail { animation: sway 1s infinite; }
  </style>
  <!-- Cat Body -->
  <ellipse cx="100" cy="140" rx="50" ry="40" fill="#D3D3D3"/>
  <!-- Cat Head -->
  <circle cx="100" cy="80" r="30" fill="#D3D3D3"/>
  <!-- Cat Ears -->
  <polygon points="80,60 90,30 100,60" fill="#D3D3D3"/>
  <polygon points="120,60 110,30 100,60" fill="#D3D3D3"/>
  <!-- Cat Eyes -->
  <circle cx="90" cy="75" r="5" fill="#000"/>
  <circle cx="110" cy="75" r="5" fill="#000"/>
  <!-- Cat Nose -->
  <polygon points="95,85 105,85 100,95" fill="#000"/>
  <!-- Cat Mouth -->
  <path d="M95,95 Q100,105 105,95" stroke="#000" fill="none"/>
  <!-- Cat Tail -->
  <path class="tail" d="M160,140 Q180,130 160,120" stroke="#D3D3D3" stroke-width="6" fill="none"/>
</svg>
GPT-4o — animation attempt 4animation #46.5
✕ CLOSE

GPT-4o · animation · attempt 4 · score 6.5

cat likeness: 7.0aesthetic: 6.0technique: 5.0prompt fidelity: 8.0

the actual svg, as the machine wrote it:

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Cat body -->
  <ellipse cx="100" cy="120" rx="60" ry="40" fill="#d4a373" />
  
  <!-- Cat head -->
  <circle cx="100" cy="60" r="30" fill="#d4a373" />
  
  <!-- Cat ears -->
  <polygon points="80,40 70,75 90,60" fill="#d4a373" />
  <polygon points="120,40 110,75 130,60" fill="#d4a373" />
  
  <!-- Cat eyes -->
  <circle cx="90" cy="55" r="5" fill="#fff" />
  <circle cx="110" cy="55" r="5" fill="#fff" />
  <circle cx="90" cy="55" r="2" fill="#000" />
  <circle cx="110" cy="55" r="2" fill="#000" />
  
  <!-- Cat nose -->
  <ellipse cx="100" cy="70" rx="5" ry="3" fill="#000" />
  
  <!-- Cat mouth -->
  <path d="M95 75 Q100 80, 105 75" stroke="#000" stroke-width="2" fill="none" />
  
  <!-- Cat tail with animation -->
  <path id="tail" d="M150 130 Q180 130, 190 100" fill="none" stroke="#d4a373" stroke-width="8" />
  <animateTransform attributeName="transform" attributeType="XML" type="rotate"
    from="0 150 130" to="20 150 130" dur="0.5s" repeatCount="indefinite" 
    begin="0s" fill="freeze" />
</svg>