background color

100%

background color

✓ Published0🌍 Public

Last edited Apr 23, 2020

Created on Apr 23, 2020

Forked from shape

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.

AI-generated description

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

shape

Zzoniyac

80% match

Loading thumbnail…

dot-size

Five square panels display a progression of dot-size textures, from fine to coarse, demonstrating how changing the radius and stroke width of a repeating circle pattern alters visual density. Each panel is filled using a distinct texture created with the D3 textures library, applied via `svg.call()` and referenced with `texture.url()`. The example uses D3 v5 to construct SVG rectangles, with circles generated programmatically as tiling patterns.

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

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

77% match

Loading thumbnail…

stroke-width

This example demonstrates the visual impact of varying stroke widths on a simple pattern. It presents five white squares, each filled with vertical line textures of increasing thickness, from one to nine pixels, while the squares’ own black outlines also grow in width. The visualization is built using D3.js (v5) and the `textures` library, specifically calling `textures.lines().orientation().strokeWidth()` to generate each pattern within an SVG canvas. The code directly manipulates SVG `rect` and texture attributes to create a clear comparative scale.

Zzoniyac

77% match

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

76% 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

76% match