https://github.com/pengzhanbo/geo-pattern-ts

Generate beautiful SVG patterns
https://github.com/pengzhanbo/geo-pattern-ts

background geopattern svg

Last synced: 2 months ago
JSON representation

Generate beautiful SVG patterns

• Host: GitHub
• URL: https://github.com/pengzhanbo/geo-pattern-ts
• Owner: pengzhanbo
• License: mit
• Created: 2024-03-19T09:09:46.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-06-09T20:17:05.000Z (7 months ago)
• Last Synced: 2024-10-11T01:55:07.512Z (3 months ago)
• Topics: background, geopattern, svg
• Language: TypeScript
• Homepage: https://geo-pattern.netlify.app
• Size: 97.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GeoPattern

[![jsr](https://jsr.io/badges/@raise/geo-pattern)](https://jsr.io/@raise/geo-pattern)

![jsr score](https://jsr.io/badges/@raise/geo-pattern/score)

![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/geo-pattern-ts?label=gzip)

[![MIT](https://img.shields.io/npm/l/geo-pattern-ts)](https://github.com/pengzhanbo/geo-pattern-ts/blob/main/LICENSE)

This is a TypeScript port of [jasonlong/geo_pattern](https://github.com/jasonlong/geo_pattern) with a

[live preview page](https://geo-pattern.netlify.app/).

## Install

```bash

# pnpm

pnpm add geo-pattern-ts

# yarn

yarn add geo-pattern-ts

# npm

npm install geo-pattern-ts

```

You can also use JSR：

```bash

# pnpm

pnpm dlx jsr add @raise/geo-pattern

# yarn

yarn dlx jsr add @raise/geo-pattern

# npm

npx jsr add @raise/geo-pattern

# Deno

deno add @raise/geo-pattern

```

## Usage

```ts

import { generate } from 'geo-pattern-ts' // jsr package name: @raise/geo-pattern

const pattern = generate('GitHub')

pattern.toDataUrl() // url("data:image/svg+xml;...

```

## API

### pattern = generate(input, options)

Returns a newly-generated, tiling SVG Pattern.

- `input` Will be hashed using the SHA1 algorithm, and the resulting hash will be used as the seed for generation.

- `options.color` Specify an exact background color. This is a CSS hexadecimal color value.

- `options.baseColor` Controls the relative background color of the generated image. The color is not identical to that used in the pattern because the hue is rotated by the generator. This is a CSS hexadecimal color value, which defaults to `#933c3c`.

- `options.generator` Determines the pattern. [All of the original patterns](https://github.com/jasonlong/geo_pattern#available-patterns) are available in this port, and their names are camelCased.

### pattern.color

Gets the pattern's background color as a hexadecimal string.

```ts

const pattern = generate('GitHub')

pattern.color // => "#455e8a"

```

### pattern.toString() and pattern.toSvg()

Gets the SVG string representing the pattern.

### pattern.toBase64()

Gets the SVG as a Base64-encoded string.

### pattern.toDataUri()

Gets the pattern as a data URI, i.e. `data:image/svg+xml;base64,PHN2ZyB....`

### pattern.toDataUrl()

Gets the pattern as a data URL suitable for use as a CSS background-image,

i.e. `url("data:image/svg+xml;base64,PHN2ZyB...").`

## License

Licensed under the terms of the MIT License, the full text of which can be read in [LICENSE](/LICENSE).