Site developer Rick Mohr says: "Like so many others I was captivated early on by the art of M.C. Escher. Decades later when investigating the world of tessellations to interest my son I was stunned by the capabilities of Kevin Lee's TesselManiac, and fascinated by the explanations and art of Alain Nicolas."
With further explorations the ideas for this site began to emerge:
- Introduce visitors to the inspired work of tessellation artists from around the world.
- Use the now-mature capabilities of web graphics to help people understand tessellation art through animations.
- Give clear non-mathematical explanations of the symmetries and classification systems used in tessellation art.
- Offer a full tessellation editor, with the option of adding detail using Inkscape.
- Make everything work on a smartphone, to open the world of tessellation art to the millions of users without a desktop computer.
Fast-forward three years, hundreds of artworks, and tens of thousands of lines of code — welcome to Tiled.art!
Tiled.art has links to 714 tessellation artworks, with 121 shown and animated. That’s a lot of great art! But many more artworks are out there — how were these chosen?
Linked artworks have these features:
- true tessellation - no overlaps or gaps
- single motif
- whole figure - not just the head, for example
- well-proportioned - figure has (mostly) well-formed parts and realistic angles
- distinct - adjacent figures are clearly distinguished, so you can see the symmetry
- isohedral - figure interlocking is consistent (a tile edge touches the same part of its neighboring tile everywhere you look)
- novel - doesn’t duplicate an earlier design
Shown artworks have these additional features:
- permission - the artist gave permission to show the artwork
- animatable - compatible with an animation showing the underlying structure:
- just figures - it’s cool to stage tessellated figures with other elements, but that doesn’t play well with structural animations
- consistent tile outline - small variations in tile outline can make an animation look sloppy, sadly excluding some nice hand-drawn tessellations
- one artwork per tessellation symmetry for each artist
(See also a few by site developer Rick Mohr here.)
This site was inspired by the pioneering work of Kevin Lee, who had the vision that tessellations could be dynamic and the skill and sweat to prove it with TesselManiac.Alain Nicolas, who explained the world of artistic tessellations beautifully on his website along with hundreds of superb artworks. Big thanks to them both.
Alain Nicolas and Makoto Nakamura, who agreed early on when there wasn’t much to see, and Yoshiaki Araki for helpful suggestions along the way. And not least to M.C. Escher, for inspiring all of us with his mind-expanding art!
And big thanks to my wife Chloe and son Evan who supported my single-minded “tessellating” for three years, offering many helpful insights and ideas along the way.
Tiled.art is a static website built using 11ty with handlebars, bundled with webpack, and hosted by Cloudflare Pages. It uses the fonts Nunito and Cabin Condensed, and icons from Icons8. Many thanks to the creators of these resources. Also to the creators of two nice content utilities — ExportSheetData for exporting Google Sheet data as JSON, and the Google Docs to Clean HTML Converter. Finally, this site would not be possible without Dragon and Vocola, for coding by voice with a typing disability.
Community, Support, and Contact
For discussion and support please use the Tiled.art Google group.
If you Create a tessellation and want to share it, the best way is to export an image and post it on social media with the tag #TiledDotArt. You can search that tag to see art created by others, and some artworks so tagged will be posted to the Instagram account tiled_dot_art.
Teachers, if you're using this site with students we'd love to hear from you. How do you structure your tessellation classes? What parts of the site are useful or need improvement? When you have a minute please send an email to [email protected]. Maybe we can connect people around the world and share ideas. Thank you!
These videos may be helpful:
Sharing source code is under consideration for this site's core capabilities, including the full Create page (tessellation editor, animation, export, etc.). If you are interested please send an email to [email protected].
When software works it's a beautiful thing. But the road to get there is paved with countless bugs, and the graphical ones can be fun — tessellations have no overlaps or gaps, right?
Here's a gallery of bloopers captured along the way.