On this page, I added SVG to the background. It is best visible on a wide screen (desktop).
I had in mind to use this as a background on every page of my website, but I decided to leave the background blank on most pages.
My goal was to make something simple, that can be generated very fast in the browser. I also wanted to add randomness, so that on every page load (and for every different user on the world) the background image will be different.
Since I never used SVG before, I did not design a pattern before I started. My approach was to learn and implement something very simple, and then play around with it until it becomes interesting. I did not want to have the risk that I have to struggle with this new thing (SVG) to hopelessly create exactly what I had in mind.
Below I will illustrate the steps I took. The JavaScript code will be on the left, and the generated SVG on the right. I will not explain the basics of JavaScript nor SVG, there are many tutorials online about this. Even without understanding any of the code, the logic is easy to follow, just look at the output images.
I started off by drawing a simple grid:
function generateSvg() {
var svg = '';
var width = 50;
var height = 50;
for (var index_x=0; index_x < 6; index_x++ ) {
for (var index_y=0; index_y < 6; index_y++ ) {
var rectangle_width = width;
var rectangle_height = height;
svg = svg + '<rect x="' + index_x * width + '" y="' + index_y * height +
'" width="' + rectangle_width + '" height="' + rectangle_height +
'" stroke="black" fill="transparent" stroke-width="2"/>';
}
}
return '<svg width="300" height="300">' + svg + '</svg>';
}
I use the height and width parameter to calculate the start point for drawing a rectangle.
The rectangle_width and rectangle_height parameters are the width and heights of the actual rectangles. If I change those, I can make smaller and larger rectangles, that always start from a fixed point.
In the two examples below, I made the width and height 8 pixels smaller in the first image, and 8 pixels larger in the second image. As you can see, the squares grow and overlap eachother.
Here is where I start to add randomness. If I choose every height and width at random from a list of only three options (40, 50, 60), I will take a bit from all previous images. Some shapes will lay perfectly next to eachother, some will overlap, and some are shrinked a bit, leaving some space between them and the neighbour. Since both height and width are chosen at random, not all shapes will be squares.
function getRandomItem(list) {
var random_index = Math.floor(Math.random() * list.length);
return list[random_index];
}
function generateSvg() {
var svg = '';
var width = 50;
var height = 50;
var width_choices = [width - 10, width, width + 10];
for (var index_x=0; index_x < 6; index_x++ ) {
for (var index_y=0; index_y < 6; index_y++ ) {
var rectangle_width = getRandomItem(width_choices);
var rectangle_height = getRandomItem(width_choices);
svg = svg + '<rect x="' + index_x * width + '" y="' + index_y * height +
'" width="' + rectangle_width + '" height="' + rectangle_height +
'" stroke="black" fill="transparent" stroke-width="2"/>';
}
}
return '<svg width="300" height="300">' + svg + '</svg>';
}
I can also choose to not overlap at all, and only draw shrinked rectangles. After playing around with different parameters, I came up with either a small dimension between 5 and 15, or one that is closer to the size of the box: 35 to 45.
function generateSvg() {
var svg = '';
var width = 50;
var height = 50;
var width_choices = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44];
for (var index_x=0; index_x < 6; index_x++ ) {
for (var index_y=0; index_y < 6; index_y++ ) {
var rectangle_width = getRandomItem(width_choices);
var rectangle_height = getRandomItem(width_choices);
svg = svg + '<rect x="' + index_x * width + '" y="' + index_y * height +
'" width="' + rectangle_width + '" height="' + rectangle_height +
'" stroke="black" fill="transparent" stroke-width="2"/>';
}
}
return '<svg width="300" height="300">' + svg + '</svg>';
}
Now I play around with stroke widths and colors. Like the rectangle dimensions, I choose the stroke width from a small list of options (1, 2 and 5). For the colors, I figured out that I don't want too many colours; I actually made a list of color choices that contained 18 times 'transparent', once 'gray' and once 'maroon'. This results in 5% gray, 5% maroon and 90% transparent rectangles.
This is a small showcase of how I often work. I just start playing around with something, having no idea what I will create minutes later. Many of my artworks evolved in a similar way.