Circle with Gradient

100%

Circle with Gradient

✓ Published0🌍 Public

Last edited Sep 3, 2021

Created on Sep 3, 2021

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.

AI-generated description

Neat 3D effect.

MIT Licensed

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

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

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…

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

80% match

Loading thumbnail…

animate circle

This example shows a single circle positioned inside an SVG container. The circle is placed at coordinates (100, 100) with a radius of 20 and a fill referencing a gradient defined as `#land1-gradient`. The page relies on plain HTML structure without any JavaScript logic or CSS styling rules in the provided files. It demonstrates the minimal setup for rendering static SVG shapes in a web page, using the SVG `<circle>` element and the `fill` attribute with a gradient reference.

Ggyan9427

79% match

Loading thumbnail…

Concentric circles -linear gradient

A group of fifty overlapping concentric circles radiates from the center of the screen, each positioned along a different angular direction and scaled by a random factor. The circles are rendered in SVG using React components, with each circle’s fill overridden by a radial gradient named `gradient-Saturn` that transitions from pale yellow to dark brown. The background applies a CSS linear gradient from green to black, and the `feDropShadow` filter adds a cyan glow.

CCurran Kelleher

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

79% match

Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

AAlim Bolar

79% match