refractalize/index.html

## index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style type="text/css">
  @-webkit-keyframes rotate-1 {
    from {
      -webkit-transform: rotate(0deg) scale(0.4, 0.4);
    }
    to {
      top: 150px;
      left: 220px;
      -webkit-transform: rotate(0deg);
      -webkit-transform: rotate(360deg) scale(1, 1);
      opacity: 0.0;
    }
  }
  .smoke-1 {
    width: 50px;
    height: 50px;
    top: 200px;
    left: 200px;
    position: absolute;
    background-color: red;
    -webkit-animation-name: rotate-1;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
  }

  @-webkit-keyframes rotate-2 {
    from {
      -webkit-transform: rotate(0deg) scale(0.1, 0.1);
    }
    to {
      top: 150px;
      left: 180px;
      -webkit-transform: rotate(0deg);
      -webkit-transform: rotate(-360deg) scale(1, 1);
      opacity: 0.0;
    }
  }
  .smoke-2 {
    width: 50px;
    height: 50px;
    top: 200px;
    left: 200px;
    position: absolute;
    background-color: red;
    -webkit-animation-name: rotate-2;
    -webkit-animation-duration: 4s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
  }

  #smoke-container {
    position: relative;
  }
</style>
<body>
  <div id="smoke-container">
    <div class="smoke-1"></div>
    <div class="smoke-2"></div>
  </div>
  <script type="text/javascript">
    function startSmoke() {
      var smokeContainer = document.getElementById('smoke-container');
      document.addEventListener('mousemove', function (e) {
        console.log('moved', e);
        smokeContainer.style.top = (e.y - 250) + 'px';
        smokeContainer.style.left = (e.x - 240) + 'px';
      });

      function createSmoke(n) {
        return function () {
          var smoke = document.createElement('div');
          smoke.className = "smoke-" + n;
          smokeContainer.appendChild(smoke);
        };
      }

      setInterval(createSmoke(1), 3000);
      setInterval(createSmoke(2), 2000);
      setInterval(createSmoke(1), 4000);
    }

    startSmoke();
  </script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<style type="text/css">
	@-webkit-keyframes rotate-1 {
	from {
	-webkit-transform: rotate(0deg) scale(0.4, 0.4);
	}
	to {
	top: 150px;
	left: 220px;
	-webkit-transform: rotate(0deg);
	-webkit-transform: rotate(360deg) scale(1, 1);
	opacity: 0.0;
	}
	}
	.smoke-1 {
	width: 50px;
	height: 50px;
	top: 200px;
	left: 200px;
	position: absolute;
	background-color: red;
	-webkit-animation-name: rotate-1;
	-webkit-animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	}

	@-webkit-keyframes rotate-2 {
	from {
	-webkit-transform: rotate(0deg) scale(0.1, 0.1);
	}
	to {
	top: 150px;
	left: 180px;
	-webkit-transform: rotate(0deg);
	-webkit-transform: rotate(-360deg) scale(1, 1);
	opacity: 0.0;
	}
	}
	.smoke-2 {
	width: 50px;
	height: 50px;
	top: 200px;
	left: 200px;
	position: absolute;
	background-color: red;
	-webkit-animation-name: rotate-2;
	-webkit-animation-duration: 4s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	}

	#smoke-container {
	position: relative;
	}
	</style>
	<body>
	<div id="smoke-container">
	<div class="smoke-1"></div>
	<div class="smoke-2"></div>
	</div>
	<script type="text/javascript">
	function startSmoke() {
	var smokeContainer = document.getElementById('smoke-container');
	document.addEventListener('mousemove', function (e) {
	console.log('moved', e);
	smokeContainer.style.top = (e.y - 250) + 'px';
	smokeContainer.style.left = (e.x - 240) + 'px';
	});

	function createSmoke(n) {
	return function () {
	var smoke = document.createElement('div');
	smoke.className = "smoke-" + n;
	smokeContainer.appendChild(smoke);
	};
	}

	setInterval(createSmoke(1), 3000);
	setInterval(createSmoke(2), 2000);
	setInterval(createSmoke(1), 4000);
	}

	startSmoke();
	</script>
	</body>
	</html>