Gradient Along Stroke

100%

Gradient Along Stroke

✓ Published0🌍 Public

Last edited Jul 6, 2016

Created on Nov 28, 2012

This example shows a curved SVG path rendered as a continuous rainbow gradient that follows the stroke, with colors interpolated from green to red along the path’s length. The technique samples points along the path using the SVG `getPointAtLength` method, then computes miter joints via line-line intersection to fill each segment with a solid color from `d3.interpolateRainbow`. A thin stroke is added to each segment to avoid antialiasing artifacts. The code uses D3 v4 and renders entirely in SVG.

AI-generated description

This example demonstrates how to create a gradient that follows a stroke. This technique is sometimes used to indicate directionality along a curved edge, such as with hierarchical edge bundling.

To start, take any SVG path element and uniformly sample points along the path using getPointAtLength. (This method can also be used for path tweening.) Then, for each segment between adjacent points, compute the miter joint via line-line intersection. Lastly fill each segment by interpolating the start and end colors, here green to red, using the normalized length t along the path. Although each segment is a constant color, there are many segments to give the appearance of a continuous gradient.

This example uses a thin stroke in addition to filling the segments. This avoids antialiasing artifacts due to most web browsers not implementing full-scene antialiasing.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Gradient Along Stroke

This example shows a single thick SVG path rendered as a continuous gradient that transitions from green to red along the stroke, which can indicate directionality. Using the D3 v4 library, the code samples points uniformly along the path with `getPointAtLength`, then computes miter joints via line-line intersection for each segment. Each segment is filled and stroked with a color interpolated by `d3.interpolateRainbow` based on normalized path length, creating the gradient effect while avoiding antialiasing artifacts.

FFrissAnalytics

94% match

Loading thumbnail…

gradient path

A circular path is drawn as a gradient stroke that smoothly transitions through pink, purple, and back to pink, with a partially hidden segment indicated by a transparent gap. The example samples the SVG path uniformly using `getTotalLength` and `getPointAtLength`, then generates a series of quads and computes stroke outlines with custom line-join logic. Each quad is rendered as a separate filled SVG path, and its color is interpolated via `d3.interpolateRgbBasis`, with opacity controlled by the path position relative to the `complete` fraction. This technique produces a smooth, colorful gradient along the stroke without relying on SVG linear or radial gradients.

FFrissAnalytics

85% 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…

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

75% match

Loading thumbnail…

Linear Gradient Along Line Path

A line chart maps ten points with a smooth cardinal curve, and a vertical linear gradient colors the stroke from red through yellow to green. The gradient is defined as an SVG `linearGradient` with five stops, rotated 90 degrees, and applied to the path’s `stroke` attribute. The color scale uses `d3.scaleLinear` with a five-color range, while `d3.line` and `d3.curveCardinal` generate the path geometry. The example demonstrates how to apply a multi-stop gradient along a line path using D3 v4 and SVG.

EEfratVil

74% match

Loading thumbnail…

Simple Gradient Fill using D3

Two rectangles demonstrate a reusable D3 linearGradient definition, created in an SVG `defs` element. The first rectangle fills its interior with a diagonal red-to-blue gradient, while the second applies the same gradient to a four-pixel stroke, leaving its fill empty. Using d3-selection and d3 v5, the code sets `x1`, `x2`, `y1`, and `y2` attributes on the gradient and appends offset `stop` elements to control color transitions. The example shows how one gradient can style both fill and stroke in the same SVG scene.

RRSSBDAE

73% match

Loading thumbnail…

Linear Gradient

This example demonstrates a full-screen rectangle filled with a diagonal linear gradient. The gradient transitions from a solid green color at the top-left corner to a solid red color at the bottom-right corner, using the `pad` spread method. The visualization is rendered as SVG, constructed with the D3.js v3 library. It uses `d3.select` to append an `svg` element, defines a `linearGradient` inside a `defs` block with two `stop` elements, and applies the gradient as a fill via a URL reference.

Mmbostock

73% match

Loading thumbnail…

SVG Fundamentals Demonstration

This demo shows raw SVG path commands and gradient fills without a data source, using only the SVG element and its built-in path syntax. Three stroked paths use relative and absolute coordinates (M, L, l) to draw diagonal lines with varying thickness and color. A nested `<svg>` contains a linearGradient definition applied to an ellipse, demonstrating how gradients can be referenced via `url(#grad1)`. The example serves purely as a technical reference for SVG shape construction and styling.

Kkwmcclintick

73% match