Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Radial Gradient

Public visualization

Viewing a saved revision (read-only)

857f465ad43b4870bf1a0b3564538bca

Radial Gradient

0 stars3🌍 Public
CCurran Kelleher
Last edited Jan 11, 2020
Created on Jan 11, 2020
Forked from HTML Starter

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.

AI-generated description

An example of a radial gradient with SVG.

Draws from MDN: <radialGradient> example.