Linear Gradient

100%

Linear Gradient

✓ Published0🌍 Public

Last edited Jan 15, 2018

Created on Nov 25, 2017

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.

AI-generated description

Linear Gradient <br/> Reference: https://www.w3.org/TR/SVG/pservers.html

Similar vizzes

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

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

82% match

Loading thumbnail…

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.

EEfratVil

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

80% match

Loading thumbnail…

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

Loading thumbnail…

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.

EEfratVil

78% match

Loading thumbnail…

SVG_fundamentals

This example demonstrates two SVG rectangles with rounded corners, each filled using a linear gradient. The first rectangle uses a gradient defined by CSS classes within the SVG `<style>` block, while the second uses an inline gradient definition. Both gradients transition from red through transparent black to blue. The code relies on native SVG elements (`<defs>`, `<linearGradient>`, `<stop>`, `<rect>`) and CSS styling, with no external JavaScript libraries. The rendering is pure SVG embedded directly in the HTML document.

Iiliuchyk

77% match

Loading thumbnail…

linear gradient with draggable stops.

This example demonstrates an interactive linear gradient with draggable axis ticks, where the color stops align proportionally to their corresponding domain values. It shows how gradient offsets update in real time as users drag ticks horizontally to modify the domain. Built with D3.js (v3), it uses a linear scale, SVG `linearGradient` definitions, and drag behavior to redraw the gradient dynamically. The color scheme is selectable from a dropdown, and the domain regenerates randomly, while tick labels display both the value and its percentage offset. Rendering is handled via SVG, with data represented as hardcoded hex color ranges and generated numeric domains.

FFraserChapman

77% match