stroke-dash gap

100%

stroke-dash gap

✓ Published0🌍 Public

Last edited Apr 23, 2020

Created on Apr 22, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

stroke-dash type

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.

Zzoniyac

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

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

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

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

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

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

77% match

Loading thumbnail…

dashed arrays

A single spiral path and a separate red dashed curve are layered on a light background, both given a soft drop shadow through an SVG filter. The spiral is animated to rotate continuously, while the red curve uses CSS `stroke-dasharray` and `stroke-dashoffset` keyframes to make its dashes appear to flow along the path. The example demonstrates how CSS animations can drive SVG stroke effects, with the rotating spiral and moving dashes creating a dynamic, kinetic composition. The code relies on D3 v4 only to set the SVG dimensions; all visual styling and animation come from CSS.

PPatrick Wojda

76% match