Skip to main content
100%

Gist 8d9b109e150b883ed9c2

✓ Published0🌍 Public
Aabernier
Last edited Apr 6, 2015
Created on Apr 6, 2015

A plain SVG rectangle demonstrates a horizontal linear gradient, transitioning from light blue on the left to a warm orange on the right, with a dark gray border. The gradient is defined inside the SVG’s `<defs>` block, using `<linearGradient>` with two `<stop>` elements, and applied via the `fill` property in a linked CSS file. The example renders a single static shape, showing the SVG gradient syntax and CSS integration without any JavaScript or data processing.

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…

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…

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
79% 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
78% 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
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG composition techniques through a static graphic, using layered shapes and CSS-defined gradients without any JavaScript or data. An orange-to-yellow vertical linear gradient fills a large rectangle, while a circular shape overlaps it with a white-to-pink gradient, both drawn directly in SVG markup. The code relies on native SVG elements and attributes, including `rect`, `circle`, and `defs` with `linearGradient` stops. Because no dataset or dynamic behavior is present, the visualization focuses purely on visual styling and geometry.

Hhamzavdr
78% 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
77% match
Loading thumbnail…

Appearance

This example showcases fundamental SVG styling with two separate HTML documents. The first creates a gradient-filled rectangle using a linearGradient definition, a rounded rect element, and text, demonstrating how CSS-like stop colors and gradient coordinates work. The second document constructs a rainbow target from nine concentric circles, each filled with a distinct color, then covers half the shape with a white rectangle. Both use raw SVG elements and attributes in plain HTML, with no JavaScript or external libraries, to illustrate basic vector graphics appearances.

AAndrey Matukhno
76% match