Skip to content

Instantly share code, notes, and snippets.

@zeddash
Last active March 10, 2020 11:07
Show Gist options
  • Save zeddash/f2e7743db6bdaef2b9183833bac7f3ac to your computer and use it in GitHub Desktop.
Save zeddash/f2e7743db6bdaef2b9183833bac7f3ac to your computer and use it in GitHub Desktop.
Cellular Automata
div.cells
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
div.cell
{
"scripts": [
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"
],
"styles": [
"https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
]
}
:root {
--size:1rem;
--gap:.25;
--columns:32;
}
body {
display: grid;
place-items: center;
overflow: hidden;
.cells {
display: grid;
place-items: center;
grid-template-columns: repeat(var(--columns),var(--size));
grid-gap: calc(var(--size)*var(--gap));
margin:2rem;
}
.cell {
background:#ddd;
height:var(--size);
width:var(--size);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment