A number of my new pages have a new background. Soon it will be all of them, but this site is all html files still, no CMS or any automation at all as of the time I'm writing this (I use Notepad++ to edit the pages). The CMS is a project I'm still (thinking about) working on, but it frequently gets put on the back burner as other projects need attention (I'm a grad student at Ferris State University and the father of a 10 month-old daughter, those alone are more than a full time job).
I've been thinking of updating some of the elements of my site design, and wanted to try a bit of
jQuery. I thought this would be a perfect opportunity to try a big of jQuery to generate a background. The new background is just that. You might have noticed already that the background changes every time you load a page. This is because it's generated client-side, randomly on each pageload. I'm not a terribly original person, but I am extremely good a taking an existing design an improving upon it. I found
Sam Bechham's page on Generatred Backgrounds with SVG. From that I modified his code to suit my own design, mainly that his generated polka dots and I wanted
squbbles.
(function ($) {
"use strict";
$.fn.squbbleBackground = function (options) {
var settings = $.extend({
tileSize : 18,
tilesHigh: 13,
tilesWide: 13,
tilePad : 3,
colorRange: 64,
colorBack: 0x202020
}, options);
return this.each(function () {
var $this = $(this),
width = (settings.tileSize + settings.tilePad) * settings.tilesWide,
height = (settings.tileSize + settings.tilePad) * settings.tilesHigh,
background = "<svg xmlns='http://www.w3.org/2000/svg'
width='" + width + "' height='" + height + "'>",
color = "", x, y, r = settings.tileSize / 2, b;
for (x = 0; x < width; x += settings.tileSize + settings.tilePad) {
for (y = 0; y < height; y += settings.tileSize + settings.tilePad) {
b = (Math.floor(Math.random() * settings.colorRange)).toString(16);
if (b.length < 2) { b = "0" + b; }
color = "#" + b.toString(16) + b.toString(16) + b.toString(16);
background += "<path fill='" + color + "' d='m " + x + "," + y +
" m" + r + ",0 " + r + ",0 0," + r +
" c 0,2.77 -2.23," + r + " -" + r + "," + r +
" l -" + r +",0 0,-" + r +
" c 0,-2.23 2.23,-" + r + " " + r + ",-" + r + " z'/>";
}
}
background += "</svg>";
var b64 = 'data:image/svg+xml;base64,' + window.btoa(background),
url = 'url("' + b64 + '")';
$this.css('backgroundImage', url);
$this.css('backgroundColor', settings.colorBack.toString(16));
});
};
}(jQuery));
$('body').squbbleBackground({colorRange: 48, colorBack: 0x202020});
The whole thing can go in a <script> block in the page, or as I have done, the function can be put in a JavaScript file that's included and the last line can be put on pages where you want that background to appear. ALso note the options that can be passed to the function to change the background on different pages. This could be done without jQuery, but it's easier with (which is the point of jQuery).