Skip to main content
SimilarExport ZIP
100%

orientation

✓ Published1🌍 Public
Zzoniyac
Last edited May 7, 2020
Created on May 6, 2020
Forked from 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.

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
86% match
Loading thumbnail…

orientation

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.

Zzoniyac
84% 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
80% 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
78% 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
78% 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.
77% match
Loading thumbnail…

background color

Five square panels demonstrate background-pattern combinations using the textures library with D3 v5. Each 100×100 SVG rect applies a different circle or cross texture via `textures.circles()` and `textures.paths()`, varying fill, stroke, and background colors. The examples show how transparent, white, black, and stroked textures alter visual contrast.

Zzoniyac
74% match
Loading thumbnail…

dot-density

Five square SVG rectangles display a graduated sequence of dot-density textures using the textures.js library for D3 v5. Each rectangle uses a `textures.circles()` pattern with progressively smaller circle sizes, from large to tiny dots, and applies the texture via `style("fill", t.url())`. The example demonstrates how varying pattern scale creates visual differentiation across identical shapes.

Zzoniyac
72% match