Jigsaw puzzle generator

After reading this thread, I started looking for a jigsaw generator. I found this older thread. In both of them there are some links, google found a few others. All in all, I wasn’t satisfied with the results, so I wrote my own. I hope this is useful to some of you as well.

This has seen some updates over the years (and an additional hex / circle variant), and is now hosted here: https://draradech.github.io/jigsaw/index.html


Code available on github, in case you want to fork it. Static webpage with javascript - everything is calculated client side.

Old links:
Jigsaw puzzle generator
Jigsaw puzzle generator v2 (now with rounded corners)
Jigsaw puzzle generator v3 (separate paths for horizontal, vertical and border)

339 Likes

Thanks! I’m looking forward to trying out out!

3 Likes

Goes into the GFUI just fine. No obvious issues… Checked it out in Inkscape too and seems good.

8 Likes

Wow! Thank you for your generous offering!

7 Likes

Thank you! :smiley:

2 Likes

Awesome!

I don’t have a GF to try it with yet, but it’s on my list. Thanks!

2 Likes

Thanks for this!

2 Likes

Wow…thank you for taking the time to write this. I will try it out today on my other laser…:smile:

3 Likes

Very cool of you to share this with us. Thank you!

2 Likes

Thanks so much! Your generosity is appreciated :slight_smile:

3 Likes

wow. that rocks! Thank You! :thumbsup:

2 Likes

Many thanks. Bookmarked here and in Chrome.

3 Likes

This is great, @Draradech! Thanks for creating it so that the rows and columns are created from individual paths versus creating puzzle shapes. This is definitely the best approach to lasing a puzzle.

When I opened the file in Illustrator, it opened as one large compound path that all of the other paths (perimeter border, rows, columns) were contained in. When I released that compound path, I was able to see all of the individual paths. I don’t have a Glowforge to test with so I’m not 100% sure how it will handle a complex compound path that is designed for a cut operation; I know for engraving, the UI will accept compound paths that have a fill applied. I don’t know if it will drill down into the compound path itself to recognize the individual paths and use those individual paths for determining cut operations.

Maybe someone will load it into the GF UI and test it for us!

Is it programatically an additional step to create a compound path from the results?

5 Likes

This is really awesome! Thank you for making it.

If you’d like a bug report… If you take the settings out to the extreme, some of the tabs overlap each other.

Not sure how solvable that is, but just something I noticed when playing around with the settings.

3 Likes

I directly generate raw svg (or more precise, the d attribute of a single svg path) in javascript (as a string operation). In that case it’s easier to create a compound path (one move command, then keep going) instead of singular paths (close the current path, open a new one, move command, keep going).

4 Likes

I know of the overlapping, I think it’ll be a problem even before, though (very thin connections for some pieces). I just wanted to keep all options open. Minimum tab size with maximum jitter (or the other way around) is still useful, just don’t put both too high.

9 Likes

How wonderful that you created a generator for it! (I still just draw the danged things!) Looking forward to trying it. :grinning:

2 Likes

This is awesome!

2 Likes

What a great tool! Thanks for so generously sharing it with us!

1 Like

Thanks! this is awesome!

1 Like