Linear Gradient

Linear Gradient

Two horizontal SVG rects demonstrate linear gradients: a static HTML/SVG version with hardcoded stops and a dynamic D3 v4 version using `d3.scaleLinear` for the color range. The D3 code programmatically appends `stop` elements to a `linearGradient` definition, mapping five color values across offsets from 0% to 100%. Both rects are stroked in black, and the example contrasts explicit markup with data-driven gradient creation. The gradient fills are applied via the `fill` attribute referencing the gradient IDs, with the D3 version relying on the `d3-selection` API to construct the SVG structure.

82% match

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

79% match

fresh block

This example demonstrates a simple gradient-filled rectangle drawn in an SVG canvas. It shows a black horizontal bar with a linear gradient that fades from fully opaque on the left to nearly transparent on the right, positioned near the top of the frame. The code uses D3 v4 to select the body, append an SVG element, and construct a linearGradient definition with two stop points via `selectAll` and `data`. A single `rect` is then appended and styled with the gradient, relying on D3's data-binding to set offset and opacity values.

CCoreyBurkhart

79% match

Linear Gradient Rotation

A linear gradient filled square rotates interactively based on a slider input, demonstrating how SVG gradient transforms can animate smoothly. The square’s fill uses a vertical linear gradient with eight evenly spaced color stops, mapped from a d3.scaleLinear over a range of pastel hues. Dragging the range input triggers a transition that applies a `gradientTransform` rotation attribute to the gradient definition, rotating the color bands within the fixed square. The code relies on d3.v4, SVG, and `transition.attr` to update the rotation, while the slider’s value directly drives the angle. No external data is used; the visualization purely illustrates gradient manipulation and interaction.

76% match

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.

Radial Gradient

A full-window SVG renders a single circle that fills the viewport with a smooth transition from gold at the center to red at the edge. The visualization uses a `<radialGradient>` defined in the SVG `<defs>` section, with two `<stop>` elements specifying color and offset percentages. The circle references this gradient via the `fill` attribute using `url('#myGradient')`. This example is adapted from MDN documentation and demonstrates core SVG gradient functionality without any JavaScript or data processing.

CCurran Kelleher

Circle Gradient II

A single circle is centered on a blank SVG canvas, its fill defined by a radial gradient that transitions through three color stops. The gradient’s stops are mapped to a linear scale with a domain from -1 to 1, using the color range [#d73027, #e0e0e0, #4575b4]. This creates a smooth transition from red to light gray to blue. The example uses D3 v4’s `d3.scaleLinear` to map the domain values to the color range, and the SVG `radialGradient` definition to apply the gradient to the circle’s fill.

HTML Starter

This example shows a single vertical bar whose fill color transitions through a five-stop gradient from red to green, with the bar’s height fixed and width constant. The data array contains one number (39) that currently does not affect the bar’s dimensions, despite the readme suggesting otherwise. The code uses d3.select and append to create an SVG, then builds a linearGradient with d3’s data join, binding the colors array to stop elements. The bar is a rect with a fill referencing the gradient, rendered against a light gray background.

DDavid