https://github.com/riccardoscalco/textures

Textures.js is a JavaScript library for creating SVG patterns
https://github.com/riccardoscalco/textures

d3 patterns svg textures

Last synced: 1 day ago
JSON representation

Textures.js is a JavaScript library for creating SVG patterns

• Host: GitHub
• URL: https://github.com/riccardoscalco/textures
• Owner: riccardoscalco
• License: mit
• Created: 2015-01-28T12:24:23.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T20:03:38.000Z (about 2 years ago)
• Last Synced: 2025-01-17T09:03:55.156Z (9 days ago)
• Topics: d3, patterns, svg, textures
• Language: JavaScript
• Homepage: http://riccardoscalco.github.io/textures/
• Size: 5.71 MB
• Stars: 6,046
• Watchers: 91
• Forks: 219
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

• awesome-d3 - textures - SVG patterns for data visualization (Utils)
• Algorithms-Cheatsheet-Resources - Textures.js is a JavaScript library for creating SVG patterns
• awesome-d3 - textures - SVG patterns for data visualization (Utils)
• awesome-list - textures
• awesome-frontend-gis - Textures.js - JavaScript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization. Textures are useful for the (🎨 Colour advice / Advanced)
• awesome-d3 - textures - SVG patterns for data visualization (Utils)
• awesome-starred - riccardoscalco/textures - Textures.js is a JavaScript library for creating SVG patterns (others)

README

        
# textures.js

Textures.js is a JavaScript library for creating SVG patterns.

Made on top of [**d3.js**](https://d3js.org/), it is designed for data visualization.

Read more on http://riccardoscalco.github.io/textures/.

## Install

```

npm install textures

```

## Usage

Import `textures.js` from NPM with:

```js

import textures from 'textures';

```

You can also use `textures.js` in your HTML page with a `` tag by downloading `textures.js` to a local folder:

```html

<script src="path/to/textures.js">

```

or by using the Unpkg CDN network:

```html

```

Then `textures.js` can be used alongside `d3` with:

```js

const svg = d3

  .select('#example')

  .append("svg");

const texture = textures

  .lines()

  .thicker();

svg.call(texture);

svg

  .append('circle')

  .style('fill', texture.url());

```

## License

MIT