A Finger Speedometer with SVG

Summary

Speedometer and appearance controls
A Raphael.js plugin for displaying a single value in a speedometer with customizable appearance. As all graphical elements are vector-based, SVG elements, the entire control can be scaled and recolored dynamically. An application of the plugin is a speedometer that measures finger speed across a typical-sized keyboard.

Appearance

Changes to lighting, color, and scale
Highlights on bezel elements is usually performed using three rings or disks -- a highlight, shadow, and base color ring. These are layered, then offset based off the light location and angle. Lighting on the face affects the center of a radial gradient.

The needle rumble is useful for emulating noisy data -- indicating to a user the inexactness of the data. It also just looks cool.