SOURCE

var caos = {
  start: {x:0,y:0},
  f1: function (p) {
    return {x: 0, 
            y: 0.16 * p.y};
  },
  f2: function (p) {
    return {x: 0.85 * p.x + 0.04 * p.y, 
            y: -0.04 * p.x + 0.85 * p.y + 1.6};
  },
  f3: function (p) {
    return {x: 0.2 * p.x - 0.26 * p.y, 
            y: 0.23 * p.x + 0.22 * p.y + 1.6};
  },
  f4: function (p) {
    return {x: -0.15 * p.x + 0.28 * p.y, 
            y: 0.26 * p.x + 0.24 * p.y + 0.44};
  },
  next: function (p) {
    var r = Math.random();
    if (r <= 0.02) return caos.f1(p);
    else if (r < 0.88) return caos.f2(p);
    else if (r < 0.94) return caos.f3(p);
    return caos.f4(p);
  }
};
var output = {
  canvas: document.getElementById('c1'),
  button: document.getElementById('b1'),
  start: function () {
    output.context = output.canvas.getContext('2d');
    output.canvas.width = window.innerWidth;
    output.canvas.height = window.innerHeight;
    output.clear();
    output.point = caos.start;
    output.context.fillStyle = 'springgreen';
    output.draw();
    output.button.addEventListener('click', output.start);
  },
  loop: 0,
  scale: {x: 0.13, y: 0.09},
  draw:  function () {
    for (var i=0; i<200; i++) {
      var next = caos.next(output.point);
      output.context.fillRect(
        window.innerWidth/2 + Math.floor(next.x * window.innerWidth * output.scale.x),
        window.innerHeight - Math.floor(next.y * window.innerHeight * output.scale.y),
        1,1);
      output.point = next;
    }
    output.loop++
    if (output.loop < 10E2) requestAnimationFrame(output.draw);
  },
  clear: function () {
    var w = output.canvas.width, 
        h = output.canvas.height;
    output.loop = 0;
    output.context.clearRect(0,0,w,h);
  }
};
output.start();

<canvas id="c1"></canvas>
<button id="b1">↺</button>

body {
  background: black;
  overflow: hidden;
}
button {
  position: absolute;
  top: 0;
  left: 0;
}