{"_id":"@cardananium/marble-identicons","name":"@cardananium/marble-identicons","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@cardananium/marble-identicons","version":"0.1.2","description":"Generate marble-style identicons","main":"build/identicon.js","types":"build/index.d.ts","scripts":{"build":"webpack"},"keywords":[],"author":{"name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com","url":"https://gordonlarrigan.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/basementuniverse/marble-identicons.git"},"devDependencies":{"@types/randomcolor":"^0.5.6","@types/seed-random":"^2.2.1","ts-loader":"^9.2.5","typescript":"^5.9.3","webpack":"^5.51.0","webpack-cli":"^4.8.0"},"dependencies":{"@cardananium/commonjs":"^1.2.11","seed-random":"^2.2.0"},"_id":"@cardananium/marble-identicons@0.1.2","gitHead":"1df43ef981809b686092405e89f806a51efd3136","bugs":{"url":"https://github.com/basementuniverse/marble-identicons/issues"},"homepage":"https://github.com/basementuniverse/marble-identicons#readme","_nodeVersion":"21.7.3","_npmVersion":"10.5.0","dist":{"integrity":"sha512-VtRf+YEWYPbyuZhdgc5WOqoqiM0eT9FrOV25WmnytTsqD+tKVDQML1y7BOGygOrK7YrklB572YTzHK8ECBL0OA==","shasum":"dc6c8107d373a713356c0622a3bb73624ccd1b1a","tarball":"https://registry.npmjs.org/@cardananium/marble-identicons/-/marble-identicons-0.1.2.tgz","fileCount":6,"unpackedSize":239117,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGNEBnghm1dNX/04CL6P7R288JTuF/JV0rPKZX81zJQQAiATrutSoXplpVzAbvFVyjqqBOEnVZVBYXn77aiL11yeKQ=="}]},"_npmUser":{"name":"lisicky","email":"lisickyzheka@gmail.com"},"directories":{},"maintainers":[{"name":"lisicky","email":"lisickyzheka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/marble-identicons_0.1.2_1762957097595_0.07763456770439814"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-12T14:18:17.539Z","0.1.2":"2025-11-12T14:18:17.869Z","modified":"2025-11-12T14:18:18.119Z"},"maintainers":[{"name":"lisicky","email":"lisickyzheka@gmail.com"}],"description":"Generate marble-style identicons","homepage":"https://github.com/basementuniverse/marble-identicons#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/basementuniverse/marble-identicons.git"},"author":{"name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com","url":"https://gordonlarrigan.com"},"bugs":{"url":"https://github.com/basementuniverse/marble-identicons/issues"},"license":"MIT","readme":"# Marble Identicons\n\nGenerate random marble-style identicons.\n\n![Identicons Preview](preview.png)\n\n## Installation\n\n```\nnpm install @basementuniverse/marble-identicons\n```\n\n## Usage\n\nAPI:\n```js\nfunction identicon(\n name: string,\n settings: Partial\n) => HTMLCanvasElement\n```\n\nSee [below](#settings) for more information on configuration settings.\n\n### In a browser environment\n\nInclude the script in your page and call the `identicon` function. It will return a\n`HTMLCanvasElement` node which can be appended to the DOM or drawn into another canvas.\n\nExample:\n```html\n\n\n```\n\n### In React\n\nThis example shows one way of wrapping the `HTMLCanvasElement` inside a JSX element:\n```tsx\nimport { useRef, useLayoutEffect } from 'react';\nimport { identicon } from '@basementuniverse/marble-identicons';\n\nexport function MarbleIdenticon({ name }: { name: string }) {\n const ref = useRef(null);\n\n useLayoutEffect(() => {\n if (ref.current) {\n ref.current.innerHTML = '';\n ref.current.appendChild(identicon(name));\n }\n });\n\n return (\n
\n );\n}\n```\n\nThis component can then be used like so:\n```tsx\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n```\n\n## Settings\n\n```ts\ntype IdenticonSettings = {\n size: number;\n baseSeed: string;\n font: string;\n fontStyle: FontStyle;\n fontSize: number;\n backgroundColours: string[];\n initialsColours: string[];\n initialsOffset: vec;\n initialsAlpha: number;\n initialsCompositeOperation: CompositeOperation;\n stripeColours: string[];\n stripeAlpha: number;\n stripeCompositeOperation: CompositeOperation;\n stripes: [number, number];\n stripeWidth: [number, number];\n stripeDeviation: [number, number];\n curveAmount: [number, number];\n curveOffset: [number, number];\n startWidthSign: WidthSign[];\n endWidthSign: WidthSign[];\n};\n```\n\n| Setting | Type | Description | Default value |\n|------------------------------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|\n| `size` | `number` | The size of the identicon in pixels | `100` |\n| `baseSeed` | `string` | A string that will be prefixed onto the name when seeding the RNG | `''` |\n| `font` | `string` | The font family used for the initials | `'Helvetica'` |\n| `fontStyle` | `FontStyle` | The font style used for the initials. Must be one of `''`, `'normal'`, `'bold'`, `'italic'` | `'bold'` |\n| `fontSize` | `number` | The font size used for the initials, as a factor of `size` | `0.4` |\n| `backgroundColours` | `string[]` | An array of background colours. One will be picked at random from this list. | `['#16a085', '#1abc9c', '#2ecc71', '#3498db', '#1970b9', '#9b59b6', '#e67e22', '#e74c3c', '#e0395b']` |\n| `initialsColours` | `string[]` | An array of colours used for the initials. The index of the randomly-chosen background colour will be used to select from this list, clamped to the size of the array. | `['#ffffff']` |\n| `initialsOffset` | `vec` | The initials offset position. `{ x: number, y: number }` | `{ x: 0, y: 0 }` |\n| `initialsAlpha` | `number` | The alpha opacity of the initials | `1` |\n| `initialsCompositeOperation` | `CompositeOperation` | The global composite operation used for the initials. Must be one of `'source-over'`, `'lighter'`, `'multiply'`, `'screen'`, `'overlay'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'` | `'source-over'` |\n| `stripeColours` | `string[]` | An array of colours used for the stripes. The index of the randomly-chosen background colour will be used to select from this list, clamped to the size of the array. | `['#f1c40f']` |\n| `stripeAlpha` | `number` | The alpha opacity of the stripes | `0.15` |\n| `stripeCompositeOperation` | `CompositeOperation` | The global composite operation used for the stripes. Must be one of `'source-over'`, `'lighter'`, `'multiply'`, `'screen'`, `'overlay'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'` | `'lighter'` |\n| `stripes` | `[number, number]` | A tuple containing the minimum and maximum number of stripes to draw | `[3, 8]` |\n| `stripeWidth` | `[number, number]` | A tuple containing the minimum and maximum stripe width, measured in radians. | `[0.2, 0.7]` |\n| `stripeDeviation` | `[number, number]` | A tuple containing minimum and maximum distances between successive stripes, measured in radians. | `[-0.5, 0.5]` |\n| `curveAmount` | `[number, number]` | A tuple containing the minimum and maximum radius multiplier for the control point circle. | `[0.2, 0.4]` |\n| `curveOffset` | `[number, number]` | A tuple containing the minimum and maximum offset angle for the control point measured in radians. | `[0, 0.5]` |\n| `startWidthSign` | `WidthSign[]` | An array of signs (`'positive'` or `'negative'`) for the starting edge of each stripe. If `startWidthSign` is `['positive']` and `endWidthSign` is `['negative']` (or vice-versa) then the stripe side edges will not cross over. | `['positive', 'negative']` |\n| `endWidthSign` | `WidthSign[]` | An array of signs (`'positive'` or `'negative'`) for the ending edge of each stripe. | `['positive', 'negative']` |\n","readmeFilename":"README.md","_rev":"1-5127510194ca98c2ec15a7f6573e3c5d"}