codepens/svg-jigsaw-solver-drag-n-drop-version

SVG Jigsaw Solver (Drag'n'Drop version)

A Pen created on CodePen.io. Original URL: https://codepen.io/pouretrebelle/pen/NWNOLPN.

Give it a scroll, and drop in your own image if you fancy it.

Experimenting with ideas for my generative art jigsaw puzzle project, follow @abstractpuzzles on Instagram for updates, launching soon!

This pen uses a lotttt of css variables and calc maths to figure out how/where to position the pieces and set their transform-origin, and a spot of Sass's random to pick a rotation for each of them. It only uses js to set a css variable for the scroll position, and an enhancement to fit the scattered pieces to the aspect ratio of the screen (no viewport lengths in svgs, sad times).

Thanks to @cassie-codes for the svg help and inspiration!

(definitely works in Chrome 85, probably most modern browsers,no guarantees going back)