Posted on by Mark Finkle

SVG Bubble Menus

I was clickety-clicking my way around the Internet and came across the Connected Ventures website. The first thing that I noticed was the “bubble menu” system used on the site. Then I noticed it was written in Flash. Surely, I thought, SVG could be used to create bubble menus too.

I got a prototype working without much trouble. Then, I refined it a bit. Here are the files:
svg-bubblemenu-in-html.xml (demo)
bubblemenu.js

It’s a little slower than the Flash version, but that could be my inexperience with SVG. Feedback welcome.

Update: Jeff Schiller made some tweaks to the bubblemenu.js file (which I updated).

  • increased delta to be between -6 and +6
  • initialized groups once (don’t call getElementsByTagNameNS() with every tick
  • removed unnecessary setAttribute() on the groups’ x and y attributes (ed: yeah, didn’t remove some test code)
  • changed the setInterval() to 100ms (ed: I bumped up to 150ms to try to reduce CPU usage)
  • made sure the vertical speed was not zero
  • when a bubble goes off the screen, put it above the top (not
    randomly as you had it)

Thanks Jeff

10 Replies to “SVG Bubble Menus”

  1. The main difference between your version and the Flash one on my machine is while the Flash version uses a bareable 5-30% of my processor averaging around 15%, yours uses 90+%. I don’t know whether this an issue with your demo or something more fundemental with firefox/SVG.

    By the I’m using Firefox 2.0.0.6. I’ve just tried it with the latest nightly for 3.0M8 and I get 40-90% usage, averaging around 55%. So I guess that’s progress.

  3. Adrian – Thanks for the comparison. Some of the CPU usage is due to my use of setInterval(…) to create the animation loop. Maybe there is a better way of doing that. Also, I am using a transform in the animation loop to ‘move’ the bubbles and there might be a better way to doing that too.

  4. Mark,

    Nice demo! Just have to tweak the background colours of the bubbles.

    As you say, seems to move slower than the Flash version though, maybe just speed up the velocities? Also, looks like you’re both modifing the transform as well as the x and y attributes – you shouldn’t need to do that, right?

    I’ve done similar work with my “snow” example: http://www.codedread.com/blog/wp-content/themes/something-witty-goes-here/images/blog_header-winter.svg In that, I had pure JavaScript objects (snowflakes) which each held a reference to the SVG DOM objects. Not sure if that would make any difference whatsoever, but I don’t have to call getElementsByTagNameNS() like you do every “tick”…

    Oh, and your example crashed Safari 3.0 Beta (Windows).

    Regards,
    Jeff

  5. Mark, I emailed you a tweaked version of your script with some improvements.

    Btw, your version has an improvement over the Flash version:

    – if you hold your mouse over a bubble in Flash, another bubble might float on top and “release” the bubble you wanted to click on
    – they seem to use rectangles for the mouse boundaries

    Regards,
    Jeff

  8. Nice one Mark. Looking forward to when/if gecko supports SVG animate I’m guessing you could do most of it declaratively in the SVG document with animateMotion (perhaps with a little JS tweaking for random images and mouseover). Then the performance issue would depend on gecko’s animate implementation.

  9. Wow, cool.

    You need to reduce the amount of movement, but move more often. Flash will do up to 60 frames a second which is really smooooth.

    Nice though. But until SVG + animation is faster Flash will win. Shame really. But there you go.

    Why doesn’t firefox get behind the open source flash player and GUI MTASC? That’d be cool.

    monk.e.boy

Comments are closed.