Skip to main content
SimilarExport ZIP
100%

orientation

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

AI-generated description
MIT Licensed

Similar vizzes

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
90% 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
86% 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.
82% 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
79% 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
79% match
Loading thumbnail…

dot-density

Five square panels each display a distinct dot-density texture, ranging from a sparse chevron pattern to progressively denser grids of circles. The visualization demonstrates how varying dot sizes and spacing create different visual densities and surface textures. It uses the textures library to generate SVG pattern fills, with each rectangle importing a different texture via the `.url()` method. The code calls `textures.paths()` for the chevron design and `textures.circles()` at four different sizes to populate the remaining panels.

Zzoniyac
77% 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
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
76% match