"A boat sailing on an ocean while birds fly across the sun peeking through clouds in the background"
Rectangles, lines and arcs on <canvas>
ChatGPT 2023
This is very cool - and surprisingly pleasing. Also thanks for posting the JSfiddle with the conversation and the code!
I did notice that you had broken up the creation into parts initially, and I wondered to what degree the model would be able to independently parse the objects and define their relative location. So I asked it to create svg code directly from the your prompt. I put the result into an html wrapper since, I had to add a light blue background, otherwise the white clouds would have been invisible. Here is the full html including the prompt:
<html>
<head>
<style> body { background-color: #E9F0FF; } </style>
</head>
<body>
<!-- Prompt: Please write the code for an svg that shows the following scene: "A boat sailing on an ocean while birds fly across the sun peeking through clouds in the background". -->
<svg width="500" height="500">
<!-- Background with ocean -->
<rect x="0" y="400" width="500" height="100" fill="#0077be"/>
<!-- Boat -->
<polygon points="250,450 200,400 300,400" fill="#ffa500"/>
<rect x="225" y="400" width="50" height="50" fill="#ffa500"/>
<!-- Sun -->
<circle cx="70" cy="70" r="40" fill="#ffd700"/>
<!-- Clouds -->
<path d="M100,100 Q120,80 140,100 Q160,80 180,100 Q200,80 220,100" fill="#ffffff"/>
<path d="M180,50 Q200,30 220,50 Q240,30 260,50 Q280,30 300,50" fill="#ffffff"/>
<!-- Birds -->
<path d="M120,110 Q140,120 140,140 Q140,160 120,150 L110,140 Q100,120 100,140 Q100,160 110,150" fill="#000000"/>
<path d="M280,110 Q300,120 300,140 Q300,160 280,150 L270,140 Q260,120 260,140 Q260,160 270,150" fill="#000000"/>
</svg>
</body>
</html>
@boris_steipe That's really interesting. I love that it produces wildly different results for the same prompt. This is more abstract, I love it.
@boris_steipe Although, I guess this wasn't the "same prompt" really. But still. Also, interesting that it managed to get all the elements in there.
Almost. Your boat got a sail 🙂
@boris_steipe That's true. I'd also be very reluctant to step in a boat, the top of whose hull is that close to the waterline.