stroke dash gap

100%

stroke dash gap

✓ Published0🌍 Public

Last edited Apr 29, 2020

Created on Apr 29, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Zzoniyac

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

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

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

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

81% match

Loading thumbnail…

line-size

Zzoniyac

81% match

Loading thumbnail…

stroke-dash gap

This example shows how adjusting the gap value in an SVG stroke-dasharray changes the visual rhythm of a line, progressing from wide, distinct gaps to a nearly solid stroke. Using React for rendering, it draws five horizontal paths within an SVG group, each with a fixed dash length of 5 and gap lengths that shrink from 20 down to 1. The code applies the stroke-dasharray attribute directly to each path element, demonstrating the effect with black strokes on a white background.

Zzoniyac

80% match

Loading thumbnail…

stroke-dasharray

Ten black horizontal lines on a white SVG canvas demonstrate ten different stroke-dasharray styles, from a nearly solid line to a heavily dashed pattern. The example generates each line by mapping a data array from `d3.range(10)` to vertical positions, setting the `stroke-dasharray` attribute to `(d + 1) + ",5"` for increasing dash lengths. Using D3 v3 and SVG line elements, the code renders fixed-width strokes with a consistent 15-pixel stroke width to highlight the dash patterns.

FFrissAnalytics

80% match