Skip to main content
SimilarExport ZIP
100%

dot-density

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

AI-generated description
MIT Licensed

Similar vizzes

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

line-density

Five squares display the same vertical line pattern at five distinct densities, from widely spaced to finely packed lines. D3 selects SVG rectangles and applies line textures generated by the textures.js library, with each texture's spacing controlled by the `.size()` method. Thick black outlines frame each rectangle, isolating the visual effect. The example demonstrates how varying the size parameter alters perceived line density while keeping orientation constant.

Zzoniyac
80% match
Loading thumbnail…

stroke dash gap

Five circles of decreasing radius demonstrate how the stroke dash gap scales with size, using line textures as fill patterns. The example uses the textures library’s `textures.lines()` method with varying `size` parameters (from default to 10, 5, 3, and 2) to create vertical line patterns. Each circle is rendered as an SVG element with D3 v5, applying the texture URL via `.style("fill", t.url())` while maintaining a black stroke outline. The visualization highlights how pattern density changes relative to circle dimensions.

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…

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…

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