File Under: CSS

‘Donatello’ Library Simplifies CSS 3 Drawings

A clock drawn with Dontatello (rendered in Firefox)

Most modern browsers support the HTML5 canvas element and SVG for drawing and animating. There are, however, some cases — particularly with mobile browsers — where it might make more sense to use CSS-based drawing tools.

Donatello is a JavaScript library that can do much of what the Raphaël JS drawing library does, but instead of using SVG to draw shapes, Donatello renders in pure CSS. Here’s how Donatello developer Dan Newcome describes the advantages:

Since all rendering is done using HTML and CSS, and a lot of effort is going toward optimizing CSS using graphics acceleration in the major browsers, there is the opportunity to do very efficient and performant drawing in the browser using this technique. In future versions I hope to be able to leverage CSS animations and transitions for efficient hardware-accelerated animations.

Using Donatello is simple, just include the library in your page and then create a Donatello drawing surface, known as paper (similar to canvas, if you’ve been using canvas-based libraries). Once you’ve set your paper, you simply use the Donatello API to draw pretty much anything CSS is capable of creating, for example, the clock face above.

For more details and some more examples, head over to the Donatello page on Github.

See Also: