Thanks for taking a look at subtiles!

Source code repo - pull requests welcome!!

subtiles is a web app that allows you to create subdivision tilings. It takes in SVG files with a certain format which defines the subdivision. You can supply your own files with the open button or use one of the presets with the preset button. The web app then parses the file and uses the information to calculate the subdivided geometry - you can use the plus and minus buttons to increase or decrease the displayed subdivision level. There are also different mapping functions which can be selected with the mapping button, but these have more effect on some tilings than on others. Different colour palettes can be selected with the palette button and the theme can be toggled with the dark / light mode / button. The thickness button allows you to set the line thickness and the download button downloads the subdivision tiling as an SVG.

Tip: press L to view the program logs!

A graphic created by recursively dividing quadrilaterals into 5 more quadrilaterals.

SVG input file format

Input files can be created with an svg editor like inkscape. Each path in the file represents a tile and SVG groups are used to define the relationships between them.

Each tile type that you want to define a subdivision rule for should be in its own group. The only other thing in the group should be a group of tiles to subdivide it into. Each iteration, tiles that match the outer tile will be subdivided into those in the inner group.

Matching of tiles to subdivision rules is done by matching the number of vertices of a tile to the number of vertices in the outer tile of the subdivision rule. If no subdivision rule matches, the tile is not subdivided.

<g> outer subdivision rule group
├── <path> parent tile to be subdivided
└── <g> inner subdivision result group
    ├── <path> top right child tile
    ├── <path> top left child tile
    ├── <path> bottom right child tile
    ├── <path> bottom left child tile
    └── <path> center child tile
		

You can take a look at the square and pentagon presets for examples.

This is another example with two tile types.

More Info

If you would like to know more about subdivision tilings please take a look at the wikipedia page - the references and external links on this page are also very helpful.

This tiling uses the "radial" palette, applied after a few subdivisions with a different palette.

This image was made with the conformal mapping function and the square preset.

Custom colouring functions can be defined in the `js/palette.js` file to get results like this.
Make sure to add them to the palette menu in `index.html`!