stroke-width

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.

86% match

line-size

86% match

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.

84% match

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.

stroke dash gap

Five white circles with black outlines demonstrate the visual effect of decreasing stroke-dasharray values, from 30,30 to 1,1, which creates progressively finer dash-and-gap patterns along each circumference. Rendered as static SVG shapes using d3 v5, the example calls d3.select to append circle elements and sets their stroke, stroke-width, and stroke-dasharray attributes directly. The textures library is included but unused in the visible code.

stroke-width

Five horizontal black lines demonstrate the SVG `stroke-width` property, with widths increasing from 2 to 10 pixels. The paths are drawn inside a `<g>` element with `fill="none"` and `stroke="black"`, using hardcoded `d` coordinates for straight lines. The example uses React for rendering and raw SVG path elements, showing a static comparison of stroke thickness without interactivity.

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.

shape