Generated Backgrounds With SVG

Just before Christmas I decided to have a play about with SVG on Codepen. It got quite a lot of attention and I was asked to write a post detailing the process; here is that post.

This idea was born because I needed a way to generate isometric backgrounds on-the-fly with a set colour palette. I decided the best way to do it would be to use a formula that would write some SVG code and apply it to the background of an element. The problem was, I’d never used SVG before and I had no idea what I was doing.

Polka dots

I decided to start small and get the basics down first. If I could get something simple generated in SVG first then I could move onto writing the formula that would generate my shapes. I created a random polka dot generator that was surprisingly simple.

I’ve outlined a - simplified - breakdown of that code below.

var width = (dotSize + dotPadding) * dotsWide,
  height = (dotSize + dotPadding) * dotsHigh,
  radius = dotSize / 2,
  background =
    "<svg xmlns='http://www.w3.org/2000/svg' width='" +
    width +
    "' height='" +
    height +
    "'>",
  color = "#09c",
  x,
  y;

First I define the variables I’m going to use and generate the opening tag for the SVG (assigned to the background variable).

for (x = radius; x < width; x += dotSize + dotPadding) {
  for (y = radius; y < height; y += dotSize + dotPadding) {
    background +=
      "<circle fill='" +
      color +
      "' cx='" +
      x +
      "' cy='" +
      y +
      "' r='" +
      radius +
      "'/>";
  }
}

Then I loop through each circle/dot in the image and append the SVG code to generate it to the background variable.

background += "</svg>";

Once each dot has been added, we close the SVG tag.

var b64 = "data:image/svg+xml;base64," + window.btoa(background),
  url = 'url("' + b64 + '")';
$("html").css("backgroundImage", url);

Finally I base64 encode the image before applying it to the background as a Data URI.

Isometric grid

The polka dot demo proved to me that I could do this. All I had to do now was write the part that generated my isometric triangles. There’s a few ways to do this but I found this way to be the simplest.

My plan was to generate this bow-tie shape and fill it with a random colour, chosen from a pre-defined array. I would then repeat this shape so it tessellates. The problem I encountered with this approach is that they didn’t stack correctly, and I had with a line of diamond-shaped gaps.

for (i = 0; i <= settings.trianglesWide; i += 1) {
  for (j = 0; j <= settings.trianglesHigh; j += 1) {
    v = i * settings.triangleSize * settings.skew;
    w = j * settings.triangleSize;
    x = v + settings.triangleSize * settings.skew;
    y = w + settings.triangleSize;
    a = v + "," + w;
    b = x + "," + w;
    c = (v + x) / 2 + "," + (w + y) / 2;
    d = v + "," + y;
    e = x + "," + y;

    background +=
      "<polygon fill='" +
      getColor() +
      "' fill-opacity='" +
      settings.opacity +
      "' points='" +
      a +
      " " +
      c +
      " " +
      d +
      " " +
      "' />";
    background +=
      "<polygon fill='" +
      getColor() +
      "' fill-opacity='" +
      settings.opacity +
      "' points='" +
      b +
      " " +
      c +
      " " +
      e +
      " " +
      "' />";
  }
}

Gives you…

As you can see, the bow-ties don’t line up quite right but this is fixable. What we need to do is offset every second row by moving it up and along by 50%. I decided to utilise the modulo operation (j % 1) to differentiate between even and odd rows. This operation will return a 0 when the number is even and a 1 when it’s odd.

for (i = -1; i <= trianglesWide; i += 1) {
  for (j = -0.5; j <= trianglesHigh; j += 0.5) {
    v = (i + (j % 1)) * triangleSize * skew;
    w = j * triangleSize;
    x = v + triangleSize * skew;
    y = w + triangleSize;
    a = v + "," + w;
    b = x + "," + w;
    c = (v + x) / 2 + "," + (w + y) / 2;
    d = v + "," + y;
    e = x + "," + y;

    background +=
      "<polygon fill='" +
      getColor() +
      "' fill-opacity='" +
      opacity +
      "' points='" +
      a +
      " " +
      c +
      " " +
      d +
      " " +
      "' />";
    background +=
      "<polygon fill='" +
      getColor() +
      "' fill-opacity='" +
      opacity +
      "' points='" +
      b +
      " " +
      c +
      " " +
      e +
      " " +
      "' />";
  }
}

Adding this in allows us to offset the v coordinate by 1 on every second row which pushes that row along to the correct point.

You might notice that instead of starting the for loops at 0 I start them at −1 and −0. 5 respectively. This is to make sure the pattern starts outside the bounding box so we don’t get jagged edges.

Colours

Another big part of what I wanted to do here was to use random colours from a selected palette. To do this I wrote a simple getColor() function.

var colors = ["red", "blue", "green"],
  getColor = function() {
    var hex = colors[Math.floor(Math.random() * colors.length)];
    return hex;
  };

This shouldn’t need too much of an explanation, it returns a random entry from the colours array when it’s called.

Plugin

Whilst this is not intended to be a jQuery plugin, I wrote it in that manner to allow me to generate several different backgrounds. Have a play about with the settings at the top of the page or check out the demo on Codepen to see just how versatile this can be.