Skip to content

A tiny helper app for drawing cross stitch patterns. Less than 100 lines of code with a little html, css, jquery, and an erb compiler

Notifications You must be signed in to change notification settings

alyssahursh/cross-stitch

Repository files navigation

Cross Stitch Pattern Drawing Tool

A tiny web app for drawing cross stitch patterns. Less than 100 lines of code with a little html, css, jquery, and an erb compiler. Play with it here.

Sample pattern and completed project

Cross stitch pattern and finished project

Technologies

  • jQuery
  • HTML5/CSS3
  • Ruby 2.3.1
  • Deployed with Github pages

How to use

Click on over to the app, then just start clicking around. Change your drawing color by clicking on the palette to the right. Made a mistake? That's okay, it happens. Clicking on an already-colored square will either update the square's color to your current drawing color, or — if the square's color and the drawing color are the same — turn the square white.

Using this tool seems really tedious

Yeah, well so is cross stitch

Why did you build this?

  1. I had a cross stitch project in mind and needed a tool to plan the layout.
  2. When I was 10, I tried to make my own cross stitch patterns in Excel, but Excel didn't have conditional formatting yet, so changing the color of every cell took 3+ clicks. I just wanted to build the thing that 10-year-old-me had wanted, and to make that kid proud.
  3. I wanted to see what I could build in <100 lines (without writing totally obtuse code)

If I had more time

  • I'd build out an option to bulk-clear either by color or by selecting an area.
  • I'd fix the cell resizing that happens on narrow screens.
  • I'd add darker gridlines to demarcate rows and columns of 10 squares to facilitate with stitch counting.
  • I'd develop an alphabet tool to allow a user to place letters rather than having to draw them by hand.

About

A tiny helper app for drawing cross stitch patterns. Less than 100 lines of code with a little html, css, jquery, and an erb compiler

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages