I love transparency effects. I know they are sometimes a crutch— a cool effect that distracts from elegant simplicity, shape and form— but I don’t care. In case you couldn’t tell from this site, I think cool effects are totally sweet. So naturally, when I discovered that both the canvas and SVG specs have transparency effects in them, I got all hot and bothered. My first attempt was with SVG, but sadly, this isn’t universally supported yet (see Illuminate for extra nerd rants about this). My second attempt was with canvas. The results can be seen above.
The other thing I discovered during this process is that geometry is awesome. You don’t have to believe me, but it is. The ability to spontaneously generate forms of varying size and shape using math is really incredible, and as designers it gives us access to a wholly different way of drawing that feels less designed and more organic. I keep waiting to find my 8th grade geometry book for sale at a dusty book store. When I see it I am going to buy it and actually read it instead of drawing the MXPX logo on all the pages.
transparency effects in canvas
Creating transparency effects in canvas is pretty easy. After you make a canvas and get it’s context:
var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
var context = canvas.getContext('2d')you add a color and use the globalCompositeOperation object to specify what kind of transparency effect you want:
context.fillStyle = "green"
context.globalCompositeOperation = "lighter"After that, we can draw whatever we want, and it will be rendered with this composite type. Pretty simple, right?
Using Triangulate
Triangulate can be activated easily on any text. First design the text, and then point the script at it by writing something like:
tri.init('my-element')where my-element is the id of the element you are targeting. Because Triangulate uses canvas, it is important to make sure the fonts are fully loaded before you execute. Otherwise the pixels will render with your system fonts or, even worse, not at all. Please see the section on web fonts in Cluster to figure out how to do this correctly.
Browser inconsistencies
It is important to note that this design looks totally different in firefox than it does in safari or chrome. I generally thought they both looked pretty sweet, and since this is all for fun and inspiration, I let it go. But if you are interested in using transparency effects on a client-based project, you will need to check multiple browsers early and often.