Weaving, knotting and knitting in SVG
October 2010
David Dailey

Background: some of my experiments with thread

I recently gave to a class of mine the task of creating something that looks like this using SVG:

My initial solution to the weaving of threads was based on my own 9 year old attempt to solve the problem of enumerating different weave patterns (using, of all things, HTML). That is, the middle "apparent rectangle" is actually two rectangles. The problem with this, is that the interweaving of N threads of warp with n threads of woof will take N2 rectangles which grows the DOM too fast to be practical for actual examples of weaving. That's one problem. The other is that the individual threads are not unified as an object. For example, a gradient applied to a thread would not transition smoothly across n rectangles, and the semantics of this illusion is wrong.

While thinking a bit more though, I thought about another way of rendering the illusion: using stop-opacities. The DOM is still sized k * n for k>=2 because of all the stops that have to be involved, but at least the threads are threads and there are less than n2 objects now.


 Then, one of the students brought up the topic of Celtic knots and Gabriel Borel wrote this example of a Celtic knot in SVG. In it, there is simply a pen-up pen-down, turtle graphics approach to the problem, more elegant in many ways than the stop-opacities linked to above. A thread remains a thread (well, at least in theory, though Gabriel's solution economized on code based on symmetries) so we don't have to build a series of stops to mimic the rising and falling of threads.

But other people turned in other approaches. Some people reused objects within clippaths applied to the other objects. Some people made small clipping regions over the intersections. Others used masks. And finally, someone suggested recently just using stroke-dasharrays on lines to let a thread rise or fall. That might be not too difficult to compute exactly where the dash should rise and fall by using getTotalLength() and getPointAtLength() , but conceptually, the concept of an underpass or overpass is something that is more easily thought of as part of the path geometry than as part of its stroke-dasharray, at least for me.

So here's a recent bit of play with this:

See also here (which is an improvement)

Of course the animation works in Opera 10, Internet Explorer (with Adobe plugin), Chrome and Safari, but for Firefox you'll need 4.0 (currently in pretty stable beta). You'll note that (sigh!) the little bug (not to be confused with the vehicle of the same name) changes speed (to infinity!) as it goes under an underpass and that, well... it doesn't really go under an underpass. That's my problem! I think SVG may not be able to properly model knitting, knotting, weaving (or even traffic flow) if it doesn't allow me to somehow yoke a thread's temporary position to something like a z-axis.

The topic borders vaguely on the issue of what are called 2.5 dimensional effects within SVG -- how to use 2 D displays to simulate 3D objects. Well, clearly people have been doing this in art for millenia! But in knot theory we can describe each knot as drawn in the plane as a planar four regular graph, and then provided that we indicate for each apparent crossing which thread goes over and which goes under then we have rendered the topology of the knot in 2 + dimensions. Anyhow, I think it's worthy of more investigation not just for the mathematics of knots but for the practical and sumptuous art of weaving. And maybe SVG could grow a little in the process!