Inspired by the nice floating canvas in the back of whois.domaintools.com I did my first steps with canvas today.
So, I immediately knew, I had to try something like this on my own. I never worked with canvas before, basically because there are still many users out there browsers not supporting canvas. Also this time, I first tried it with pure HTML and absolute positioned DIVs:
As you can see, I my first idea was to randomly generate letters, and position them in the back of my content. When you move your cursor over them, they’ll start to glow.
This looked good on first sight but problems started when I tried to put this on my website. I started with 300x300px but for my front page I had to increase the size and with this the number of letters. This caused first performance issues. Together with other transitions and animations my i7 quad core didn’t have enough power.
So, I thought, maybe canvas is a bit faster than the ugly DOM tree hack from above. Nope. 3000 letters rendering every 40 milliseconds are too much. I don’t want to embed the result here in this post, because it may stress your computer.
So, I moved on and tried some stuff that is closer to the original idea. I played with circles, but they didn’t really fit to the design of my website, which is dominated by rectangles. I simply replaced the circles with rectangles, which was more what I wanted:
In the end I connected the lines and got to a result, that looks a bit crazy and broken, but that’s what I like about it ;-)