thayashi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Apple Watch Activity UI By D3.js

Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  svg {
    display:block;
    margin: 0 auto;
  }
  body {
    background: #000;
    font: 30px sans-serif;
  }
  </style>
</head>

<body>
  <script>
    var width = 455;
    var height = 455;

    var arc_width = 42;
    var arc_round = arc_width/2;
    var τ = 2 * Math.PI;
    var r = 60;

    var data = [
      {index: 0, color: '#2dd3dc', start:0, end: 0},
      {index: 1, color: '#9efe33', start:0, end: 0},
      {index: 2, color: '#fc1a47', start:0, end: 0}
    ];

    var bg_data = [
      {index: 0, color: '#2dd3dc', start:0, end: 360},
      {index: 1, color: '#9efe33', start:0, end: 360},
      {index: 2, color: '#fc1a47', start:0, end: 360}
    ];

    var icon_paths = [
    "M-1.143-7.794L-9.38,0.443c-0.527,0.527-0.527,1.382,0,1.909s1.382,0.527,1.909,0l5.933-5.933V6.862c0,0.746,0.604,1.35,1.35,1.35s1.35-0.604,1.35-1.35V-3.581l5.934,5.933c0.527,0.527,1.382,0.527,1.909,0C9.268,2.088,9.4,1.743,9.4,1.397S9.268,0.707,9.004,0.443L0.766-7.794C0.239-8.322-0.616-8.322-1.143-7.794z",
    "M5.538,0.917l-7.826,7.826c-0.25,0.25-0.579,0.376-0.907,0.376c-0.329,0-0.656-0.125-0.907-0.376c-0.501-0.501-0.501-1.312,0-1.813l5.636-5.637h-9.92c-0.708,0-1.282-0.574-1.282-1.282c0-0.708,0.574-1.283,1.282-1.283h9.92l-5.636-5.636c-0.501-0.501-0.501-1.312,0-1.813s1.312-0.501,1.813,0l7.826,7.825C6.039-0.396,6.039,0.416,5.538,0.917zM3.445,8.743l7.826-7.826c0.501-0.501,0.501-1.313,0-1.814L3.445-8.722c-0.501-0.501-1.312-0.501-1.813,0s-0.501,1.312,0,1.813L8.55,0.01L1.632,6.93c-0.501,0.501-0.501,1.312,0,1.813c0.25,0.25,0.578,0.376,0.907,0.376C2.867,9.119,3.195,8.994,3.445,8.743z",
    "M7.618-0.944L-0.62-9.182c-0.527-0.527-1.382-0.527-1.909,0s-0.527,1.382,0,1.909L3.404-1.34H-7.039c-0.746,0-1.35,0.604-1.35,1.35s0.604,1.35,1.35,1.35H3.404l-5.933,5.934c-0.527,0.527-0.527,1.382,0,1.909c0.264,0.264,0.609,0.396,0.955,0.396s0.691-0.132,0.955-0.396l8.237-8.238C8.145,0.438,8.145-0.417,7.618-0.944z"
    ];

    //arc generator
    var arc = d3.svg.arc()
      .cornerRadius(arc_width/2)
      .startAngle(function(d) {
        return d.start * τ / 360 - arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
      })
      .endAngle(function(d) {
        return d.end*τ / 360 + arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
      })
      .innerRadius(function(d) { return r + (arc_width + 1) * d.index; })
      .outerRadius(function(d) { return r + (arc_width + 1) * d.index + arc_width; });

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var arcs_bg = svg.append("g").selectAll("path.arcbg")
        .data(bg_data)
        .enter().append("path")
        .attr("class", "arcbg")
        .style("opacity", 0.25)
        .style("fill", function(d) { return d.color; })
        .attr("d", arc);

    var arcs = svg.append("g").selectAll("path.arc")
      .data(data)
      .enter().append("path")
      .attr("class", "arc")
      .style("fill", function(d) { return d.color; })
      .attr("d", arc)
      .each(function(d) { this._current = d;});

    var icons = svg.append("g").selectAll("path.icon")
      .data(data)
      .enter().append("path")
      .attr("class", "icon")
      .style("opacity", 0)
      .attr("d", function(d){
        return icon_paths[d.index];
      })
      .attr("transform", function(d, i){
        return "translate(0," + (-1 * (r + (arc_width + 1) * d.index) - arc_round) + ")";
      })
      .transition()
      .duration(1500)
      .style("opacity", 1);

    setTimeout(function() {
      arcs.data([
        {index: 0, start:0, end: 110},
        {index: 1, start:0, end: 170},
        {index: 2, start:0, end: 220}
      ]);
      arcs.transition()
        .duration(1500)
        .call(arcTween);
    }, 800);

    function arcTween(transition) {
      transition.attrTween("d", function(d) {
        var interpolate = d3.interpolate(this._current.end, d.end);
        this._current = interpolate(0);
        return function(t) {
          d.end = interpolate(t);
          return arc(d);
        };
      });
    }

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	* {
	margin: 0;
	padding: 0;
	border: 0;
	}

	svg {
	display:block;
	margin: 0 auto;
	}
	body {
	background: #000;
	font: 30px sans-serif;
	}
	</style>
	</head>

	<body>
	<script>
	var width = 455;
	var height = 455;

	var arc_width = 42;
	var arc_round = arc_width/2;
	var τ = 2 * Math.PI;
	var r = 60;

	var data = [
	{index: 0, color: '#2dd3dc', start:0, end: 0},
	{index: 1, color: '#9efe33', start:0, end: 0},
	{index: 2, color: '#fc1a47', start:0, end: 0}
	];

	var bg_data = [
	{index: 0, color: '#2dd3dc', start:0, end: 360},
	{index: 1, color: '#9efe33', start:0, end: 360},
	{index: 2, color: '#fc1a47', start:0, end: 360}
	];

	var icon_paths = [
	"M-1.143-7.794L-9.38,0.443c-0.527,0.527-0.527,1.382,0,1.909s1.382,0.527,1.909,0l5.933-5.933V6.862c0,0.746,0.604,1.35,1.35,1.35s1.35-0.604,1.35-1.35V-3.581l5.934,5.933c0.527,0.527,1.382,0.527,1.909,0C9.268,2.088,9.4,1.743,9.4,1.397S9.268,0.707,9.004,0.443L0.766-7.794C0.239-8.322-0.616-8.322-1.143-7.794z",
	"M5.538,0.917l-7.826,7.826c-0.25,0.25-0.579,0.376-0.907,0.376c-0.329,0-0.656-0.125-0.907-0.376c-0.501-0.501-0.501-1.312,0-1.813l5.636-5.637h-9.92c-0.708,0-1.282-0.574-1.282-1.282c0-0.708,0.574-1.283,1.282-1.283h9.92l-5.636-5.636c-0.501-0.501-0.501-1.312,0-1.813s1.312-0.501,1.813,0l7.826,7.825C6.039-0.396,6.039,0.416,5.538,0.917zM3.445,8.743l7.826-7.826c0.501-0.501,0.501-1.313,0-1.814L3.445-8.722c-0.501-0.501-1.312-0.501-1.813,0s-0.501,1.312,0,1.813L8.55,0.01L1.632,6.93c-0.501,0.501-0.501,1.312,0,1.813c0.25,0.25,0.578,0.376,0.907,0.376C2.867,9.119,3.195,8.994,3.445,8.743z",
	"M7.618-0.944L-0.62-9.182c-0.527-0.527-1.382-0.527-1.909,0s-0.527,1.382,0,1.909L3.404-1.34H-7.039c-0.746,0-1.35,0.604-1.35,1.35s0.604,1.35,1.35,1.35H3.404l-5.933,5.934c-0.527,0.527-0.527,1.382,0,1.909c0.264,0.264,0.609,0.396,0.955,0.396s0.691-0.132,0.955-0.396l8.237-8.238C8.145,0.438,8.145-0.417,7.618-0.944z"
	];

	//arc generator
	var arc = d3.svg.arc()
	.cornerRadius(arc_width/2)
	.startAngle(function(d) {
	return d.start * τ / 360 - arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
	})
	.endAngle(function(d) {
	return d.endτ / 360 + arc_round / (r + (arc_width + 1) d.index + arc_width - arc_round);
	})
	.innerRadius(function(d) { return r + (arc_width + 1) * d.index; })
	.outerRadius(function(d) { return r + (arc_width + 1) * d.index + arc_width; });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var arcs_bg = svg.append("g").selectAll("path.arcbg")
	.data(bg_data)
	.enter().append("path")
	.attr("class", "arcbg")
	.style("opacity", 0.25)
	.style("fill", function(d) { return d.color; })
	.attr("d", arc);

	var arcs = svg.append("g").selectAll("path.arc")
	.data(data)
	.enter().append("path")
	.attr("class", "arc")
	.style("fill", function(d) { return d.color; })
	.attr("d", arc)
	.each(function(d) { this._current = d;});

	var icons = svg.append("g").selectAll("path.icon")
	.data(data)
	.enter().append("path")
	.attr("class", "icon")
	.style("opacity", 0)
	.attr("d", function(d){
	return icon_paths[d.index];
	})
	.attr("transform", function(d, i){
	return "translate(0," + (-1 * (r + (arc_width + 1) * d.index) - arc_round) + ")";
	})
	.transition()
	.duration(1500)
	.style("opacity", 1);

	setTimeout(function() {
	arcs.data([
	{index: 0, start:0, end: 110},
	{index: 1, start:0, end: 170},
	{index: 2, start:0, end: 220}
	]);
	arcs.transition()
	.duration(1500)
	.call(arcTween);
	}, 800);

	function arcTween(transition) {
	transition.attrTween("d", function(d) {
	var interpolate = d3.interpolate(this._current.end, d.end);
	this._current = interpolate(0);
	return function(t) {
	d.end = interpolate(t);
	return arc(d);
	};
	});
	}

	</script>
	</body>