Circle area defined by mouse click and going further with Hammer.js events

In the first example we are going to define the area of a circle depending on where we click within a box area. We can handle this using JavaScript events, a little bit of basic maths and CSS.

In the second example we are going to define the area using Hammer.js which helps us to add support for touch and muti-touch gestures. In this case you can pinch in and pinch out with your fingers to define the area (you can use an horizontal pan as well) and you can do a vertical pan movement with your finger to change the saturation of the circle.

If you are in a multi-touch device you can pinch and pan with your fingers, if not use horizontal and vertical pan with your mouse. The events will be catched inside and outside of the black box.