Demos Docs Forums

Hello!

This is a HTML page dynamically lifted into a SVG layout. Which means that you can draw your design in Inkscape and spice up your accessible web page with very little work.

However, full-screen animations like this have horrible performance with slow rendering engines. I'm also causing way too many GC runs, so you can see constant framerate glitches.

How to make this faster? Firebug profile says that most of the time is spent in fill, then drawing paths, drawing images (there's only one image, too!), transform and stroke.

Hardware-accelerated drawing would help with fill and images. Cached path objects would help with the amount of method calls needed to draw a path. Real-time GC would reduce the amount of glitches.

P.S. you need Firefox or Safari with JavaScript enabled to see this thing properly.