Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


  - (1..40).each do
      - (1..100).each do


                // If you aren't familiar with elementary cellular automata: think of it like conway's game of life, but in 1 dimension.
// If you aren't familiar with conway's game of life: it's a system whereby maybe-cool random shit is randomly generated in a neato, random manner.

// These two variables decide the size of the rendered automaton.
// Feel free to change this; just make sure that the numbers are also updated in the HTML/Haml section to accurately reflect this.
// Also, beware: this is relatively computationally heavy for Sass (and/or for codepen? this version is like 15k lines of compiled CSS, is the thing), and it might crash your browser and/or take a long time to render if you make it too big, especially if I add animations.
$numrows: 40;
$cpr: 100; // Cells per row
$cellsize: 5px;

// To use a random initial row, set this to true.
// Otherwise, only the center cell of the top row will start as 'true' / black.
$initialStateRandom: false;

// To use a random rule, set this to true.
$ruleRandom: false;

// If ruleRandom is false, you can set a custom rule by changing any of these 1s to 0s, or vice versa.
// This is "Rule 75", called such because 01001011 is the binary representation of 75.
// It's really pretty.
$setRule: (0 1 0 0 1 0 1 1);
// You might also want to try Rule 110:
// $setRule: (0 1 1 0 1 1 1 0);
// or Rule 30:
// $setRule: (0 0 0 1 1 1 1 0);

// Taking care of some setup here.

// First, we're defining the '$rule' variable at a global scope. It's gonna be a list.
$rule: ();
// If the rule is meant to be random, generate said rule.
@if $ruleRandom {
  @for $i from 1 through 8 {
    // "random(2) - 1" will be either 0 or 1, as Sass' random($limit) func does not include 0 --
    // "random(1)" would always return "1"
    $rule: append($rule, random(2) - 1);
// If the rule is _not_ meant to be random, use the user-supplied rule
@else {
  $rule: $setRule;

// The Elementary Cellular Automata system is neat.
// The numbers in the $result map below are boolean trios, and refer to the cell to the top left, directly above, and to the top right of the currently-being-rendered cell.
// If the $rule is (0, 0, 0, 1, 1, 0, 1, 0), and the space to the top right is the only one of the three 'parents' that is black/'true', then we'd be looking for the "001" key below, which in this example, would mean that the current cell will be "1", aka "true", aka black.
// has a good diagram of this.
$result: (
  "111": nth($rule, 1),
  "110": nth($rule, 2),
  "101": nth($rule, 3),
  "100": nth($rule, 4),
  "011": nth($rule, 5),
  "010": nth($rule, 6),
  "001": nth($rule, 7),
  "000": nth($rule, 8)

// This function does what we described above -- taking the top left, top middle, and top right cells,
// and then looking at the $result map in order to figure out what part of the rule to apply.
// It does this by:
// Taking those three states, as numbers, as parameters;
@function getState($l, $m, $r) {
  // Initializing a string to eventually use to get the proper value from the $result map;
  $resString: '';
  // adding either 1 or 0 to that string for each of the three passed-in numbers;
  $resString: $resString + if($l == 1, 1, 0);
  $resString: $resString + if($m == 1, 1, 0);
  $resString: $resString + if($r == 1, 1, 0);
  // and then returning the result to the place it was called.
  @return map-get($result, $resString + '');

// Finally! Some normal CSS!
// The first bit's just setup.
html, body {
  height: 100%;

body {
  background: #CCC;

.container {
  width: $cpr * $cellsize;
  height: $numrows * $cellsize;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

.row {
  height: $cellsize;
  width: $cellsize * $cpr;
  background: white;

.cell {
  width: $cellsize;
  height: $cellsize;
  background: white;
  float: left;

// And here's where it gets fun!
// We're gonna see if the initial state is random or not.

// Also, we're going to initialize a 'row' variable to use for the first row (and, eventually, every other row) -- this will be a list of 0/1s.
$row: ();
// If we're making the first row random, then:
@if $initialStateRandom == true {
  // we'll add as many random 0s or 1s as we are supposed to to have a full row's worth of cells.
  @for $i from 1 through $cpr {
    $row: append($row, random(2) - 1);
// Otherwise:
@else {
  // We'll make every cell false, except for the center one.
  @for $i from 1 through $cpr {
    $row: append($row, 0);
  $row: set-nth($row, ceil($cpr / 2), 1);

// For the first row only: paint each cell.
.row:nth-child(1) {
  @for $i from 1 through $cpr {
    .cell:nth-child(#{$i}) {
      $bool: nth($row, $i);
      background: if($bool == 1, black, white);

// Then, for every other row:
@for $j from 2 through $numrows {
  // Make a temporary variable for the new row values so that we don't override the current row values during lookup.
  $nextrow: ();

  // For each cell per row,
  @for $i from 1 through $cpr {
    .row:nth-child(#{$j}) {
      .cell:nth-child(#{$i}) {
        // Make a state variable.
        $thisState: fillerStringToLetMeDefineTheVariable;
        // We'll be using the getState function from above to figure out what the state of this cell should be.
        // If we're looking at the first cell in the current row, the top left cell will actually be the last cell of the previous row.
        @if $i == 1 {
          $thisState: getState(nth($row, $cpr), nth($row, $i), nth($row, $i + 1));
        // Likewise for if we're looking at the last cell in a row -- the top right cell will be the first cell of the previous row.
        @elseif $i == $cpr {
          $thisState: getState(nth($row, $i - 1), nth($row, $i), nth($row, 1));
        // If we're looking in the middle, though, it's simpler.
        @else {
          $thisState: getState(nth($row, $i - 1), nth($row, $i), nth($row, $i + 1));
        // Fill up that temporary variable for use in the next row (i.e. the next pass through this loop).
        $nextrow: append($nextrow, $thisState);
        // Paint the current cell with the proper state.
        background: if($thisState == 1, black, white);
  // Make that temporary row variable the "real" one for the next pass.
  $row: $nextrow;



                // just sass. whee.

// if you don't know what's going on here.