Untitled

dabblet.css

html,body {
	height: 100%;
}
body:before {
	content: '';
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
meter {
	width: 100%;
	height: 3em;
	display: inline-block;
	vertical-align: middle;
}
meter img {
	position: absolute;
	display: block;
}

dabblet.html

<meter value=".7" high=".8">
	<img src="https://avatars0.githubusercontent.com/u/46065?v=2&s=100" alt="Luiz">
</meter>

dabblet.js

function computeSpeed(baseSpeed, step) {
	return 10 * baseSpeed / (50 * step + 1);
}

function transitionTo(meter, newVal) {
	var steps = 100;
	var transitionSpeed = (newVal - meter.value) / steps;
	if (meter.isTransitioning) {
		meter.cancelCurrentTransition = true;
	} else {
		meter.isTransitioning = true;
	}
	function transitionFrame(baseSpeed, currentStep) {
		return function() {
			var curVal = parseFloat(meter.value);
			if (Math.abs(curVal - newVal) > 1.0e-3 && !meter.cancelCurrentTransition) {
				meter.value += computeSpeed(baseSpeed, currentStep / steps);
				window.requestAnimationFrame(transitionFrame(baseSpeed, currentStep + 1));
			} else if (meter.cancelCurrentTransition) {
				meter.cancelCurrentTransition = false;
			} else {
				meter.isTransitioning = false;
			}
		}
	}
	window.requestAnimationFrame(transitionFrame(transitionSpeed, 0));
}

var meter = document.querySelector('meter');
meter.addEventListener('mouseenter', function() {
	transitionTo(meter, .9);
});

meter.addEventListener('mouseleave', function() {
	transitionTo(meter, .7);
});

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}