hyuki/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="結城浩 / Hiroshi Yuki">
    <meta name="keywords" content="結城浩,Hiroshi Yuki" >
    <title>drawicon</title>
  </head>

  <body>

    <h1>drawicon</h1>
    <p>
    <span id="icon1"></span>
    <span id="icon2"></span>
    <span id="icon3"></span>
    <span id="icon4"></span>
    </p>
    <p>
    <span id="icon5"></span>
    <span id="icon6"></span>
    <span id="icon7"></span>
    <span id="icon8"></span>
    </p>
    <p>
    <span id="icon9"></span>
    <span id="iconA"></span>
    <span id="iconB"></span>
    <span id="iconC"></span>
    </p>
    </div>
    </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js"></script>

<script>
$(function() {
  function drawicon(id, url, seedstring) {
    var SIZE = 8;
    var N = 4;
    var base = SVG(id).size(2 * N * SIZE, 2 * N * SIZE);
    var draw = base.link(url);
    var pattern = []
    var hash = CryptoJS.SHA256(seedstring).toString(CryptoJS.enc.Hex);
    var basecolor = '#' + hash[0] + hash[1] + hash[2];
    var accentcolor = '#' + hash[3] + hash[4] + hash[5];

    for (var i = 0; i < N * N; i++) {
      var c = '#eee';
      var n = parseInt(hash[i + 6], 16);
      if (n == 15) {
        c = accentcolor;
      } else if (n & 1) {
        c = basecolor;
      }
      pattern[i] = c;
    }

    for (var y = 0; y < N; y++) {
      var yy = 2 * N - y - 1;
      for (var x = 0; x < N; x++) {
        var xx = 2 * N - x - 1;
        var color = pattern[y * N + x];
        draw.rect(SIZE, SIZE).move( x * SIZE,  y * SIZE).fill(color);
        draw.rect(SIZE, SIZE).move(xx * SIZE,  y * SIZE).fill(color);
        draw.rect(SIZE, SIZE).move( x * SIZE, yy * SIZE).fill(color);
        draw.rect(SIZE, SIZE).move(xx * SIZE, yy * SIZE).fill(color);
      }
    }
  }

  drawicon('icon1', 'https://svgdotjs.github.io/', "SEED");
  drawicon('icon2', 'https://svgdotjs.github.io/', "HELLO");
  drawicon('icon3', 'https://svgdotjs.github.io/', "314");
  drawicon('icon4', 'https://svgdotjs.github.io/', "287");

  drawicon('icon5', 'https://svgdotjs.github.io/', "SEEDx");
  drawicon('icon6', 'https://svgdotjs.github.io/', "HELLOx");
  drawicon('icon7', 'https://svgdotjs.github.io/', "314x");
  drawicon('icon8', 'https://svgdotjs.github.io/', "287x");

  drawicon('icon9', 'https://svgdotjs.github.io/', "SEEDy");
  drawicon('iconA', 'https://svgdotjs.github.io/', "HELLOy");
  drawicon('iconB', 'https://svgdotjs.github.io/', "314y");
  drawicon('iconC', 'https://svgdotjs.github.io/', "287y");
});
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="結城浩 / Hiroshi Yuki">
	<meta name="keywords" content="結城浩,Hiroshi Yuki" >
	<title>drawicon</title>
	</head>

	<body>

	<h1>drawicon</h1>
	<p>
	<span id="icon1"></span>
	<span id="icon2"></span>
	<span id="icon3"></span>
	<span id="icon4"></span>
	</p>
	<p>
	<span id="icon5"></span>
	<span id="icon6"></span>
	<span id="icon7"></span>
	<span id="icon8"></span>
	</p>
	<p>
	<span id="icon9"></span>
	<span id="iconA"></span>
	<span id="iconB"></span>
	<span id="iconC"></span>
	</p>
	</div>
	</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js"></script>

	<script>
	$(function() {
	function drawicon(id, url, seedstring) {
	var SIZE = 8;
	var N = 4;
	var base = SVG(id).size(2 * N * SIZE, 2 * N * SIZE);
	var draw = base.link(url);
	var pattern = []
	var hash = CryptoJS.SHA256(seedstring).toString(CryptoJS.enc.Hex);
	var basecolor = '#' + hash[0] + hash[1] + hash[2];
	var accentcolor = '#' + hash[3] + hash[4] + hash[5];

	for (var i = 0; i < N * N; i++) {
	var c = '#eee';
	var n = parseInt(hash[i + 6], 16);
	if (n == 15) {
	c = accentcolor;
	} else if (n & 1) {
	c = basecolor;
	}
	pattern[i] = c;
	}

	for (var y = 0; y < N; y++) {
	var yy = 2 * N - y - 1;
	for (var x = 0; x < N; x++) {
	var xx = 2 * N - x - 1;
	var color = pattern[y * N + x];
	draw.rect(SIZE, SIZE).move( x * SIZE, y * SIZE).fill(color);
	draw.rect(SIZE, SIZE).move(xx * SIZE, y * SIZE).fill(color);
	draw.rect(SIZE, SIZE).move( x * SIZE, yy * SIZE).fill(color);
	draw.rect(SIZE, SIZE).move(xx * SIZE, yy * SIZE).fill(color);
	}
	}
	}

	drawicon('icon1', 'https://svgdotjs.github.io/', "SEED");
	drawicon('icon2', 'https://svgdotjs.github.io/', "HELLO");
	drawicon('icon3', 'https://svgdotjs.github.io/', "314");
	drawicon('icon4', 'https://svgdotjs.github.io/', "287");

	drawicon('icon5', 'https://svgdotjs.github.io/', "SEEDx");
	drawicon('icon6', 'https://svgdotjs.github.io/', "HELLOx");
	drawicon('icon7', 'https://svgdotjs.github.io/', "314x");
	drawicon('icon8', 'https://svgdotjs.github.io/', "287x");

	drawicon('icon9', 'https://svgdotjs.github.io/', "SEEDy");
	drawicon('iconA', 'https://svgdotjs.github.io/', "HELLOy");
	drawicon('iconB', 'https://svgdotjs.github.io/', "314y");
	drawicon('iconC', 'https://svgdotjs.github.io/', "287y");
	});
	</script>
	</body>
	</html>