Back to projects

Sabine Hill Tile Customizer

This is a little react app that allows you to manipulate SVG patterns and see them in a grid.

Created for Sabine Hill, it allows customers to preview their choices of tile color and arrangement. I worked on this project in partnership with New Sky Websites.

This project was all about manipulating SVG data in react.

Since tracing the 30-plus SVG patterns and then editing them by hand in order to make them play nicely with React didn't sound appealing, in true developer fashion, I also created a nice little node command-line tool that does the work for me. Nice 👌.

You can color a large variety of different patterns then view the pattern you create in a 16x16 grid! Different combinations of the same pattern will make some really interesting designs.

I've included the tile customizer itself here, so have a play! ⇓ ⇓ ⇓

scroll up