Getting started is a piece of cake:
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
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.
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.
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
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.
This sets how long in milliseconds the simulation should wait before starting.
The JS API is minimal by design. However, at the very least you need to use it to kick things off.
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.
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.