Skip to main content
SimilarExport ZIP
100%

orientation

✓ Published3🌍 Public
Zzoniyac
Last edited May 13, 2020
Created on Apr 21, 2020
Forked from shape

A 2x5 grid of black-bordered squares displays ten distinct texture fills generated by the textures.js library. The patterns include hexagons, crosses, caps, woven lines, waves, squares, circles, a complemented circle set, and diagonally oriented lines. D3.js v5 selects the SVG element and appends each rectangle, assigning the texture’s `url()` as the fill style via `d3.select('svg')` and chained `.attr()` calls. The example demonstrates the variety of available texture API options, including shape, size, and line orientation parameters.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

orientation

This example displays ten square panels arranged in two rows, each filled with a distinct geometric pattern such as hexagons, crosses, woven shapes, waves, and lines. It demonstrates the textures library’s ability to generate SVG patterns for filling shapes. Using d3 selections and the textures API, the code creates ten texture objects and applies them to the rectangles via `style.fill` with their `.url()` references.

Zzoniyac
90% match
Loading thumbnail…

Fork of orientation

This visualization showcases ten different texture patterns—hexagons, crosses, caps, woven, waves, squares, circles, complement circles, lines with varying orientations, and nylon—each rendered inside a distinct square outlined in black. Built with D3.js and the texture.js library, the patterns are generated using textures.paths(), textures.circles(), and textures.lines(), with each texture applied as a fill to an SVG rectangle via t.url(). Custom colors, stroke widths, and backgrounds differentiate the patterns.

Zzach b.
84% match
Loading thumbnail…

orientation

This example shows a large, dark square filled with two distinct path-based patterns created using the textures library. Each pattern is generated by a different custom path function and applied to the square as a fill. The code uses `textures.paths()` to define the patterns and `svg.call()` to register them, then assigns the texture URLs to the rectangle via `.style("fill", t1.url())`. The rendering is done with D3 v5 and SVG, with the square drawn as a single `rect` element.

Zzoniyac
84% match
Loading thumbnail…

shape

Five squares demonstrate different texture patterns from the `textures` library applied as SVG fills. Each rect uses a distinct generator—circles, vertical lines, transparent circles, hexagons, and crosses—created via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The examples show varied stroke widths, radii, and fill opacity for the texture elements, all rendered on a 960×500 SVG canvas using D3 v5 to append and style the rectangles.

Zzoniyac
81% match
Loading thumbnail…

shape

Five squares demonstrate different texture patterns from the `textures` library applied as SVG fills. Each rect uses a distinct generator—circles, vertical lines, transparent circles, hexagons, and crosses—created via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The examples show varied stroke widths, radii, and fill opacity for the texture elements, all rendered on a 960×500 SVG canvas using D3 v5 to append and style the rectangles.

Zzoniyac
81% match
Loading thumbnail…

orientation

This example demonstrates how to dynamically change a circle’s fill using a texture pattern. The circle, drawn with D3, initially has no fill, and clicking buttons applies or removes a texture generated by the `textures` library’s `paths()` API. The texture is set via `.url()` and passed to a `changeColor` function, which updates the circle’s `style("fill")`. Rendering is SVG-based, with the D3 v5 selection and attribute methods controlling the visualization.

Zzoniyac
78% match
Loading thumbnail…

line-size

Five squares display vertical line textures with increasing stroke widths, from one to nine pixels, arranged left to right. The example uses the textures library to generate line patterns, applied as SVG fills via `textures.lines()` with the `.orientation()` and `.strokeWidth()` methods. Each rect is drawn with d3.js, assigning the texture URL to its fill style. This demonstrates how texture density and visual weight change with stroke thickness.

Zzoniyac
77% match
Loading thumbnail…

line-size

Five squares display vertical line textures with increasing stroke widths, from one to nine pixels, arranged left to right. The example uses the textures library to generate line patterns, applied as SVG fills via `textures.lines()` with the `.orientation()` and `.strokeWidth()` methods. Each rect is drawn with d3.js, assigning the texture URL to its fill style. This demonstrates how texture density and visual weight change with stroke thickness.

Zzoniyac
77% match