Html

Less

#smile {
	svg {
		width: 50%;
		margin: 30% auto 0px auto;
		overflow: visible;
		g {
			.transform-origin(50px, 15px);
			.scale(1, 1);
			.transition(all 350ms linear);
			stroke-width: 6px;
			stroke: white;
			fill: none;
			stroke-linecap: round;
		}
	}
	&.smile svg g {
		.scale(1, 1);
	}
	&.meh svg g {
		.scale(1, -0.01);
	}
	&.frown svg g {
		.scale(1, -1);
	}
}

/* Less mixins */
.transition(@transition) {
	-webkit-transition: @transition;  
	-moz-transition: @transition;
	-ms-transition: @transition; 
	-o-transition: @transition;  
}

.transform-origin(@x, @y) {
	-moz-transform-origin: @x @y;
	-ms-transform-origin: @x @y;
	-o-transform-origin: @x @y;
	-webkit-transform-origin: @x @y;
	transform-origin: @x @y;
}

.scale(@x, @y:0) {
	-webkit-transform: scale(@x, @y);
	-moz-transform: scale(@x, @y);
	-ms-transform: scale(@x, @y);
	-o-transform: scale(@x, @y);
}

Jquery

$(document).ready(function(){
	var stages = ['smile','meh','frown'];
	
	/* Toggle between available smile stages */
	$('#smile').on('click', function(){
		this.className = stages[($.inArray(this.className, stages)+1)%stages.length];
	});
});