fabrixxm/rough-skull-anim.html

## rough-skull-anim.html
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>Skulls with Rough.js</title>
  <meta name="description" content="Random squares generative art using rough.js">
  <style>
    body {
      margin: 0;
      padding: 10px;
      text-align: center;
    }

    svg {
      display: inline-block;
      width: 90px;
      height: 90px;
      margin: 5px;
    }

    footer {
      padding: 20px;
      text-align: center;
      margin-top: 50px;
      font-family: monospace;
      font-size: 14px;
      border-top: 1px solid #e5e5e5;
    }

    a,
    a:visited,
    a:hover {
      color: inherit;
      text-decoration: none;
      box-shadow: 0 2px #B71C1C;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <footer>
    <a href="https://github.com/pshihn/rough-playground/tree/master/skulls">View source</a>. Made with <a href="https://roughjs.com/">Rough.js</a>
  </footer>
  <script src="https://unpkg.com/roughjs@2.2.5/dist/rough.min.js"></script>
  <script>
    const container = document.getElementById('container');
    function redraw() {
      while (container.hasChildNodes()) {
        container.removeChild(container.firstChild);
      }

      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttributeNS(null, "viewBox", "0 0 652.801 652.801");
      container.appendChild(svg);
      const rc = rough.svg(svg);
      svg.appendChild(rc.path(`M224.4,285.6c-33.782,0-61.2,27.397-61.2,61.201c0,33.781,27.418,61.199,61.2,61.199s61.2-27.418,61.2-61.199
        C285.601,312.997,258.183,285.6,224.4,285.6z M428.4,285.6c-33.782,0-61.2,27.397-61.2,61.201
        c0,33.781,27.418,61.199,61.2,61.199s61.2-27.418,61.2-61.199C489.601,312.997,462.183,285.6,428.4,285.6z M326.4,0
        c-169.014,0-306,136.986-306,306c0,90.516,39.535,171.605,102,227.623V612c0,22.541,18.278,40.801,40.8,40.801h326.4
        c22.521,0,40.8-18.26,40.8-40.801v-78.377c62.485-56.018,102-137.107,102-227.623C632.4,136.986,495.414,0,326.4,0z
        M489.539,488.07L469.2,506.287V591.6h-40.8V530.4h-40.8V591.6h-40.8V530.4H306V591.6h-40.8V530.4h-40.8V591.6h-40.8v-85.312
        l-20.339-18.238C111.364,441.537,81.601,375.176,81.601,306c0-134.987,109.813-244.8,244.8-244.8
        c134.986,0,244.8,109.813,244.8,244.8C571.2,375.176,541.437,441.537,489.539,488.07z`,
        {
          roughness: 4 + (Math.random() * 8),
          strokeWidth: 2 + (Math.random() * 3)
        }
      ));
      setTimeout(redraw, 100);
    }
    redraw();
  </script>
</body>

</html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
	<title>Skulls with Rough.js</title>
	<meta name="description" content="Random squares generative art using rough.js">
	<style>
	body {
	margin: 0;
	padding: 10px;
	text-align: center;
	}

	svg {
	display: inline-block;
	width: 90px;
	height: 90px;
	margin: 5px;
	}

	footer {
	padding: 20px;
	text-align: center;
	margin-top: 50px;
	font-family: monospace;
	font-size: 14px;
	border-top: 1px solid #e5e5e5;
	}

	a,
	a:visited,
	a:hover {
	color: inherit;
	text-decoration: none;
	box-shadow: 0 2px #B71C1C;
	}
	</style>
	</head>

	<body>
	<div id="container"></div>
	<footer>
	<a href="https://github.com/pshihn/rough-playground/tree/master/skulls">View source</a>. Made with <a href="https://roughjs.com/">Rough.js</a>
	</footer>
	<script src="https://unpkg.com/roughjs@2.2.5/dist/rough.min.js"></script>
	<script>
	const container = document.getElementById('container');
	function redraw() {
	while (container.hasChildNodes()) {
	container.removeChild(container.firstChild);
	}

	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	svg.setAttributeNS(null, "viewBox", "0 0 652.801 652.801");
	container.appendChild(svg);
	const rc = rough.svg(svg);
	svg.appendChild(rc.path(`M224.4,285.6c-33.782,0-61.2,27.397-61.2,61.201c0,33.781,27.418,61.199,61.2,61.199s61.2-27.418,61.2-61.199
	C285.601,312.997,258.183,285.6,224.4,285.6z M428.4,285.6c-33.782,0-61.2,27.397-61.2,61.201
	c0,33.781,27.418,61.199,61.2,61.199s61.2-27.418,61.2-61.199C489.601,312.997,462.183,285.6,428.4,285.6z M326.4,0
	c-169.014,0-306,136.986-306,306c0,90.516,39.535,171.605,102,227.623V612c0,22.541,18.278,40.801,40.8,40.801h326.4
	c22.521,0,40.8-18.26,40.8-40.801v-78.377c62.485-56.018,102-137.107,102-227.623C632.4,136.986,495.414,0,326.4,0z
	M489.539,488.07L469.2,506.287V591.6h-40.8V530.4h-40.8V591.6h-40.8V530.4H306V591.6h-40.8V530.4h-40.8V591.6h-40.8v-85.312
	l-20.339-18.238C111.364,441.537,81.601,375.176,81.601,306c0-134.987,109.813-244.8,244.8-244.8
	c134.986,0,244.8,109.813,244.8,244.8C571.2,375.176,541.437,441.537,489.539,488.07z`,
	{
	roughness: 4 + (Math.random() * 8),
	strokeWidth: 2 + (Math.random() * 3)
	}
	));
	setTimeout(redraw, 100);
	}
	redraw();
	</script>
	</body>

	</html>