From Napkin Doodle to Kaleidoscope: Designing a Radial Pattern Tool with ChatGPT

 From Napkin Doodle to Kaleidoscope: Designing a Radial Pattern Tool with ChatGPT

A story about turning a scribble into a working browser app — and why "vibe coding" with AI is a legitimate design workflow.

The itch

I've been obsessed lately with radial symmetry — mandalas, rose windows, kaleidoscope textures, the way a single ugly little squiggle can become breathtaking the moment you repeat it around a center point. I wanted a tool that let me draw once on a plain square canvas and watch that drawing get folded, mirrored, and wrapped into concentric rings of a 6-fold flower.

I didn't want to open Illustrator. I didn't want to write a spec. I wanted to sketch the idea, hand it to ChatGPT, and see if we could vibe our way to a working tool.

Spoiler: we did. Here's how.

Step 1: The doodle

Before typing a single word to the AI, I grabbed a stylus and drew this:

Three rings. Six triangles in the middle meeting at a center point (I put a little dot there so I could point at it later). A middle ring of 12 trapezoid-ish wedges. An outer ring of 24 skinny wedges. Wobbly, asymmetric, obviously drawn by a human who was not trying to be tidy.

That doodle is the entire design document. No measurements. No coordinates. No math. Just: "this is the vibe, figure out the geometry."

This is the part I want to convince other designers of: a rough hand drawing is often the fastest, highest-bandwidth way to talk to an LLM about a spatial idea. Words fail. "A hexagon with subdivided rings mapped radially" reads like a math paper. A doodle with a dot in one triangle reads instantly.

Step 2: The prompt

Here's what I actually typed (verbatim, typos and all):

"in html/js I want a canvas that I can change color of brush and change brush size where i can foresee brushsize while setting the brush size and while moving around on canvas even when without painting/drawing, i want to see brush size preview. You will have a 400x400 canvas where i can draw. Then examine the attached image, notice how i have dot in one of the triangles. that's where i want my drawn square canvas to map to where the bottom sides squishes together so make a point bottom point of triangle with dot...for other triangles they're copies with the similar mapped square facing inward so it looks like symetrical hex for the inner ring, then outside of that map square to similar trapezoid or whatever the shape is to connect the 12 sided (12 points) to the hexagon's outer point plus dividing in half points so 12 points. then similarly for outer most 24 sided, 24 points map to the inner 24 points. Does that make sense?"

 

Reading it back, it's a mess. Run-on sentences, unclear pronouns, three "does that make sense" hedges. But it works because:

1. It anchors to the image. "Notice how I have a dot in one of the triangles" — the AI now has a reference point in a shared coordinate system.
2. It describes the mapping as a transformation, not coordinates. "The bottom sides squish together to a point." That's a verbal description of a projective/affine map. The AI knows what to do with that.
3. It states the symmetry rule. "Other triangles are copies." That single sentence saves me from specifying 42 individual wedges.
4. It defines the UI contract separately from the geometry. Brush preview, download buttons — those are boring plumbing. Listing them explicitly frees the AI to focus its cleverness on the fun part.

Step 3: What ChatGPT built

What ChatGPT built

Here's the link to the tool that you can try yourself.

It came back with a single HTML file — one square 400×400 drawing pad, a brush color picker, a size slider with a live preview dot, and a mouse-follow preview so I always know how big my next stroke will be even when I'm just hovering.

Then, next to it: a fast mapped radial preview. Every stroke I make on the flat square gets projected in real time into:

• 6 inner triangles — the square gets squished so its bottom edge collapses to the center point (that dot in my doodle).
• 12 middle wedges — the square gets mapped onto trapezoids that bridge the hexagon's 6 outer points plus 6 midpoints.
• 24 outer wedges — the square gets mapped onto the thin outer ring pieces, doubling the point count again.

Draw one droplet on the square? You get 6 droplets pointing inward, 12 droplets radiating in the middle ring, and 24 in the outer halo. All updating live as I draw.

Two download buttons: the raw 400×400 square (the "texture"), and a 4000×4000 render of the full radial composition (the finished piece, poster-sized).

Step 4: The moment it clicked

I drew a lazy little teardrop on the square. Just one. And the preview canvas exploded into this:

A full mandala. 42 wedges of one teardrop, arranged into what genuinely looks like a botanical illustration or a stained-glass rose window. The tool did the composition work; I only did the mark-making.

That's the design insight I want to leave you with: when you build a tool like this, you're not building a drawing app. You're building a symmetry engine that turns any texture into a pattern. The user's job becomes tiny and playful — just make an interesting square — and the tool handles all the tedious repetition and geometry.

Lessons for pattern designers vibing with AI

If you make patterns, textiles, tiles, jewelry, laser-cut ornaments, tattoo flash, or anything else that repeats — here's what I learned:

1. Draw the doodle first, prompt second. A photo of a napkin sketch is worth roughly a thousand words of geometry description, and the AI reads images natively now.
2. Put a dot on it. Literally. Marking one reference point in your sketch ("this is triangle #1, this is where the base collapses") gives the AI an anchor to reason from. Symmetry rules then extend from that one anchor for free.
3. Describe transformations, not coordinates. "The square's bottom edge squishes to a point" beats trying to write out [x1,y1] → [x2,y2] mappings by hand. The AI knows the math; you just need to name the deformation.
4. Separate the boring plumbing from the interesting geometry. In one paragraph I asked for the UI (brush, preview, downloads) and the hard part (the radial mapping). Bundling them meant the AI didn't over-engineer either.
5. Ask for a live preview. The single biggest UX win in this tool is that the mandala updates while you draw. It turns iteration from "guess, export, look, sigh" into a tight feedback loop where you can literally feel how a stroke will echo around the ring.
6. Ask for two exports: the source and the render. The 400×400 square is your reusable texture — you can bring it into other tools, print it, remix it. The 4000×4000 is the final piece. Designers need both.
7. Don't clean up your prompt. Seriously. My prompt has typos and three "does that make sense"es. Modern LLMs handle that fine, and forcing yourself to write a "proper" spec is the exact friction that stops most people from ever starting. Ramble at it like a friend. Attach a picture. See what happens.

Try it, break it, remix it

The tool lives on my blog under "Draw square texture in repeating circular pattern." Open it, drag a squiggle across the square, and watch the mandala come alive. Try a single dot. Try a spiral. Try writing your name. The tool doesn't care what you draw — it only cares that you draw.

That's the whole trick of designing with AI: you don't need to know how to build the machine. You need to know what it should feel like to use it, and be willing to describe that feeling — messily, visually, with a dot in one of the triangles.

Happy patterning.