veltman/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Based on this GIF.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke-width: 2px;
  stroke: #444;
  fill: none;
}

line {
  stroke-width: 4px;
  stroke-linecap: round;
}

circle {
  stroke: none;
  fill: #444;
}

.done line,
.done circle {
  display: none;
}

.done path {
  stroke-width: 12px;
  fill: url("#crosshatch");
  stroke: #0c238d;
}

</style>
<body>
<svg>
  <defs>
    <pattern id="crosshatch" patternUnits="userSpaceOnUse" width="16" height="16">
      <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cGF0aCBkPSJNMCAwTDE2IDE2Wk0xNiAwTDAgMTZaIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzBjMjM4ZCI+PC9wYXRoPgo8L3N2Zz4="
        x="0" y="0" width="16" height="16">
      </image>
    </pattern>
  </defs>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script>

var margin = { left: 10, right: 10, top: 10, bottom: 10 },
    width = 960,
    height = 500,
    duration = 10000,
    size = Math.min(width - margin.left - margin.right, height - margin.top - margin.bottom);

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

var colors = ["#ae3cb4", "#ff7146", "#b3e94e"];

var trace = svg.append("path")
  .attr("fill-rule", "evenodd")
  .datum("M" + size + "," + (size / 2));

var arms = getArms();

var segments = svg.selectAll("line")
  .data(arms)
  .enter()
  .append("line")
    .style("stroke",function(d,i){
      return colors[i];
    });

var pen = svg.append("circle")
  .attr("r", 4);

var t = 0;

requestAnimationFrame(update);

function update() {

  segments.each(function(arm, i){

    var rotation = Math.PI * 2 * t * arm.speed;

    arm.start = i ? arms[i - 1].end : [size / 2, size / 2];

    arm.end = [
      arm.start[0] + arm.length * Math.cos(rotation),
      arm.start[1] + arm.length * Math.sin(rotation)
    ];

    d3.select(this)
      .attr({
        x1: arm.start[0],
        y1: arm.start[1],
        x2: arm.end[0],
        y2: arm.end[1]
      })

  });

  var last = arms[arms.length - 1].end;

  trace.datum(trace.datum() + "L" + last.join(","))
    .attr("d", Object);

  pen.attr("cx", last[0])
    .attr("cy", last[1]);

  if (t >= duration) {
    trace.datum(trace.datum() + "Z");
    svg.classed("done", true);
    return true;
  }

  // Manually ticking frames
  t += 1000 / 60;

  requestAnimationFrame(update);

}

function getArms() {

  var lengths = [160, 106, 25];

  var rotations = [1,5,21];

  var totalLength = d3.sum(lengths);

  return lengths.map(function(l,i){
    return {
      length: (size / 2) * l / totalLength,
      speed: -rotations[i] / duration
    };
  });

}

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	stroke-width: 2px;
	stroke: #444;
	fill: none;
	}

	line {
	stroke-width: 4px;
	stroke-linecap: round;
	}

	circle {
	stroke: none;
	fill: #444;
	}

	.done line,
	.done circle {
	display: none;
	}

	.done path {
	stroke-width: 12px;
	fill: url("#crosshatch");
	stroke: #0c238d;
	}

	</style>
	<body>
	<svg>
	<defs>
	<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="16" height="16">
	<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cGF0aCBkPSJNMCAwTDE2IDE2Wk0xNiAwTDAgMTZaIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzBjMjM4ZCI+PC9wYXRoPgo8L3N2Zz4="
	x="0" y="0" width="16" height="16">
	</image>
	</pattern>
	</defs>
	</svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
	<script>

	var margin = { left: 10, right: 10, top: 10, bottom: 10 },
	width = 960,
	height = 500,
	duration = 10000,
	size = Math.min(width - margin.left - margin.right, height - margin.top - margin.bottom);

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

	var colors = ["#ae3cb4", "#ff7146", "#b3e94e"];

	var trace = svg.append("path")
	.attr("fill-rule", "evenodd")
	.datum("M" + size + "," + (size / 2));

	var arms = getArms();

	var segments = svg.selectAll("line")
	.data(arms)
	.enter()
	.append("line")
	.style("stroke",function(d,i){
	return colors[i];
	});

	var pen = svg.append("circle")
	.attr("r", 4);

	var t = 0;

	requestAnimationFrame(update);

	function update() {

	segments.each(function(arm, i){

	var rotation = Math.PI * 2 * t * arm.speed;

	arm.start = i ? arms[i - 1].end : [size / 2, size / 2];

	arm.end = [
	arm.start[0] + arm.length * Math.cos(rotation),
	arm.start[1] + arm.length * Math.sin(rotation)
	];

	d3.select(this)
	.attr({
	x1: arm.start[0],
	y1: arm.start[1],
	x2: arm.end[0],
	y2: arm.end[1]
	})

	});

	var last = arms[arms.length - 1].end;

	trace.datum(trace.datum() + "L" + last.join(","))
	.attr("d", Object);

	pen.attr("cx", last[0])
	.attr("cy", last[1]);

	if (t >= duration) {
	trace.datum(trace.datum() + "Z");
	svg.classed("done", true);
	return true;
	}

	// Manually ticking frames
	t += 1000 / 60;

	requestAnimationFrame(update);

	}

	function getArms() {

	var lengths = [160, 106, 25];

	var rotations = [1,5,21];

	var totalLength = d3.sum(lengths);

	return lengths.map(function(l,i){
	return {
	length: (size / 2) * l / totalLength,
	speed: -rotations[i] / duration
	};
	});

	}

	</script>