index.html

<style>
	body {
		margin: 0;
	}

	.row {
		clear: both;
	}

	.cell {
		background: #380036;
		float: left;
		height: 0.5vw;
		width: 0.5vw;
	}

	.cell.active {
		background: #EF6F6C;
	}
</style>

<div class="container"></div>

<script>
	const rulesets = {
		45: [
			[true, false, true],
			[false, true, true],
			[false, true, false],
			[false, false, false],
		],
		57: [
			[true, false, true],
			[true, false, false],
			[false, true, true],
			[false, false, false],
		],
		105: [
			[true, true, false],
			[true, false, true],
			[false, true, true],
			[false, false, false],
		],
		225: [
			[true, true, true],
			[true, true, false],
			[true, false, true],
			[false, false, false],
		]
	}
	const config = {
		perRow: 200,
		ruleset: rulesets[45],
		random: false,
		timeout: 20,
	}
	const container = document.querySelector('.container')

	const getLastRow = () => {
		const allRows = document.querySelectorAll('.row')

		return allRows[allRows.length - 1]
	}

	const createRow = () => {
		const row = document.createElement('div')
		row.classList.add('row')
		createCells(row)
		container.appendChild(row)
	}

	const isActive = cell => cell.classList.contains('active')

	const cellMatchesRule = (left, prev, right, rule) => {
		return (
			isActive(left) === rule[0] &&
			isActive(prev) === rule[1] &&
			isActive(right) === rule[2]
		);
	}

	const matchesRuleSet = compare => {
		return config.ruleset.reduce((matches, rule) => {
			if (matches || compare(rule)) {
				return true;
			}

			return matches
		}, false)
	}

	const setState = (cell, index, lastRow) => {
		if (lastRow) {
			const prev = lastRow.children[index];
			const left = prev.previousSibling || lastRow.children[lastRow.children.length - 1];
			const right = prev.nextSibling || lastRow.children[0];
			const matchesRule = rule => cellMatchesRule(left, prev, right, rule)

			if (matchesRuleSet(matchesRule)) {
				cell.classList.add('active')
			}
		} else {
			if (config.random) {
				const randomBinary = Math.floor((Math.random() * 2));

				if (randomBinary === 1) {
					cell.classList.add('active')
				}
			} else {
				if (index === config.perRow / 2) {
					cell.classList.add('active')					
				}
			}
		}
	}

	const createCells = row => {
		const lastRow = getLastRow()

		for (let i = 0; i < config.perRow; i++) {
			const cell = document.createElement('div')
			cell.classList.add('cell')

			setState(cell, i, lastRow)

			row.appendChild(cell)
		}
	}

	setInterval(() => {
		createRow()
		window.scrollTo(0, document.body.scrollHeight)
	}, config.timeout)
</script>