Tiling Web Page with Triangular or Rectangular Image

Tile Using:

Try It Out!fun for all

  • Select a Tile shape from the list above
  • If you want to experiment with Flickr images, enter a Topic of your choice
  • Select an image form the gallery
  • Adjust viewing Size, if necessary

Math Behind Itfor brainiacs

This web site shows all possible ways to tile a page with an image inscribed in a polygon. The tiling process considered here consists of repeated flipping of the polygon relative to each of its sides until the entire page has a full coverage, independent of the order of flipping. The resulting pattern depends, of course, on what portion of the image is used. Here, we choose the largest polygon of a given shape which fits inside the image frame. If there is room to move the polygon we slide it up or left.

Classification of such tiles (and similar shapes in 3 or more dimensions) is due to Coxeter. Each tile has a letter-like symbol (shown next to the radio selections). In addition, a special, hieroglyphic tile-alphabet has been devised. A tile-hieroglyph (usually called a Coxeter Graph) is displayed next to the page title. You can see the full alphabet here... or read more... in case you are interested.

In the planar case you can, of course, obtain these tiles using elementary trigonometry. In fact, it seems that every generation re-discovers this classification, inventing new notation in the process, thus fueling terminological confusion.

How It Was Donefor geeks

These backgrounds were implemented using SVG. SVG - a markup language akin to HTML - is used to define geometric page layouts. We applied SVG transformations to every polygon in the list to produce a rectangular images which could then be repeated as a standard HTML background. The SVG script was pre-processed with PHP so that an arbitrary image could be passed in the GET parameter.