hkjels/counter.js

## counter.js

(function (win, _, d3, format){

  var canvas = d3.select("body").append("svg:svg")
      .attr("viewbox", format("0 0 %s %s", 1920, 1080))
      .attr("width", format("%spx", win.innerWidth))
      .attr("height", format("%spx", win.innerHeight));


  function counter(num, x, y, r){
    var r = r || 100;
    var x = x ? x + r : 200 + r;
    var y = y ? y + r : 200 + r;

    canvas.selectAll(".counter").remove();

    var clippath = canvas
        .append("svg:defs")
        .attr("class", "counter")
        .append("svg:clipPath")
        .attr("id", "cut-text")
        .attr("clipPathUnits", "userSpaceOnUse");

    var text = clippath
        .append("svg:text")
        .attr("x", x)
        .attr("y", y)
        .attr("alignment-baseline", "middle")
        .attr("font-size", r * .80)
        .text(num);

    var circle = canvas
      .append("svg:circle")
      .attr("class", "counter")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", r);

    var image = canvas
      .append("svg:g")
      .attr("class", "counter")
      .attr("clip-path", "url(#cut-text)")
      .append("svg:image")
      .attr("xlink:href", "https://raw.githubusercontent.com/hkjels/github-images/master/gists/sky.jpg")
      .attr("x", -Math.abs(r))
      .attr("y", 0)
      .attr("height", innerHeight)
      .attr("width", innerWidth);

  }

  var num = 990;
  setInterval(function(){
    counter(num, (win.innerWidth*.5), (win.innerHeight*.5));
    num++;
  }, 1000);

})(window, _, d3, sprintf);

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta viewport="width=device-width user-scalable=no">
    <title>Counter</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.0.3/sprintf.min.js"></script>
    <script src="counter.js" defer></script>
</head>
<body></body>
</html>

## styles.css

body {
  background: url(https://raw.githubusercontent.com/hkjels/github-images/master/gists/sky.jpg) no-repeat fixed;
  background-size: cover;
}


/*
 * SVG
 */

circle {
  fill: white;
}

text {
  font-family: Helvetica;
  fill: white;
  text-anchor: middle;
}

	(function (win, _, d3, format){

	var canvas = d3.select("body").append("svg:svg")
	.attr("viewbox", format("0 0 %s %s", 1920, 1080))
	.attr("width", format("%spx", win.innerWidth))
	.attr("height", format("%spx", win.innerHeight));


	function counter(num, x, y, r){
	var r = r \|\| 100;
	var x = x ? x + r : 200 + r;
	var y = y ? y + r : 200 + r;

	canvas.selectAll(".counter").remove();

	var clippath = canvas
	.append("svg:defs")
	.attr("class", "counter")
	.append("svg:clipPath")
	.attr("id", "cut-text")
	.attr("clipPathUnits", "userSpaceOnUse");

	var text = clippath
	.append("svg:text")
	.attr("x", x)
	.attr("y", y)
	.attr("alignment-baseline", "middle")
	.attr("font-size", r * .80)
	.text(num);

	var circle = canvas
	.append("svg:circle")
	.attr("class", "counter")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", r);

	var image = canvas
	.append("svg:g")
	.attr("class", "counter")
	.attr("clip-path", "url(#cut-text)")
	.append("svg:image")
	.attr("xlink:href", "https://raw.githubusercontent.com/hkjels/github-images/master/gists/sky.jpg")
	.attr("x", -Math.abs(r))
	.attr("y", 0)
	.attr("height", innerHeight)
	.attr("width", innerWidth);

	}

	var num = 990;
	setInterval(function(){
	counter(num, (win.innerWidth.5), (win.innerHeight.5));
	num++;
	}, 1000);

	})(window, _, d3, sprintf);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta viewport="width=device-width user-scalable=no">
	<title>Counter</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
	<link rel="stylesheet" href="styles.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.0.3/sprintf.min.js"></script>
	<script src="counter.js" defer></script>
	</head>
	<body></body>
	</html>

	body {
	background: url(https://raw.githubusercontent.com/hkjels/github-images/master/gists/sky.jpg) no-repeat fixed;
	background-size: cover;
	}


	/*
	* SVG
	*/

	circle {
	fill: white;
	}

	text {
	font-family: Helvetica;
	fill: white;
	text-anchor: middle;
	}