dashed arrays

100%

✓ Published0🌍 Public

Last edited Jan 17, 2020

Created on Oct 22, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

77% match

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor

76% match

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Mmbostock

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

76% match

Loading thumbnail…

HTML Starter

This example showcases a line drawing of an intricate shape that animates itself onto the screen using a stroke-dash technique. The path is drawn over three seconds with a linear ease. The code uses D3.js version 3.5.6 to select the body, append an SVG, and create the path. It then leverages `path.node().getTotalLength()` and transitions with `attrTween` to animate the `stroke-dasharray` and `stroke-dashoffset` attributes, creating the effect of the line being traced. The underlying data is a static, pre-defined SVG path.

AAndrew Yan

75% match