One of the top reasons I never blog is because I always feel obligated to make images for my blog posts. And then I spend too much time making images. I decided to generate one using JavaScript. It turned out super weird looking but it was fun to make.

Anyway, I used Rough.js in Codepen using Skypack. Rough.js is a nifty library for making canvas and svg graphics with a hand-drawn appearance.

I started with a picture from a vintage cookbook (James Beard's Fireside Cookbook). I added a rough polygon for a background and then some circles as decoration.

It was pretty fun experimenting with different options even if some were pretty hilariously ugly. I call this one "diseased cookies":

Finally I used the regular Canvas browser API to add some text.

If you'd like to play around with it, here is the CodePen I used: