14 lines
914 B
Markdown
14 lines
914 B
Markdown
# SVG Jigsaw Solver (Drag'n'Drop version)
|
|
|
|
A Pen created on CodePen.io. Original URL: [https://codepen.io/pouretrebelle/pen/NWNOLPN](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)
|