Symmetry FTW

There's something quite magical about symmetry.

You can take pretty much any design and reflect it around a center and get something quite marvelous.

Simple smooth curls	Almost-triangles

Lines	Circles

A random walk? Sure why not?

The basic technique is simple:

Make a shape
Pick a point
Draw the shape rotated around the point however many times you like

I make most of my art in SVG using XQuery, so this is really easy. Draw the shape with a unique id within an svg:defs section. And the make a series of svg:use elements referencing that id with the appropriate rotation transformation on it. For example:

<defs>
  <g id="path-1">
    <path d="M 545 863 L 542 863 L 545 863 L 542 858 L 538 865 L 545 865 ..."
          stroke-width="5" stroke="url(#autumn)"/>
  </g>
</defs>

<use xlink:href="#path-1" transform="rotate(51.429,800,800)"/>
<use xlink:href="#path-1" transform="rotate(102.857,800,800)"/>
<use xlink:href="#path-1" transform="rotate(154.286,800,800)"/>
<use xlink:href="#path-1" transform="rotate(205.714,800,800)"/>
<use xlink:href="#path-1" transform="rotate(257.143,800,800)"/>
<use xlink:href="#path-1" transform="rotate(308.571,800,800)"/>
<use xlink:href="#path-1" transform="rotate(360,800,800)"/>

More intricate shapes give more intricate designs. Here we have some fairly high order polynomial spirals creating complex overlaps and interweavings:

Bilateral symmetry can be nice too. The technique here is a little more involved because SVG doesn't have a built-in operator for reflecting across a line, so the calculations have to be done on the XQuery side.

Reflection of a point across a line is a composite affine transformation:

Translate the point to the start of the line
Rotate by the angle of the line
Scale y by -1 (to invert)
Rotate back
Translate back

Each affine transformation corresponds to a matrix. For example, the matrix for 2D translation is:

| 1 0 tx |   
| 0 1 ty |
| 0 0  1 |

Scaling is:

| sx  0 0 |   
|  0 sy 0 |
|  0  0 1 |

Rotation about the origin is:

| cos(θ) -sin(θ) 0 |   
| sin(θ)  cos(θ) 0 |
|  0           0 1 |

Composing two operations is matrix multiplication. For example, to apply T2 and then T1, multiple T1 X T2:

     | a b c |       | g h i |          | ag+bj ah+bk ai+bl+c |
T1 = | d e f |  T2 = | j k l |  T1xT2 = | dg+ej dh+ek di+el+f |
     | 0 0 1 |       | 0 0 1 |          | 0     0     1       |

Applying the transformation to a point amounts to another multiplication of the affine matrix by the extended point vector:

    | a b c |      | x |        | ax + by + c |
T = | d e f |  P = | y |  TxP = | dx + ey + f |
    | 0 0 1 |      | 1 |        | 1           |

Once we calculate this matrix, we can use it in an SVG transform using the "matrix" operator. A few small details need to be taken care of. First, SVG represents the matrix in column-major order, so we need to reorder the coordinates. Second, SVG doesn't bother with the final row of coordinates, as it is (for 2D affines) always (0, 0, 1). So the matrix T above is represented in SVG as "matrix(a d b e c f)".

Polynomial spirals reflected across a random line through a point somewhere near the center of the canvas:

Designs that are not as a whole symmetrical can still include some elements of symmetry with interesting results. In these two images, the design is reflected across several different random lines through different points somewhere near the center of the canvas. The results are somewhat symmetric and somewhat not.

Another kind of semi-symmetry is rotation along a curve. In these two images, instead of rotating uniformly about a central point, the rotation is normal to and centered along points in a spiral. Again: somewhat symmetric, somewhat not.

Incomplete symmetries can be interesting.

Regular tiling in a spiralling field that doesn't quite fit at the seam. Lines of symmetry curve.

The mandalas are almost symmetrical, but there are small asymmetries throughout. Look at the central circle of dots in the left-most mandala, for example.

Local symmetries in patterns that overall are decidedly non-symmetrical.

Symmetry creates an order and an expectation. Symmetry-breaking creates interest. Balancing the two is where the magic lies. Notice that the purely symmetric designs I started with aren't actually symmetric overall. The shading of the lines and the backgrounds breaks the symmetry, adding a little interest.