Joel.pm The Blog

Script: tess.js provides random-colour tessellating backgrounds for elements


What is tess.js?

tess.js is a simple tessellating pattern generator that lets you create tessellating patterns for backgrounds of pages or elements, with a variety of patterns and colour options available.

There are examples of use of tess.js around my site. My home page features a large hexagon pattern at the top, and uses a triangle pattern for a horizontal line further down the page.

How can I use tess.js

If you'd like any elements on your site to have this sort of pattern, in any colour, listen in!

First, download tess.js from my site and put it on your own. Please don't hotlink it from my site. It's CC-BY-SA 4.0, meaning you're free to share it the same way that I do, or modify it, as long as you keep the comment at the top mentioning me as the author and mentioning the license.

Then add this as a script tag inside of the head of your site. Something like this (you may want to change the url if you have it in a different folder):

<script src="/tess.js"></script>

Then, at the bottom of your <body> tag, add the folowing one line of JavaScript:

<script>
FillHexBoxes();
</script>

tess.js will now run. But you have no elements that are filled with it. So you need to tell tess.js which elements to use. You need to add the tess class to the elements you want to style.

You will also need to add some 'data' attributes, these are extra options required to get the colour, shape, and size correct. Most simply, you can try out my tess tester (which is more of a testing tool for me, and isn't exactly polished or mobile friendly) for an interactive way to set these up. These 'data' attributes go into the opening tag of the element, just like an ID or a class. So, for example:

<div class="tess" data-tess-pattern="honeycomb" data-tess-colour="rgb,255,220-255,130" data-tess-size="25">
</div>

Rows of hexagons

The above values will produce something similar to the included image—a background made of hexagons in a honeycomb structure, where each hexagon has sides of 25 pixels, and is assigned a colour with RGB values where red is 255, blue is randomly between 220 and 255, and green is 130 (in this case, this is a yellowish pattern).

Note that if you want to use this with elements that don't usually have much size (see the horizontal divider on my homepage) you'll need to give them some size via CSS. The code does not change the size of any element.

In brief, the options:

Pattern: Select from a few tessellating patterns. Currently available are honeycomb, triangles, the square grid, and rhombitrihexagonal, which you can try for yourself.

Colour: Provide value ranges for either RGB or HSL colours. Give RGB values between 0 and 255. For HSL, Hue is in degrees on the colour wheel, 0-360, however if you require a range of colours that runs over red, for example, 10 degrees either side of red, simply flow over 360 (in this example, the range would be '350-370'). Saturation and Luminosity are percentages and should be given as values between 0 and 100. so rgb,255,220-255,130 is valid, so is hsl,273.00-407.00,46.00-71.00,85.00-95.00 (decimals are allowed, but kinda pointless).

Size: Size is usually related to length of one side of a shape, in pixels. If you go too small, the SVG will be very long and likely down most browsers, so avoid that.

Despite it being a bit Times-New-Romany, check the tess tester for the easiest way to create these patterns.

If you'd like to know a bit more about how the code works, I'm slowly adding nice comments to it. The 'How it works' section of my post about tess.js's predecessor, hexagons.js is still ballpark-correct in terms of implementation.


Last post: Script: Tesselating hexagons of random shades for a background