Skip to main content
SimilarExport ZIP
100%

dot-density

✓ Published1🌍 Public
Zzoniyac
Last edited Apr 22, 2020
Created on Apr 22, 2020
Forked from line-size

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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
89% 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
83% 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
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
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…

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