Animation with the Raphaël Javascript Library


Raphaël is a cross-browser JavaScript library for manipulating vector graphics on the web.

Vector graphics unlike raster or bitmap based graphics do not suffer from pixelisation or blurriness when resizing in the browser. This makes them useful for reusing the same graphic object across different display devices. Raphaël works with the Scalable Vector Graphics (SVG) format developed by the W3C. To be useful on older versions of Internet Explorer it converts SVG objects to the Vector Markup Language (VML) used in IE versions 5 through 9.

Raphaël can be used to manipulate any SVG graphic and allows you to create, resize, rotate, move and morph a SVG object.

In the below example Raphaël is used to generate a snowfall effect.

The size and number of snowflakes can be easily modified by changing a few inputs.

The second example shows the regions around greater Brisbane. The region data was generated from an image in Abobe Illustrator and each region manually separated into a separate SVG object.  Hovering over each area triggers an event which can be captured, In this case the area is highlighted and expanded.

Contact kmo today

See what we can do for you. Book your free consultation now.

Contact Us

© Copyright 2024 kmo design pty ltd
Suite 41 Level 34, 1 Eagle St Brisbane 4000 | 1300 965 232 | 07 3077 7210