dagrende/coils.html

## coils.html
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <style>
    svg {
      background-color: #eee;
    }
  path {
    stroke: black;
    fill: none;
    stroke-width: 5px;
  }
  </style>
  <body>

  </body>
  <script type="text/javascript">
      let seq = n => Array.apply(null, {length: n}).map(Function.call, Number),
      w = 400,
      h = 400,
      svg = d3.select('body')
      .append('svg').attr('width', w).attr('height', h);

    let n = 6,
      angle = i => i * 2 * Math.PI / n,
      r = 100,
      s = 20,
      midx = w / 2,
      midy= h / 2,
      d = '',
      polar = (i, c, dr, di) => c + ' ' + (midx + (r + dr) * Math.cos(angle(i + di))) + ' ' + (midy + (r + dr) * Math.sin(angle(i + di)));
    seq(n).forEach((i) => {
      let f = (c, dr, di) => polar(i, c, dr, di);
      d +=
        f(i == 0 ? 'M' : 'L', 0, 0)
        + f('Q',  s, 0)
        + f('',   s, 0.25)
        + f('Q',  s, 0.5)
        + f('',   0, 0.5)
        + f('Q', -s, 0.5)
        + f('',  -s, 0.75)
        + f('Q', -s, 1)
        + f('',   0, 1);
    });
    svg.append('path').attr('d', d);


  </script>
</html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<style>
	svg {
	background-color: #eee;
	}
	path {
	stroke: black;
	fill: none;
	stroke-width: 5px;
	}
	</style>
	<body>

	</body>
	<script type="text/javascript">
	let seq = n => Array.apply(null, {length: n}).map(Function.call, Number),
	w = 400,
	h = 400,
	svg = d3.select('body')
	.append('svg').attr('width', w).attr('height', h);

	let n = 6,
	angle = i => i * 2 * Math.PI / n,
	r = 100,
	s = 20,
	midx = w / 2,
	midy= h / 2,
	d = '',
	polar = (i, c, dr, di) => c + ' ' + (midx + (r + dr) * Math.cos(angle(i + di))) + ' ' + (midy + (r + dr) * Math.sin(angle(i + di)));
	seq(n).forEach((i) => {
	let f = (c, dr, di) => polar(i, c, dr, di);
	d +=
	f(i == 0 ? 'M' : 'L', 0, 0)
	+ f('Q', s, 0)
	+ f('', s, 0.25)
	+ f('Q', s, 0.5)
	+ f('', 0, 0.5)
	+ f('Q', -s, 0.5)
	+ f('', -s, 0.75)
	+ f('Q', -s, 1)
	+ f('', 0, 1);
	});
	svg.append('path').attr('d', d);


	</script>
	</html>