Home

Awesome

@prescott/geo-pattern

Build Status Github Pages Status Semantic Release enabled npm bundle size (minified, gzipped) Renovate enabled MIT license

Cover Image

Create beautiful generative geometric background images from a string ✨

@prescott/geo-pattern has visual regression tests and perfectly matches to the original geo-pattern gem outputs!

Live Demo

https://mooyoul.github.io/geo-pattern/

E2E Test Status

BrowserStatusBuild
IE 11BrowserStack StatusES5 Build
Edge LatestBrowserStack StatusES6 Build
Firefox LatestBrowserStack StatusES6 Build
Edge 15BrowserStack StatusES6 Build
Chrome LatestBrowserStack StatusES6 Build, Native Build
macOS Safari LatestBrowserStack StatusES6 Build
iOS Safari LatestBrowserStack StatusES6 Build
iPadOS Safari LatestBrowserStack StatusES6 Build
Android Tab Chrome LatestBrowserStack StatusES6 Build
Android Chrome LatestBrowserStack StatusES6 Build

Getting Started

$ npm install @prescott/geo-pattern --save

API

generate(params: GeneratePatternParams) => Promise<Pattern>

interface GeneratePatternParams {
  input: string;
  patterns?: string[];
  color?: string;
  baseColor?: string;
}

interface Pattern {
  background?: Background;
  structure?: Structure;
  width: number;
  height: number;
  toSVG(): string;
  toDataURL(): string;
}

import { generate } from "@prescott/geo-pattern";
const pattern = await generate({ input: "lorem ipsum" });
const svg = pattern.toSVG();
const dataUri = pattern.toDataURL();

Browser Builds

@prescott/geo-pattern provides browser builds.

All browser builds require Promise, Map, Set, and TextEncoder. You should polyfill missing features if you need to support legacy browsers.

Currently, There are four types of Browser Build.

TypePathNotes
Default (CommonJS)dist/browserUse this build if you're using bundler like Webpack.
ES5 (UMD)browser/es5Use this build if you want to support legacy browsers (e.g. IE 11)
ES6 (UMD)browser/es6Use this build if you want to support modern browers only
Native (UMD)browser/nativeUse this build if you want to support cutting-edge browsers only

About "Native" Build

Native build uses browser built-in hash function (Crypto Subtle API)

Use @prescott/geo-pattern using unpkg

<!-- ES6 Target Build -->
<script type="text/javascript" src="https://unpkg.com/@prescott/geo-pattern/browser/es6"></script>

<!-- Native Build -->
<script type="text/javascript" src="https://unpkg.com/@prescott/geo-pattern/browser/native"></script>

<!-- ES5 Target Build (for Compat, requires Promise, Map, Set, and TextEncoder polyfill -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.5/core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@prescott/geo-pattern/browser/es5"></script>

Wishlists

Changelog

See CHANGELOG.

Testing

$ npm run test:spec # for unit test
$ npm run test:e2e:node # for Node.js integration test
$ npm run test:e2e:browser # for Browser integration test using locally installed chrome
$ npm run test:e2e:browserstack # for Browser compability test using BrowserStack

BrowserStack Logo

@prescott/geo-pattern uses BrowserStack for compatibility testing.

Build

$ npm run build

Related

TBD

Diagram

Dependency Graph

Dependency Graph

Credits

geo-pattern was originally wrote by Jason Long. It can't be done without his efforts.

Kudos for his amazing work! <3

License

MIT

See full license on mooyoul.mit-license.org