Circle Gradient II

100%

Circle Gradient II

✓ Published0🌍 Public

Last edited Jul 22, 2016

Created on Jul 22, 2016

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.

AI-generated description

Circle Gradient with Linear scale

Similar vizzes

Loading thumbnail…

Circle Gradient I

Circle Gradient I shows a single large circle centered on a dark background, filled with a smooth radial gradient that transitions through nine color stops from blue at the center to red at the edge. The piece is rendered as a standalone SVG using the native `<radialGradient>` definition and a `<circle>` element, with the gradient’s center and focal points both set to 50%. The color sequence is manually specified in the SVG’s `<defs>`, creating a vivid spectrum that mimics a data-driven color scale, though no external dataset is used in the visible code.

EEfratVil

89% match

Loading thumbnail…

Circle with Gradient

A full-screen SVG displays a single circle centered on a 960-by-500 canvas, rendered with a vertical linear gradient that transitions from a pale cream top to a warm brown bottom. The example uses the SVG `<circle>` and `<linearGradient>` elements, with `gradientUnits` set to `userSpaceOnUse` to align the gradient precisely to the circle’s bounding box. The static scene demonstrates how to create a subtle, polished 3D-like shading effect using only vector primitives and no JavaScript libraries.

CCurran Kelleher

83% match

Loading thumbnail…

Radial Gradient

This example demonstrates a radial gradient by rendering a single circle filled with a smooth transition from gold at its center to red at its edge. The SVG markup defines the gradient using a `radialGradient` element with two `stop` points, and applies it to the circle via the `fill` attribute referencing the gradient’s ID. The circle is positioned with a center at (5,5) and a radius of 5 within a 10×10 viewBox, rendering as a 960×300 SVG.

DdaojunL

83% match

Loading thumbnail…

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

81% match

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

78% match

Loading thumbnail…

Concentric circles -linear gradient

This example generates a dense, abstract field of concentric circles with a linear gradient background transitioning from dark blue to grey. The visualization employs a nested loop structure to map 80 angular steps and 80 radial steps, computing each circle’s position with trigonometric functions and randomized offsets. The React component `Circles` renders individual SVG `<circle>` elements, using a radial gradient definition (`#gradient-Saturn`) for fills and a drop-shadow filter. The `fill` property is dynamically assigned in `index.js` via a `radialGradient`, while the SVG canvas measures 960 by 500 pixels. The code relies on React’s `ReactDOM.render()` and maps over arrays to produce the pattern.

NNita

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using four primitive shapes: a circle with a red-to-blue radial gradient, a larger circle with a centered radial gradient, a blue-outlined rectangle, and a red line. The SVG markup defines two radialGradient elements within a defs block, using stop tags to specify color transitions. A linearGradient is also declared but not referenced by any shape. The 800x400 canvas is rendered directly in HTML, with gradients using the url(#id) reference syntax.

Aalexscott-untitled

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

77% match