CSS3 lasers

CSS3 offers a lot; essentially it can let you programmatically draw whatever you want fairly easily. While it's cool to see demos and fun things made with it, I'm about as impressed by most "look what I can do with CSS3" things as I am with "look what I can do with <insert graphical design software here>". That's not to say that neither can create amazing things; I'm just noting that since it's apparent CSS3 is quite powerful, it'll take more to impress me. Regardless, it's always fun to see these things :)

Source Code for the curious...<p>lasers.coffee <a href="http://github.com/evilhackerdude/lasers/blob/master/lasers.coffee" rel="nofollow">http://github.com/evilhackerdude/lasers/blob/master/lasers.c...</a><p>lasers.sass <a href="http://github.com/evilhackerdude/lasers/blob/master/lasers.sass" rel="nofollow">http://github.com/evilhackerdude/lasers/blob/master/lasers.s...</a>

I was disappointed when I realised there was no background electronic MIDI music.

Woah: I recognize these exact laser patterns and colors. I feel like there are school photos of my cousins from the late 80s or early 90s which have this pattern as a backdrop. Did you have a reference image?

I don't mean the undermine the skill required to achieve this but why would you use CSS to do something like this? I've also seen stuff like pure CSS logos, pure CSS fail whale, etc. and I have no doubt it helps you understand CSS inside out but what is the practicality of it? I love it, but I just want to know why you'd prefer pure CSS over images or some other way to display similar effects.

From <a href="http://ipinfo.info/netrenderer/index.php?url=http://motherfuckinglasers.com/&#38;browser=ie6" rel="nofollow">http://ipinfo.info/netrenderer/index.php?url=http://motherfu...</a> to <a href="http://ipinfo.info/netrenderer/index.php?url=http://motherfuckinglasers.com/&#38;browser=ie8.." rel="nofollow">http://ipinfo.info/netrenderer/index.php?url=http://motherfu...</a>. At least the font got better.

Oh jeepers! - definitely not work safe. My boss was pretty much directly behind me when "MOTHERFUCKING LASERS" appears on my 24" screen in massive letters.<p>This is the one time I'm glad the place I'm working is so backward web-wise, as the lasers didn't work - no CSS3 for me! - and thus my screen wasn't turn into even more of a profanity-emblazoned eye-magnet.<p>So thankfully, she didn't notice. Phew.

Impressive effects without using images.<p>Unfortunately: There are rendering problems in Firefox. It's a fixed size and doesn't scale with the browser window resolution. The same page can be achieved in a widely compatible way with a simple image.

Scientifically proven thanks to modern laser technology: According to Google Analytics adding “Rick Astley - Never gonna give you up” decreases Avg. Time on Site by 2 seconds.

I was expecting more pewpew

So, I don't see anything. I'm guessing many others don't as well.

Can you make the audio loop?

Needs more CSS3 sharks