{"id":19723916,"url":"https://github.com/wraith13/flounder.style.js","last_synced_at":"2026-04-02T01:29:37.012Z","repository":{"id":214424946,"uuid":"736416935","full_name":"wraith13/flounder.style.js","owner":"wraith13","description":"Digital color depth pattern maker for TypeScript/JavaScript","archived":false,"fork":false,"pushed_at":"2025-06-03T11:27:25.000Z","size":4041,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-19T07:51:12.400Z","etag":null,"topics":["css","pattern","style","universal-design"],"latest_commit_sha":null,"homepage":"https://wraith13.github.io/flounder.style.js/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wraith13.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE_1_0.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-27T21:10:15.000Z","updated_at":"2025-06-03T11:27:26.000Z","dependencies_parsed_at":"2024-02-01T13:30:54.865Z","dependency_job_id":"3c992056-61dc-463e-ad4f-bd20ea1fe346","html_url":"https://github.com/wraith13/flounder.style.js","commit_stats":null,"previous_names":["wraith13/flounder.style.js"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/wraith13/flounder.style.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fflounder.style.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fflounder.style.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fflounder.style.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fflounder.style.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wraith13","download_url":"https://codeload.github.com/wraith13/flounder.style.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fflounder.style.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31293902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T01:05:07.454Z","status":"ssl_error","status_checked_at":"2026-04-02T00:56:46.496Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","pattern","style","universal-design"],"created_at":"2024-11-11T23:23:56.815Z","updated_at":"2026-04-02T01:29:36.995Z","avatar_url":"https://github.com/wraith13.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flounder.style.js\n\nDigital color depth pattern style maker for TypeScript/JavaScript\n\n## Features\n\nThis library provides CSS for expressing percentages by area of ​​a color pattern instead of color intensity.\n\nExpressions based on color density can be difficult to recognize, not only for colorblind people, but also for people who are not colorblind. In addition, the expression of subtle hues based on color density is strongly affected by the color development of the display, and in the user environment, the colors may appear quite different from the intended hues.\n\nThese problems can be avoided by using color pattern expressions.\n\n- [samples](https://wraith13.github.io/flounder.style.js/samples.html)\n- [demo](https://wraith13.github.io/flounder.style.js/demo.html)\n\n## Redering CSS Sample\n\n```css\nbackground-color: white;\nbackground-image:\n    radial-gradient(circle, rgb(170, 255, 221) 8.91px, transparent 8.91px),\n    radial-gradient(circle, rgb(170, 255, 221) 8.91px, transparent 8.91px),\n    radial-gradient(circle, rgb(170, 255, 221) 8.91px, transparent 8.91px),\n    radial-gradient(circle, rgb(170, 255, 221) 8.91px, transparent 8.91px);\nbackground-size: 41.569px 48px;\nbackground-position:\n    calc(0px + 50%) calc(0px + 50%),\n    calc(0px + 50%) calc(24px + 50%),\n    calc(20.785px + 50%) calc(12px + 50%),\n    calc(20.785px + 50%) calc(36px + 50%);\n```\n\n( Line breaks and indentation have been adjusted for ease of viewing, and the CSS that is actually created will not have line breaks and indentation adjusted like this. )\n\n## Redering Samples\n\nSee [samples](https://wraith13.github.io/flounder.style.js/samples.html).\n\n![](./image/sample0.png)\n![](./image/sample1.png)\n\n## How to install for your project by npm\n\n```sh\nnpm install @wraith13/flounder.style.js --save\n```\n\n## How to use\n\n```typescript\nimport { flounderStyle } from \"flounder.style.js\";\n\n// make style\nconst data: flounderStyle.Type.Arguments =\n{\n    type: \"trispot\",\n    layoutAngle: \"regular\",\n    foregroundColor: \"#AAFFDD\",\n    intervalSize: 24,\n    depth: 0.5,\n};\nconst style = flounderStyle.makeStyle(data);\n\n// apply style\nconst element = document.getElementById(\"YOUR-ELEMENT\");\nflounderStyle.setStyle(element, style);\n// You can also: flounderStyle.setStyle(element, data);\n\n// get CSS string\nconsole.log(`CSS: ${flounderStyle.styleToString(style)}`);\n// You can also: console.log(`CSS: ${flounderStyle.styleToString(data)}`);\n```\n\n### FlounderStyle.Type.Arguments\n\n|key|type|default|description|\n|---|---|---|---|\n|$schema|...|OPTIONAL|JSON Schema for manual input support|\n|type|`\"trispot\"` \\| `\"tetraspot\"` \\| `\"stripe\"` \\| `\"diline\"` \\| `\"tryline\"`|NOT OPTIONAL|see [samples](https://wraith13.github.io/flounder.style.js/samples.html).|\n|layoutAngle|`\"regular\"` \\| `\"alternative\"` \\| `FlounderStyle.Type.SignedRate`|`\"regular\"`|see [samples](https://wraith13.github.io/flounder.style.js/samples.html). number can only be specified when type is \"stripe\" or \"diline\" or \"triline\".|\n|offsetX|`FlounderStyle.Type.SignedPixel`|0.0|X-axis offset of pattern|\n|offsetY|`FlounderStyle.Type.SignedPixel`|0.0|Y-axis offset of pattern|\n|foregroundColor|`FlounderStyle.Type.Color` ( [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) )|NOT OPTIONAL|Foreground pattern color. foregroundColor must be other than \"transparent\".|\n|backgroundColor|`FlounderStyle.Type.Color` ( [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) )|`\"transparent\"`|Background pattern color. When using reverseRate, backgroundColor must be other than \"transparent\".|\n|intervalSize|`FlounderStyle.Type.Pixel`|24|Number of pixels from the center of a spot to the center of the next spot.|\n|depth|`FlounderStyle.Type.Rate`|NOT OPTIONAL|Rate of area occupied by foreground color pattern|\n|blur|`FlounderStyle.Type.Pixel`|0.0|If you want to improve the visibility of overlapping text, increase this value to blur the pattern.|\n|maxPatternSize|`FlounderStyle.Type.Pixel`|`undefined`|If maxPatternSize is specified, instead of increasing the spot size beyond this value, intervalSize will be decreased.|\n|reverseRate|`FlounderStyle.Type.SignedRate` \\| `\"auto\"` \\| `\"-auto\"` |`undefined`|To avoid pixel collapse, when depth is greater than reverseRate, the foreground color, background color, and depth are reversed. When using reverseRate, backgroundColor must be other than \"transparent\". If \"auto\" is specified, it will be set to the same value as the depth at which the spots touch each other. If a negative value is specified, the process will be reversed from the beginning and processed regularly with a depth greater than the absolute value of reverseRate.|\n|anglePerDepth|`FlounderStyle.Type.SignedRate` \\| `\"auto\"` \\| `\"-auto\"` |`undefined`|...|\n|maximumFractionDigits|`FlounderStyle.Type.Count`|3|The maximum number of digits after the decimal point for numbers used in the generated CSS.|\n\n#### number types\n\n- The range of `FlounderStyle.Type.Rate` number is 0.0 to 1.0.\n- The range of `FlounderStyle.Type.SignedRate` number is -1.0 to 1.0.\n- The range of `FlounderStyle.Type.Pixel` number is 0.0 or greater.\n- The range of `FlounderStyle.Type.SignedPixel` number is exclude a NaN and ±Infinity.\n- The range of `FlounderStyle.Type.Count` number is an integer value greater than or equal to 0.\n\n#### JSON Schema\n\nYou can use the following JSON Schema when entering `FlounderStyle.Type.Arguments` data manually.\n\n\u003chttps://raw.githubusercontent.com/wraith13/flounder.style.js/master/generated/schema.json#\u003e\n\n#### ⚠️ About translucent color\n\nUsing translucent colors for `foregroundColor` and `backgroundColor` often does not work well due to overlapping patterns.\nThis is the same reason why you can't use \"transparent\" for `foregroundColor`, and why you can't use \"transparent\" for `backgroundColor` when using reverseRate.\n\nIf you want to use a translucent color pattern, instead of directly specifying a translucent color to `foregroundColor` or `backgroundColor`, instead specify `opacity` in the Style (CSS) of that HTML Element to make the entire HTML Element translucent.\n\n#### How to do pattern rotation animation\n\n```typescript\nimport { flounderStyle as FlounderStyle } from \"flounder.style.js\";\n\nexport const modRate = (value: number, unit: number) =\u003e (value %unit) /unit;\nlet continueAnimation = false;\nexport const animationFrame = (tick: number) =\u003e\n{\n    // make style\n    const step = modRate(tick, 3000); // 3000ms\n    const data: FlounderStyle.Type.Arguments =\n    {\n        ...\n    };\n    const offsetCoefficient = FlounderStyle.calculateOffsetCoefficient(data);\n    const direction = FlounderStyle.selectClosestAngleDirection(offsetCoefficient.directions, \"up\"); // \"up\": 0.75\n    // const direction = flounderStyle.selectClosestAngleDirection(offsetCoefficient.directions, 0.0); // \"right\": 0.0\n    data.offsetX = offsetCoefficient.intervalSize * direction.x *step;\n    data.offsetY = offsetCoefficient.intervalSize * direction.y *step;\n    const style = FlounderStyle.makeStyle(data);\n\n    // apply style to element\n    const element = document.getElementById(\"YOUR-ELEMENT\");\n    FlounderStyle.setStyle(element, style);\n\n    // apply style to class\n    // const styleElement = document.getElementById(\"YOUR-ANIMATION-STYLE-ELEMENT\") as HTMLStyleElement;\n    // const css = `.YOUR-CSS-CLASS {${flounderStyle.styleToString(style)}}\\r\\n`;\n    // if (styleElement.innerHTML !== css)\n    // {\n    //     styleElement.innerHTML = css;\n    // }\n\n    if (continueAnimation)\n    {\n        window.requestAnimationFrame(animationFrame);\n    }\n};\nexport const = startAnimation() =\u003e\n{\n    if ( ! continueAnimation)\n    {\n        continueAnimation = true;\n        window.requestAnimationFrame(animationFrame);\n    }\n};\nexport const = stopAnimation() =\u003e\n{\n    continueAnimation = false;\n};\n\nstartAnimation();\nsetTimeout(() =\u003e stopAnimation(), 60000);\n```\n\n- It is not necessary to use the return value of flounderStyle.calculateOffsetCoefficient(), but by using this return value to calculate offset, you can animate beautifully without showing the loop seam.\n- data.intervalSize does not necessarily match the actual intervalSize due to data.maxPatternSize, so use offsetCoefficient.intervalSize when calculating offset.\n\n## Development environment construction\n\n0. Install [Visual Studio Code](https://code.visualstudio.com/) ( Not required, but recommended. )\n1. Install [Node.js](https://nodejs.org/)\n2. Execute `npm install`.\n\n## How to build\n\nrequires: [Node.js](https://nodejs.org/), [TypeScript Compiler](https://www.npmjs.com/package/typescript)\n\n`tsc -P .` or `tsc -P . -w`\n\n## License\n\n[Boost Software License](./LICENSE_1_0.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwraith13%2Fflounder.style.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwraith13%2Fflounder.style.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwraith13%2Fflounder.style.js/lists"}