Story

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!

Art

Tiled.art has links to 725 tessellation artworks, with 119 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.)

Thanks

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.

And by Alain Nicolas, who explained the world of artistic tessellations beautifully on his website along with hundreds of superb artworks. Big thanks to them both.

And many thanks to the artists worldwide who gave permission to show and animate their artworks here. Especially to 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!

Thanks to countless people for the world of JavaScript, where sophisticated software can run on every device in the world without installation. And to the creators of its many libraries: in particular to Jürg Lehni for the fantastic vector graphics library paper.js, supporting the essentials of manipulating tile outlines (creating, displaying, editing, intersecting, exporting, …) and to the creators of GSAP, which makes animation a pleasure. Also Bootstrap for modals and popovers (via Popper), lodash for utilities, noUiSlider for the animation slider, iro.js for choosing colors, hammer.js for pinch zoom on touch devices, and toastify.js for notification messages. When developers donate their time and expertise to create something useful and make it freely available, it inspires the rest of us to do the same.

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.

And for private matters you're welcome to send an email to [email protected].

To Teachers

Teachers, if you're using this site with students we'd love to know. What ages? When you have a minute please send an email to [email protected]. Thank you!

Videos

These videos may be helpful:

Tiled.art in 90 seconds — a quick overview of site features.
Creating Tessellated Art — an example of making a tessellation (ducks) using the “Create” page.
Tiled.art and Inkscape — an example of making a tessellation (fish) using Tiled.art for the tile outline and Inkscape for the tile details.

Source Code

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].

Bloopers

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.

Other languages