There is also Unmade using an interactive Canvas to let customers modify (not create) their designs. I was pretty amazed by the quality of the realtime rendering.
A few examples:
1.
Dragging the pattern around (note the deforming):
Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).
We have a similar feature at 43Layers (e.g. [1]) and went through a couple iterations. Ours was made more complex because it has to mesh with a 3D canvas, so originally it was a combination of overlapping DOM elements, an SVG element, and a 3D canvas. We also use React, so movement of the selection box created events that generally had to flow through multiple react elements. Getting the coordinates of everything matching in all three contexts was an exercise in annoyance (given how simple it seems), especially for things like fonts which have bounding boxes which bear only a passing relationship with the actual bounding boxes of the text on screen.
Eventually, we ditched the SVG and moved more things into 3D, which made for a better design in the end. For example, now we calculate 3D geometry for the font from its curves and get an actual real bounding box for it.
Anyway, it's interesting to read about how other people solved the same problem.
We used fabric.js as well to create custom laser printed/engraved products. As with you, our first iteration was just standard javascript with jQuery, but fabric.js made a lot of things much easier.
Thanks! That site is like an eery Dublin-doppelganger of my plans, would be cool to chat with you about it (though I get the impression you're no longer with them).
I'm no longer the CTO, but I'm still friends with the rest of the founders and lend a hand every now and again (I'm still a shareholder in the company).
Drop me a line at malonso [at] loopbit.com if you want :)
I have used http://fabricjs.com/ in another project (not related to printing). FabricJS is used/developed by printio.ru . Its a good open source alternative.
Fabric.js is canvas-based, so it's a slightly different beast (although between being used in t-shirt designer tools, and having svg<->canvas conversion, the ultimate result is the same).
I'm using fabricjs for annotations as well and it's a great library. The biggest downfall of using canvas as a renderer as opposed to svg is that it doesn't look great if you provide zoom controls. Lovely crisp SVG paths rendered as pixels on a canvas :/
Thank you Mark! We were actually originally using Raphael but recently switched to something custom. We got a lot more performance for our use case. I would love to open source that code at some point.
We ended up having to duplicate some of the functionality of Raphael ourselves while writing the processing mentioned in the article (like to locate regions of an uploaded image after transformation). We thought it was best to just use this code to do the layout as well. It also ended up being a lot smaller than a full library, since we're not using a ton of features.
That said we played around with Snapsvg, and it is great if you're lucky like us and don't have to support IE6.
Depending on the complexity of the SVG (e.g. scribbles on top of scribbles), rendering SVGs can be very slow. If the SVG is not changing, it makes sense to render it as little as possible. I am doing the same thing with a d3 project, where the browser has trouble redrawing 50k elements.
1. Dragging the pattern around (note the deforming):
https://preview.unmade.com/knitwear/jumpers/studio-moross/kn...
and
https://preview.unmade.com/knitwear/scarves/studio-moross/pa...
2. Modifying the pattern with some physics:
https://preview.unmade.com/knitwear/scarves/moniker/pied-de-...