stroke-dash type

100%

stroke-dash type

✓ Published1🌍 Public

Last edited Apr 23, 2020

Created on Apr 22, 2020

Three SVG path elements demonstrate the visual effect of varied stroke-dasharray values in React. Each horizontal line uses a different dash pattern—uniform segments, a repeating 10,10,5,5,8 sequence, and a longer 20,10,5,5,5,10 cycle—all rendered with black strokes on a white background. The SVG markup defines the paths directly with stroke-dasharray attributes, showcasing how dash spacing and repetition create distinct line textures without additional JavaScript or data.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

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

85% match

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

85% match

Loading thumbnail…

stroke-dasharray

Ten horizontal black lines are rendered across the SVG canvas, each displaying a distinct stroke-dasharray pattern. The dashes increase in length from the top line to the bottom, while the gap between dashes remains constant at five pixels. Using D3 v3, the code binds an array of ten numbers to `line` elements and sets each line’s `stroke-dasharray` attribute to `${d + 1},5`. The lines are evenly spaced vertically across the 960×500 viewport, with a consistent stroke width of 15 pixels.

Mmbostock

84% match

Loading thumbnail…

HTML Starter

A standalone HTML page demonstrates SVG line dash patterns as a visual reference. Ten horizontal lines render distinct stroke-dasharray sequences, from simple dashed and dotted patterns to complex, multi-value combinations. The example uses inline SVG elements with CSS-defined stroke properties, requiring no JavaScript or external libraries. It serves as a minimal template for exploring SVG attributes and a foundation for integrating React-based visualizations.

Fforeverworld1879

82% match

Loading thumbnail…

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.

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…

Stroke Dash Interpolation

A closed path, rendered as a dark stroke using a cardinal-closed line generator, loops through seven points on an SVG canvas. A dashed gray duplicate of the same path overlays it, while the dark stroke animates its `stroke-dasharray` from a zero-length dash to the full path length and back, creating a continuous drawing effect. The animation uses `transition.attrTween` with `d3.interpolateString` and `getTotalLength()` to compute the path length, cycling indefinitely via the transition’s `end` event. The example relies on D3 v3’s `d3.svg.line` and SVG path elements.

Mmbostock

78% match