I'd seen a book on Escher a while ago and in particular a project that focused on (surprise!) tiles. I was fascinated by the pattern, of course, and thought to myself, “this would be fun to translate to code.” I took a picture of the page hoping that I'd eventually find some time.
Thanksgiving 2021, perfect time! My first task was to create some SVGs. Initially my proportions were all wrong but I at least, for the first tile, was able to understand the lines and how they worked together. Once I had the “pattern” down, I set off to understand the width of the lines in relation to the overall square.
Initially, I was working with a 500x500 square. However, given that there were lines that were split along the edges, I realized that I'd need to change my dimensions to accommodate this. I then settled on a 512x512 square that would allow me to have lines 64px wide as well as the split lines around the border that would be 32px.
Good numbers to work with.
With this in place, it was easy enough to start making the necessary lines for each of the tiles. The end result was 4 SVGs named:
A1 A2 B1 B2
Which end up looking like this:
Export without the dimensions and then optimize the SVGs using one of my favorite tools.
Once these were complete, I initially just used the
next/image component to plop these into the page to work out the rotation. In doing so, I really got a sense for how Escher was thinking / what the pattern is. Everything in the center is an “A” tile. Edges are all “B”. As for rotation, that took some time however the pattern is there: once you have a row, it's duplicated below — in reverse.
And finally, create components out of all these to potentially mess with the colors. Nothing done yet, but the groundwork is there.
Update: The colors API will now allow you to defined the colors as well as have random colors.
This is a Next JS app, deployed on Vercel.
However, I wanted to spin up a new Next JS app and see how Vercel's deployment process has changed since it's been a while since I've used it. Overall, good stuff. UI has changed drastically and the flow is not dissimilar from Netlify.