https://github.com/anderspitman/golicons
Easy-to-use animated icons of Conway's Game of Life that nobody asked for
https://github.com/anderspitman/golicons
Last synced: 12 months ago
JSON representation
Easy-to-use animated icons of Conway's Game of Life that nobody asked for
- Host: GitHub
- URL: https://github.com/anderspitman/golicons
- Owner: anderspitman
- License: mit
- Created: 2018-09-22T03:51:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-19T22:08:24.000Z (almost 6 years ago)
- Last Synced: 2025-06-12T05:04:28.826Z (12 months ago)
- Language: HTML
- Homepage:
- Size: 40 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
golicons are SVG icons which are animated with JavaScript to simulate [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).
## Quickstart
Getting started is a piece of cake:
```html
golicons.start();
```
## 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:
```html
.goli {
width: 64px;
height: 64px;
clip-path: circle(40px at center);
}
.goli-live {
fill: SteelBlue;
stroke: SteelBlue;
transition-duration: 0.25s;
}
.goli-dead {
fill: Tomato;
stroke: Tomato;
transition-duration: 0.25s;
}
golicons.start();
```
You can play with a CodePen of this example [here](https://codepen.io/anon/pen/mGgZXO). Chances are that you'll also want to use some of your own patterns.
```html
.goli {
width: 128px;
height: 93px;
}
const patternStr = `
...........
..O.....O..
.O.O...O.O.
.O..O.O..O.
...O...O...
...OO.OO...
...........
...........
`;
golicons.registerPattern('my-awesome-tumbler', patternStr);
golicons.start();
```
# 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-\
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-\
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.