Code for patterns: Tiles #1

This started out as an experiment to generate SVG shapes to build a pattern via JavaScript. The first cut was getting down the mechanics of generating shapes, arranging them in a grid, and assigning each shape a random color from a predetermined palette.

Building on the patterns: Tiles #2

This is modified from an earlier version. The color scheme is changed and an enhanced pattern is generated by randomly overlaying triangles on the squares. Triangles are colored by tints or shades using the HSL color space, depending on size. Tiles are also randomly rotated in increments of 90 degrees.

Going in circles: Tiles #3

This time circles are uses, instead of squares and triangles. Again, a different palette is used and the alpha values are randomly chosen. In Tiles #2 the triangles are randomly rotated for placement. The code remained in this version, at least initially while I was making other modifications. Apparently, the circles were being rotated around a point other than their own center. This caused an overlay effect. It also disrupted the visual rigid grid. Both effects went away when the rotation transform was removed. In the end, serendipity won, turning a bug into a feature.