Rule110

HTML

<pre id="automaton">ddd</pre>

CSS

#automaton {
  line-height: 1.5ex;
}
p {
  margin: 0;
}
.black {
  color: #000;
}
.white {
  color: #fff;
}

JavaScript

var rule, width;

rule = 110;
width = 40;

function calculate( previousRow ){
  var widthMinusOne, newRow, left, right, choice;

  widthMinusOne = width - 1;

  newRow = Array.apply( null, Array( width )).map( function( _, index ){
    left  = index == 0 ? widthMinusOne : index - 1;
    right = index == widthMinusOne ? 0 : index + 1;

    choice = 0;

    if( previousRow[ left ])  { choice |= 0x04; }
    if( previousRow[ index ]) { choice |= 0x02; }
    if( previousRow[ right ]) { choice |= 0x01; }

    return (((rule >> choice) & 0x01) == 1);
  });

  return newRow;
};

function print( row, parentElement ){
  var rowElement, cell;

  rowElement = document.createElement( 'p' );

  row.forEach( function( bit ){
    cell = document.createElement( 'span' );
    cell.innerHTML = '\u2588';
    cell.className = bit ? 'black' : 'white';
    rowElement.appendChild( cell );
  });

  parentElement.appendChild( rowElement );
};

function getRandomBitArray( width ){
  var randomRow;

  randomRow = Array.apply( null, Array( width )).map( function( el, index ){
    return Math.random() > .5;
  });

  return randomRow;
}

window.onload = function(){
  var height, numberOfRows, row, automaton;

  if(window.location.hash) {
    hash = window.location.hash.substring(1);
    width = hash.length;
    row = hash.split('').map(function(el){ return Number(el) > 0; });
  } else {
    row = getRandomBitArray( width );
  }

  height = 40;
  numberOfRows = 0;

  automaton = document.getElementById( 'automaton' );
  automaton.style.fontSize = automaton.offsetWidth / width + 'pt';

  print( row, automaton );

  while( numberOfRows < height ){
    row = calculate( row );
    print( row, automaton );
    numberOfRows ++;
  }
}