{"id":17117741,"url":"https://github.com/anderspitman/golicons","last_synced_at":"2025-06-18T03:03:15.992Z","repository":{"id":57251893,"uuid":"149843151","full_name":"anderspitman/golicons","owner":"anderspitman","description":"Easy-to-use animated icons of Conway's Game of Life that nobody asked for","archived":false,"fork":false,"pushed_at":"2020-08-19T22:08:24.000Z","size":41,"stargazers_count":4,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-12T05:04:28.826Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anderspitman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-22T03:51:09.000Z","updated_at":"2020-08-19T22:08:26.000Z","dependencies_parsed_at":"2022-09-04T23:10:42.028Z","dependency_job_id":null,"html_url":"https://github.com/anderspitman/golicons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anderspitman/golicons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anderspitman%2Fgolicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anderspitman%2Fgolicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anderspitman%2Fgolicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anderspitman%2Fgolicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anderspitman","download_url":"https://codeload.github.com/anderspitman/golicons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anderspitman%2Fgolicons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259887137,"owners_count":22926868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T17:52:36.042Z","updated_at":"2025-06-18T03:03:10.970Z","avatar_url":"https://github.com/anderspitman.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"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).\n\n## Quickstart\n\nGetting started is a piece of cake:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang='en'\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e \n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class='goli goli-glider'\u003e\u003c/div\u003e\n    \u003cscript src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      golicons.start();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Other Examples\n\nIt'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:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang='en'\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e \n    \u003cstyle\u003e\n      .goli {\n        width: 64px;\n        height: 64px;\n        clip-path: circle(40px at center);\n      }\n\n      .goli-live {\n        fill: SteelBlue;\n        stroke: SteelBlue;\n        transition-duration: 0.25s;\n      }\n\n      .goli-dead {\n        fill: Tomato;\n        stroke: Tomato;\n        transition-duration: 0.25s;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003cdiv class='goli goli-glider goli-start-delay-ms-500 goli-tick-ms-250'\u003e\u003c/div\u003e\n\n    \u003cscript src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      golicons.start();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou 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.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang='en'\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e \n    \u003cstyle\u003e\n      .goli {\n        width: 128px;\n        height: 93px;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003cdiv class='goli goli-my-awesome-tumbler goli-tick-ms-200'\u003e\u003c/div\u003e\n\n    \u003cscript src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      const patternStr = `\n        ...........\n        ..O.....O..\n        .O.O...O.O.\n        .O..O.O..O.\n        ...O...O...\n        ...OO.OO...\n        ...........\n        ...........\n      `;\n\n      golicons.registerPattern('my-awesome-tumbler', patternStr);\n\n      golicons.start();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# API\n\ngolicons 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.\n\n## Style Class Names\n\nThe style class names are used to change the visual representation of the golicons. You can standard CSS selectors on these classes to affect things.\n\n### goli-live\n\nThis 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. \n\n### goli-dead\n\nThis 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. \n\n## Settings Class Names\n\nSettings class names are used to configure how the golicons JavaScript code will process the golicon.\n\n### goli\n\nThis 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. \n\n## goli-tick-ms-\\\u003cNumber\u003e\n\nThis 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. \n\n## goli-start-delay-ms-\\\u003cNumber\u003e\n\nThis sets how long in milliseconds the simulation should wait before starting. \n\n## JavaScript\n\nThe JS API is minimal by design. However, at the very least you need to use it to kick things off.\n\n### golicons.start()\n\nThis function kicks everything off. It runs querySelector on the page and grabs an elements that have the \"goli\" class and processes them as golicons. \n\n### golicons.registerPattern(name, patternString)\n\nThis 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. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanderspitman%2Fgolicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanderspitman%2Fgolicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanderspitman%2Fgolicons/lists"}