golicons are SVG icons which are animated with JavaScript to simulate Conway's Game of Life. The code is open source (MIT) and available on GitHub.

Table of Contents

Quickstart

Getting started is a piece of cake:

Other examples

It's working, but the result is rather ugly and boring. You can style the icons using standard SVG CSS. There are also options that can be configured using CSS classes on the elements. All of these class names (listed below) are considered part of golicon's public API and can be expected to remain stable for each major version. Let's try to add a little CSS and configure a couple other options to make it more exciting:

That's a bit better. You can play with a CodePen of this example here. Chances are that you'll also want to use some of your own patterns

API

golicons is designed to required as little JavaScript as possible. This is done both to keep things as declarative as possible, and to hopefully make it more approachable to designers. To that end, most of the options can be accessed by setting CSS class names on your golicons. All of the classes begin with 'goli-' to help avoid collisions.

Style Class Names

The style class names are used to change the visual representation of the golicons. You can standard CSS selectors on these classes to affect things.

goli-live

This is used to select the SVG elements used to represent cells that are alive. These are currently implement as SVG rect elements, but no assumptions should be made about this moving forward.

goli-dead

This is used to select the SVG elements used to represent cells that are dead. These are currently implement as SVG rect elements, but no assumptions should be made about this moving forward.

Settings Class Names

Settings class names are used to configure how the golicons JavaScript code will process the golicon.

goli

This has two primary purposes. The first is to indicate to the golicons JavaScript code that this element should be processed as a golicon. Therefore everyone golicon needs to have this class. The second is to serve as a selector for setting HTML CSS rules such as width and height on your golicons.

goli-tick-ms-<Number>

This sets the tick period in milliseconds for the golicons. For example, the value "goli-tick-ms-1000" will cause the golicon to tick (proceed to the next frame). once per second, while a value of "goli-tick-ms-50" will cause it to tick every 50 milliseconds.

goli-start-delay-ms-<Number>

This sets how long in milliseconds the simulation should wait before starting.

JavaScript

The JS API is minimal by design. However, at the very least you need to use it to kick things off.

golicons.start()

This function kicks everything off. It runs querySelector on the page and grabs an elements that have the "goli" class and processes them as golicons.

golicons.registerPattern(name, patternString)

This function is for registering new patterns. The pattern string is a series of newline-separated rows where "." represents a dead cell and "O" (capital "o") represents a live one.