Creating Amish Quilts with React & SVG
Visit http://staceymosier.com/amish-quilts
While flipping through the classic amish quilt designs in some books printed in the 1980s and 1990s, I felt that the color schemes are so balanced and I wanted to be able to sample today's colors visually. This was a great use case of utilizing the ReactJS framework with SVG.
I also wanted to provide solid colors that are available on the market, such as Moda's line of Bella solids. Some solid colors are distinguishable visually in person, but in translating to a screen they appear as the same color. I would suggest to any quilter to go to your local fabric stores and see the Bella solids in person.
Current Working Features:
- Select Amish Quilt with default color scheme
- Rotate/Shuffle colors in the palette
- Clear the colors to start with a blank slate
- Click on a square swatch to update a single color
- Hide and Show outlines of the block pieces
- Hide and show Letter guide for the palette
Planned Features:
- Click on the shape in the quilt to change the color
- Information of the source of the quilt pattern
- Lock a color in the palette so that you can shuffle the remaining unlocked colors
- Show the Letter of fabric color throughout the quilt
- Zoom in/out of quilt for detail (and to see the letters mentioned)
- Calculate amount of fabric to purchase to create the quilt
- Display moda bella color names during color selection and on the swatch squares
- Persist the current color scheme when changing to a different quilt pattern
- Add a filter by hue / light / dark to the color picker list