How to Use ChatGPT to Make Weird SVG Art
Tags: chatgpt, ai, aiart, creativecoding
Published: 2023-08-07 07:02:34

Vector-based imagery is the quiet workhorse of the digital art world. While raster-based photography and illustrations grab all the headlines, [vector art](https://en.wikipedia.org/wiki/Vector_graphics) — clean, scalable, performative — is found everywhere. It’s in your logos, in your icons, even in your [language-learning app](https://design.duolingo.com/illustration/characters#body-types) (remind me to tell you how bad my Turkish is btw).

And while some of the newer [AI vector art generators](https://www.notion.so/How-to-Use-ChatGPT-to-Make-Weird-Vector-Art-c18bf09802b846c9aa2304aa2d18885a?pvs=21) show some promise, I’ve recently discovered that trusty ol’ ChatGPT is actually great at making REALLY BAD SVG ART. And all you have to do is ask!

```markdown
Please return SVG code depicting a man.
```

Then ChatGPT returns something like this:

```markdown
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 100 200">
  <!-- Head -->
  <circle cx="50" cy="40" r="20" fill="black" />

  <!-- Body -->
  <line x1="50" y1="60" x2="50" y2="120" stroke="black" />

  <!-- Arms -->
  <line x1="50" y1="70" x2="30" y2="90" stroke="black" />
  <line x1="50" y1="70" x2="70" y2="90" stroke="black" />

  <!-- Legs -->
  <line x1="50" y1="120" x2="30" y2="160" stroke="black" />
  <line x1="50" y1="120" x2="70" y2="160" stroke="black" />
</svg>
```

Which you can then just copy and paste into an HTML file using an online sandbox like [CodeSandbox](https://codesandbox.io/) or [Stackblitz](https://stackblitz.com/) and end up with something like THIS:

![stick figure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c11nsjf4x8lw6mjwxrt3.png)

Not much of anything yet, but you can iterate with ChatGPT. Let’s start with a background:

```markdown
Please add a blue background, 
and make the SVG have a 3:2 aspect ratio. 
Also make the man's limbs thicker.
```

…which returns code depicting this:

![stick figure with blue background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q86zx682m7kt5if4y2y9.png)

Still looks like a 3-year old drawing on MS Paint. Let’s get more detailed:

```markdown
Now give the man joints -- elbows and knees. 
Also turn the background into a cityscape at night.
```
We get this:

![stick figure at night](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o3lq6wog4gdurz9xa56.png)

…and now it’s getting weird. But it can get even weirder!

```markdown
Please make the background a lighter blue-grey. 
Make the man standing in a superhero pose. 
Also give him yellow slits for eyes, 
a tan jaw and black mouth. 
Also put a yellow horizontal ellipse on his chest. 
Also give him two black triangles on top of his head. 
And add some clouds and stars to the sky.
```

Which returns this:

![stick figure as bad version of batman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4w1y1o60gffr8ch57wz.png)

…and if you can’t tell I’m trying to get ChatGPT to draw Batman, that’s ChatGPT’s fault, not mine!

Actually, why don’t I just ask for that directly?

```markdown
Hey ChatGPT, please draw me Batman using SVG.
```


![a weird black circle face with red nose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y9cjio5t9nibx313yd4.png)

Way better! (Please note my sarcasm). 

Alright let’s try something else:

```markdown
Now please  return a new SVG image showing a man
in blue and red tights flying over a city.
```


![a crude vector drawing of a red and black striped bug man with a city in the background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doirgpube02fvmfxyt7c.png)

Look, it’s Ant-Man’s cousin the Red Bee! What if I ask for 

```markdown
"Super Mario World" with an aspect ratio of 3:2.
Please have at least 40 shapes and 8 colors.
```


![a vaguely familiar abstract version of super mario world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy71sl4p3z8z114yjcs5.png)
…it’s kinda appropriate… right? We've got rolling hills, clouds, a "Mario" figure, etc. Let's try an even better (IMHO) 1990s videogame hero:

```markdown
Sonic the Hedgehog
```


![a light blue hedgehog made of basic shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfa102vhn5uhnfo36av2.png)

Ooh, shiny eyes! But otherwise, totally wrong. Alright let’s try one more time to get something that looks at least sort of normal.

```markdown
Please depict Spider-Man!
```

![a crude red figure with black details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11tsoa6z5wbyosjjwcjd.png)

As you can see, ChatGPT isn’t coming for anyone’s vector art job yet (we’ll leave that to those b—stards at [Adobe Firefly](https://www.youtube.com/watch?v=CEce0NvMPoo) ;) ). But as a source of surprise and glitchy intrigue, it’s pretty fun. Stay turned for more SVG explorations!