Linear Gradient Rotation

100%

Linear Gradient Rotation

✓ Published0🌍 Public

Last edited Jan 15, 2018

Created on Nov 25, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

EEfratVil

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

76% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

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

76% match

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

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

75% match

Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis

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

73% match